weex for iOS 开发流程

安装开发环境

Nodejs

使用brew安装

$ brew install node

下载dmg安装

https://nodejs.org/en/

安装完成后，可以使用以下命令检测是否安装成功：

$ node -v
v6.3.1
$ npm -v
3.10.3

npm

npm是 JavaScript 的包管理器，它可以让开发者轻松共享和重用代码。

weex

使用npm安装weex-toolkit：

$ sudo npm install -g weex-toolkit
$ weex -v
v1.0.4
- weex-builder : v0.2.6
- weex-previewer : v1.3.7

安装结束后可以直接使用 weex 命令验证是否安装成功，它会显示 weex 命令行工具各参数：

$ weex

Usage: weex   [options]

选项：
  --port    http listening port number ,default is 8081           [默认值: 8081]
  --wsport  websocket listening port number ,default is 8082      [默认值: 8082]
  --entry   the entry file in a folder


where  is one of:

  init                                   create a vue project
  debug                                  start weex debugger
  compile                                compile we/vue file
  create                                 create a weexpack project
  platform      add/remove ios/android platform
  plugin         add/remove weexplugin
  run                       build your ios/android app and run

  weex  --help      help on 

开发

初始化

1. 初始化 weex 项目：

   $ weex init hello-weex
   

2. 安装项目依赖：

   $ npm install
   

3. 运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。

4. 打开浏览器，进入 http://localhost:8080 即可看到 weex h5 页面。

编写代码

初始化时已经为我们创建了基本的示例，我们可以在 src/foo.vue 中查看。这是我们编写业务逻辑最重要的一个文件。关于 Weex 语法部分，可以直接参考 Vue.js 的开发文档。

代码如下所示：

打包

使用webpack打包：初始化工程时weex已经替我们创建了webpack的配置文件webpack.config.js，直接运行webpack即可打包。

$ webpack

Hash: 575652f0448ae5787cdc28013bc84276b8ea1e7f
Version: webpack 1.14.0
Child
    Hash: 575652f0448ae5787cdc
    Version: webpack 1.14.0
    Time: 1102ms
         Asset     Size  Chunks             Chunk Names
    app.web.js  15.4 kB       0  [emitted]  app
        + 10 hidden modules
Child
    Hash: 28013bc84276b8ea1e7f
    Version: webpack 1.14.0
    Time: 1088ms
          Asset     Size  Chunks             Chunk Names
    app.weex.js  4.43 kB       0  [emitted]  app
        + 5 hidden modules

打包完成之后会在dist目录下生成两个文件，其中app.weex.js即为下发给终端的JS bundle。

$ ll dist
total 48
-rw-r--r--  1 vectorliu  staff    15K  4  1 15:58 app.web.js
-rw-r--r--  1 vectorliu  staff   4.3K  4  1 15:58 app.weex.js