原生应用开发框架 - window篇
- React-Native
facebook 推出的使用react，js开发的原生框架
react官网
- Weex
阿里巴巴开源的使用vue开发的原生框架
weex官网
- Flutter
dart语言，类似es6，如果对面向对象有深入理解的话，很快上手，google公司推出的
Flutter官网
React-Native
- 基于react优雅的架构设计
- 支持热重载
- 丰富的组件
- 成熟的社区支持
- 兼容原生代码
Weex
- 基于Vue生态圈
- 支持Vuex & Vue-Router
官网更新之后，有很多坑，网上也找不出令人满意的解决方案
Flutter
最近开源的，可以开发出高质量的原生应用
- 快速开发
- 富有表现力和灵活的UI
- 原生性能 （相对于前两个框架有提高）
- 现代的，响应式框架
Windows环境搭建
说明
React-Native、Weex、Flutter在Windows上面的环境搭建都差不多，但是也有些个体差异，本文章先说共性的东西，然后再针对不同的框架分别作出说明
共同部分
1、安装 Node
下载地址:
https://nodejs.org/en/
2、安装 JDK8.x
下载地址:
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
然后下一步下一步安装即可
装完之后还不够，还需要配置环境变量，JAVA_HOME的配置 -> 系统变量的path配置，
新建JAVA_HOME: C:\Program Files\Java\jdk1.8.0_191
追加path: (1) %JAVA_HOME%\bin (2)%JAVA_HOME%\jre\bin
命令行敲 javac 有反应则安装配置成功
3、安装Git
下载地址:
https://git-scm.com/downloads
4、安装 Android sdk
百度网盘：
https://pan.baidu.com/s/1ImnzcYV0wtNfqH2-BM-QSQ
下载地址:
https://blog.csdn.net/QQxiaoqiang1573/article/details/73274771
安装完后也需要配置环境变量：
新建ANDROID_HOME： E:\Android\Android\android-sdk
追加path: (1) %ANDROID_HOME%\tools (2)%ANDROID_HOME%\platform-tools
命令行敲 adb 有反应则安装配置成功
5、安装 Android 模拟器
推荐夜神模拟器，轻量级并且使用方便，下载地址:https://www.yeshen.com/
非共性 - React-Native部分
参考地址:https://facebook.github.io/react-native/docs/getting-started.html
1、安装python2.x
下载地址:
https://www.python.org/downloads/
非共性 - Weex部分
常见问题:
https://www.jianshu.com/p/8cd872a618d4
安装一个Android 5.1.1 的模拟器，不要使用它默认的4.4的模拟器
非共性 - Flutter部分
参考地址:https://flutterchina.club/setup-windows/
1、安装 Flutter SDK
下载地址:【建议通过git clone】
https://flutter.io/sdk-archive/#windows
2、配置环境变量
追加path： C:\Flutter\flutter\bin
3、执行一次 flutter doctor 来安装需要的依赖包
这里注意：找到flutter目录下的flutter_console.bat，双击会弹出终端输入 flutter doctor执行安装命令（安装过程会有点长），结束后输入flutter --version 显示版本信息则安装成功如上图，若在git直接执行flutter doctor会显示 --- Downloading Dart SDK from Flutter engine 5983e34a3c0e1217da7e8bbe9f2fe685048fe259... Unknown operating system. Cannot install Dart SDK.
脚手架的搭建
一. React-Native
1.1全局下载rn脚手架
> yarn global add react-native-cli
1.2 react-native init AwesomeProject 构建项目
1.3 打开android夜神模拟器，顶部栏设置-高级设置-分辨率设置-调节成手机版
1.4 在模拟器右下角右小角点击设置-关于平板电脑-点击数次版本号 则可切换成开发者模式，返回上一级，则可以看到开发者选项
1.5 点击开发者选项，打开usb调试-确定
1.6 把电脑与模拟器连接，在git终端输入如下第一个命令
> adb connect 127.0.0.1:62001
若连 接成功会提示successfully
> adb devices 检查是否连接成功，提示如下：
（1） List of devices attached
（2）127.0.0.1:62001 device
> adb kill-server 是停止当前进程
1.7 cd进主项目文件夹（AwesomeProject文件夹）运行react-native run-android命令，打包至安卓模拟器，这时会弹框一个node进程，不要关闭，稍等即可看到模拟器运行了我们打包好的rn程序
*注意：执行1.7 步骤有可能会遇到3个问题，问题及解决方案如下*
（1） 找不到或无法加载主类 org.gradle.wrapper.GradleWrapperMain
> 原因：AwesomeProject\android\gradle\wrapper目录下gradle-wrapper.jar文件为空或没有该文件，这是我们项目未初始化结束就操作其他步骤造成的
> 解决方法: 删除整个项目于，重新执行1.2步骤
（2）Failed to install the following Android SDK packages as some licences have not been accepted.You have not accepted the license agreements of the following SDK components......
> 原因：没有授权操作权限
> 解决方法: 打开cmd，这里一定要用cmd不要用git等其他客户端，cd到目录 E:\Android\Android\android-sdk\tools\bin（以我的为例，android SDK的目录），看到这里有个sdkmanager.bat文件为正确目录，然后再cmd输入sdkmanager --licenses，并回复几次 y 即可。
（3）error: closed Could not run adb reverse: Command failed: E:\Android\Android\android-sdk/platform-tools/adb -s 127.0.0.1:62001 reverse tcp:8081 tcp:8081
> 原因及解决方案：adb启动的问题 换成5.x版本以上的模拟器就行了，注意5.x版本端口号可能改变，我的由62001变成了62026
最后rn脚手架下，终于没问题了，如下图：
二、Flutter
生成flutter工程有两种方式
- vscode方式
（1）利用vscode，在商店里搜索并安装dart、flutter；
（2）点击vscode左下角管理图标 - 命令面板 - 输入flutter - 选择 Flutter: New Project，等待一会即可自动生成项目文件
（3） 重复rn的1.3~1.6步骤
（4） 运行项目: 一次点击vscode如下按钮扫描二维码关注公众号，回复： 5618707 查看本文章
① 点击左侧侧边栏的调试 小蜘蛛图标
② 点击绿色 开始调试按钮，如下图4-1 时间会长些，当vscode控制台出现如下字符时如图4-2，则flutter已经运行在模拟器上了，如图4-2，点击 模拟器的 加号有数字会增加
4-1
4-2 - 命令行方式
flutter create myapp
cd myapp
连接夜神模拟器，flutter devices命令检查是否连接成功
flutter run 如果运行成功则可看到如上图4-2 一样的效果
如何在真机运行呢，这里我以flutter为例
adb kill-server杀掉所有连接端口， 插入真机，android或ios调成开发者模式，可输入adb devices或flutter devices 检查连接状态，如下图是adb devices的结果，蓝色为真机已连接，红色为模拟器未连接。
项目目录中，命令行方式输入flutter run或vscode启动方式均可以在真机重新启动改项目。
