Weex 起步：项目初始化和模拟器运行 Native APP

最近开在始做一个移动端的项目，使用的技术栈是 React 相关的技术栈，完成之后，页面放到其他手机客户端里面展示。项目初期可能只是放在其他手机客户端里面展示，后面会考虑做成独立手机客户端，所以预先熟悉一下这方面的技术，比如 Weex，比如 React Native。

之前在网上看到一些 Weex 文档的吐槽，所以我也是带着一点忐忑的心情来调试这个初始化项目的。-_-||

在参考网上其他文章调试这个项目的时候，会出现一两个因为工具版本或者是自身电脑环境的缘故而中途运行不起来，你在参考这篇文章调试的时候，也可能会出现类似的问题，表慌，坑都是这样踩出来的，欢迎在评论下面分享出你遇到的坑。: )

我当时的电脑环境是：

# 系统版本
macOS Sierra: 10.12.5
# 我用另一台电脑的系统版本是 OS X EI Capitan 10.11node: v6.11.3
# 我用另一台电脑试的时候，当时那台电脑的 node 版本是 v4.x。
# 我抱着试一试的心态从 Node 官网直接下了 v6.11.4 的 dmg 安装包，安装成功后，node 版本就变成了 v6.11.4。
# 这样就算升级了 node 版本了，*_*。npm: v5.4.2
# 因为官网介绍 weex-toolkit1.0.8 版本后添加了 npm5 规范的 npm-shrinkwrap.json 用于锁定包依赖
# 所以 npm 的版本升级到了 5.x，故 npm 版本 < 5 的用户需要通过 npm i npm@latest -g 更新一下 npm 的版本。cnpm: v5.1.1  # 安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org复制代码

如果上面的工具还没有安装，那先安装一下，尽量保证版本一致。这时候我还没有装 cocoapods，没有装 JDK，没有指定 ANDROID_HOME 路径，也不知道需要安装这些，这些要到后面用模拟器运行 APP 时才会知道它们。

接下来先进行项目初始化。

项目初始化

一、安装 `weex-toolkit` 工具。

cnpm install -g weex-toolkitweex -v
# 查看安装的版本，我使用的版本是：v1.1.0-beta.1复制代码

提示：如果提示权限错误（'...permission error'），使用 sudo 关键字进行安装。

二、创建项目

weex create weex-project复制代码

三、开发

npm install
# 估计会比较慢，耐心等一下npm run dev & npm run serve
# 会自动在浏览器里面打开项目页面# *注意上面的命令不是 npm run dev && npm run serve
# 也不是 npm run dev & npm run server，更不是 npm run dev && npm run server
# 这里我之前老是搞混，导致不能正常启动调试。# 默认是使用 8080 端口启动，如果被占用，需要换一个端口启动。复制代码

页面的代码是在 src/index.vue 文件里面定义的，纯正的用 Vue 写的 Web 代码。百闻不如一见，是不是感觉心跳在加速，可以用 Web 代码写手机原生应用了。

模拟器运行 Native APP

既然是写手机原生应用，那我们就把页面放手机上展示看看。这里如果没有真机的话，就先用模拟器来展示。首先是 iOS 版本。

iOS 版

一、安装一些软件和工具。

Xcode

我现在用的是 Version 8.3.3 (8E3004b) 版，是从苹果开发者中下载的历史版本。因为现在从 APP Store 里面 Xcode 版本是 9.0，我的系统支持不了。所以如果你的系统也不能兼容这个版本的 Xcode，也需要到苹果开发者中心里面去下载历史版本的 Xcode。
Simulator
CocoaPods
它是 Swift 和 Objective-C Cocoa 项目的依赖管理工具，像 npm 一样。

如果没有安装这个工具的话，之后 build 完后就没有 WeexDemo.xcworkspace 文件，然后只能在打开 Xcode 项目时不知所措地选择 WeexDemo.xcodeproj 文件。结果会是一大堆报错，报各种 iOS 的兼容性问题，连最低版本的 iOS8 都不支持，项目根本运行不起来。

好了，不多说，我们先来安装一下：
```
# Xcode 8 + 9
sudo gem install cocoapods复制代码
```

