学习使用Weex

概要

Weex是由阿里巴巴淘宝技术团队发起的一个跨平台的前端解决方案. 如果你已经了解React-Native, 那么Weex可以理解为Vue-Native. 它是基于Vue的多端解决方案.

安装

很多人选择Weex可能是看中了它的中文文档. 但是经过我的调查, 遗憾的发现, 这份文档真的是非常的简陋和疏于更新. 而且是反映了整个阿里开源项目

官方文档推荐使用weex-toolkit来构建和调试程序. 首先使用命令:

yarn global add weex-toolkit

如果你使用npm, 可以用 npm install -g weex-toolkit

如果发现报错

error hawk@0.10.2: The engine "node" is incompatible with this module. Expected version "0.8.x".
error Found incompatible module

则需要加入--ignore-engines 忽略报错

yarn global add weex-toolkit --ignore-engines

如果安装成功, 执行

weex -v

会看到版本信息

建立工程并运行

weex create <项目名>

成功后会看到weex在当前路径下新建了一个文件夹, 里面包含了项目的基础文件
先安装工程运行需要的依赖

npm install

执行

npm start

你会看到浏览器上的欢迎页面

我同时尝试了weex preview命令, 但是报错不能用

增加对移动端的支持

到目前为止, 工程还没有支持iOS或者Android, 我们可以运行

weex platform list

来查看当前项目所支持的移动平台.
如果想要增加支持的移动端(比如iOS), 需要执行

weex platform add ios

执行完成后, 再运行weex platform list可以看到类似如下信息

Installed platforms:
- ios 4.1.5

Available platforms:
- android ^6.3.8

这时还不能运行iOS程序, 因为新建的项目缺少bundle id. 编辑ios.config.json文件, 将AppId的值改成期望值

{
   "AppName":"WeexApp",
   "Version":"0.1",
   "BuildVersion":"0.1.0",
   "AppId":"com.milo.weex",
   "CodeSign":"",
   "Profile":"",
   "WeexBundle":"index.js"
}

执行weex run ios 会提示选择模拟器, 然后就可以看到程序运行了

打包

weex的打包命令如下:

weex build ios

如果ios.config.json文件中缺少信息, 可能会遇到如下的错误提示

Error: You should config `CodeSign` and `Profile` in the `ios.config.json`

    We suggest that you open the `platform/ios` directory.

    Package your project as a normal ios project!

最保险的办法是进入platform/ios目录下自己调整WeexDemo.xcworkspace文件打包.