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 <foo/bar/we_file_or_dir_path>  [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 <command> 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>    add/remove ios/android platform
  plugin <add|remove> <pluginName>       add/remove weexplugin
  run <ios|android>                      build your ios/android app and run

  weex <command> --help      help on <command>

开发

初始化

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 的开发文档。

代码如下所示：

<template>
  <div class="wrapper" @click="update">
    <image :src="logoUrl" class="logo"></image>
    <text class="title">Hello {{target}}</text>
  </div>
</template>

<style>
  .wrapper { align-items: center; margin-top: 120px; }
  .title { font-size: 48px; }
  .logo { width: 360px; height: 82px; }
</style>

<script>
  export default {
    data: {
      logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
      target: 'ltryee'
    },
    methods: {
      update: function (e) {
        this.target = 'Weex'
        console.log('target:', this.target)
      }
    }
  }
</script>

打包

使用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