二、添加 iOS platform

weex platform add ios复制代码

三、打包

weex build ios
# 用另一台电脑试的时候，在 pod install 时由于网络问题报了 fatal: unable to access 'https://github.com/CocoaPods/Specs.git/':SSLRead() return error -9806 的错误，然后就没有正常生成 WeexDemo.xcworkspace 文件。
# 这个时候需要重新再来几次，直到成功安装上依赖。
# 成功安装依赖后，到提问 ? enter your AppId: 时，ctrl + c 停止。复制代码

四、用 Xcode 打开项目，选中 WeexDemo.xcworkspace 文件。

如果没有这个文件，请确认一下是否安装了 cocoapods，并且 weex build ios 过程没有报错。

项目打开后是这样的：

五、选择合适的模拟机型，点击运行。

要确保选择的机型，你有对应的 simulator iOS 系统。

如果没有什么报错，只是 warning 的话，会出现下面的图标：

然后这时候 Xcode 会去连接模拟器，然后打开 Weex Playground 运行项目页面。

至此用 iOS 模拟器运行 Weex 开发的原生应用大功告成，接下来是 Android 版。

Android 版

和 iOS 版相比，使用 Android 模拟器来运行应用，除了安装一些软件和工具外，还需要在终端的配置文件里面添加一些变量路径。

一、安装一些软件和工具

Android Studio && Android SDK
我现在使用的版本是 v2.3.3。

安装完成后，新建一个 Android 项目。在 Minimum SDK 中选择的是：API 22：Android 5.1（Lollipop）。

创建成功后进入项目界面，这时 Android Studio 会下载一些项目需要的文件。

下载 Android SDK。打开 Preferences（快捷键 command + ,），打开 Appearance & Behavior > System Settings > Android SDK 栏，选择 SDK Tools 项，需要勾选右下方的 Show Package Details，然后选中 Android SDK Build-Tools 目录下的 23.0.2 版本，点击 OK 下载。

网上资料说，由于 Android Studio 不会配置环境变量，所以我们需要进行一些配置才能使用 weex 的相关命令。

这里主要是需要在终端的配置文件里面添加一些变量路径。我现在用是 iTerm2，装了 ohmyzsh，所以我改的是 .zshrc 文件的配置：
```
vim ~/.zshrc# 添加下面的两行内容
export ANDROID_HOME=/Users/caiyongmin/Library/Android/sdk  # 这个路径是上面图片中 Android SDK Location 的路径
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools# 然后保存修改，运行
source ~/.zshrc复制代码
```
如果你使用的是系统自带的终端，那就要修改 ~/.bash_profile 文件的内容了。
Android Virtual Device

这里同样要安装运行安卓系统的手机模拟器。在菜单中选择 Tools > Android > AVD Manager。

显示打开下面的界面，点击 Create Virtual Device 来创建一个手机模拟器。可以看到我已经下载了一个手机模拟器和安卓系统。

然后点击后面的 Actions 栏的三角按钮，启动我们的手机模拟器。到时候 weex run android 的时候，项目的页面会显示在这个手机模拟器中。
JDK

安装完 Android Studio 和手机模拟之后，需要安装 JDK。我安装的版本是 JDK SE8。开始安装的时候，我安装de的是 JDK SE9 版本，但是这样导致我 run android 项目的时候报方法兼容错误，运行不起来，然后我就把版本降到了 JDK SE8，之后就正常运行了。

如果需要删除之前安装的 JDK，请看这篇文章。

好了，完成上面的安装之后，就可以进行接下来的运行了。

二、添加 Android platform

weex platform add android复制代码

三、运行

weex run android  # 这里不 build 了，直接 run，这也是和 iOS 模拟版本不一样的地方。复制代码

运行成功，项目页面会显示在刚刚启动的手机模拟器上，看下面的画面：

这样 Android 版的也完成了。

The End！

参考资料

Weex 文档搭建开发环境。
网易严选App感受Weex开发（已完结）。
【入门】WEEX快速创建工程 Hello World。
Weex 入坑指南：Native App 的运行与构建。

转载于:https://juejin.im/post/59f204a26fb9a0451968d0db