这几年, 移动跨平台的趋势可以说是越来越明显, 技术实现上也是百花争艳, 不过究其实现, 无外乎有那么几种
web 流: 也被称为 Hybrid 技术, 它基于 Web 相关技术来实现界面及功能
代码转换流: 将某个语言转成 Objective-CJava 或 C#, 然后使用不同平台下的官方工具来开发
编译流: 将某个语言编译为二进制文件, 生成动态库或打包成 apk/ipa/xap 文件
虚拟机流: 通过将某个语言的虚拟机移植到不同平台上来运行
这方面具体的介绍可以查看我之前文章的介绍: 移动跨平台开发方案总结相比较于目前比较好的跨平台开发, 有几个比较好的框架: React Native,Flutter 和 Weex 对于 React Native 想必大家应该不陌生, ReactNative 简称是 RN , 是 Facebook 于 15 年开源的一个跨平台的框架, 目前已经趋于稳定 Flutter 则是由 Google 基于 Dart 语言开发的一个移动跨平台开发框架, 实际上就是以前的 Sky SDK, 是 React Native 的竞争对手 Weex 则是阿里开发的一套简单易用的跨平台开发方案, 使用较少, 没有前面两个名气大
Flutter 和 React Native 区别
在正式介绍 Flutter 之前, 让我们先来看一下 Flutter 和 React Native 实现上的一些异同
对 React Native 稍有了解的读者都知道, React Native 是基于组件进行开发的, 这和原生 APP 的开发思路是一致的, 不同的是 React Native 提供的组件都是继承自原生 Native 的 View 组件, 通过调用原生的平台组件来实现 UI 的绘制工作比如 React Native 中的 ListView 在 Android 中就是继承自 ListView , 还有 RecycleView, 对于 IOS 来说则是 TableView 组件
然而 Flutter 则不同, 它的所有 UI 组件都是一帧一帧画出来的 Flutter 不需要底层的转换操作, 因而在界面绘制上更加准确灵活其次它还非常人性化的贴近了平台的特性, 比如 Android 的 Material Design 在 Flutter 就默认支持了进去
编写语言方面, 两平台都是为了推广自己的技术, Flutter 使用的是 Dart 语言开发 (基本没怎么听说过), 而 React Native 则使用 JSX 来开发的, 借鉴了 React 的很多东西
Dart 简介
相信并没有几个读者知道还有 Dart 这种语言, 说实在的我也没怎么听过 Dart 是 Google 于 2011 年推出的定位应用编程的语言, 据说目的是取代传统的 JS 相比同时代的 go 定位服务器系统, Dart 可以说并不是很成功学习 Dart 可以通过中文社区来学习: http://www.cndartlang.com / 当然, Dart 也提供了在线编写运行代码的功能, 官方地址为: https://www.dartlang.org/
- git clone -b beta https://github.com/flutter/flutter.git
- export PATH=`pwd`/flutter/bin:$PATH
- cd ./flutter
- flutter doctor
- Doctor summary (to see all details, run flutter doctor -v):
- [] Flutter (Channel dev, v0.1.7, on Mac OS X 10.12.6 16G1212, locale zh-Hans-CN)
- [] Android toolchain - develop for Android devices (Android SDK 27.0.0)
- [!] iOS toolchain - develop for iOS devices (Xcode 9.2)
- libimobiledevice and ideviceinstaller are not installed. To install, run:
- brew install --HEAD libimobiledevice
- brew install ideviceinstaller
- ios-deploy not installed. To install:
- brew install ios-deploy
- [] Android Studio (version 3.0)
- [] Connected devices (1 available)
- import 'package:flutter/material.dart';
- void main(){
- runApp(new Center(child: new Text('Hello Flutter!')));
- }
来源: http://blog.csdn.net/xiangzhihong8/article/details/79588299