How to create app with Weex

HXWork

Why do we learn Weex

1. 明确是否可解决原生 app 开发与 H5 开发种种兼容问题。比如最近的 Android 视频播放控制，进度条控制；
2. 作为前端技术的扩展，储备；
3. 明确其稳定性，及是否可运用于具体项目中。

初步搭建 weex app（仅4步）

Weex 官方资料：http://weex.apache.org/cn/guide/index.html

有两种方式创建 weex 项目：
a. 由 weex-toolkit 创建
    sudo cnpm install -g weex-toolkit （安装 weex-toolkit）
    weex init weexDemo （创建项目 weexDeomo）

b. 由 weexpack 创建
    npm install -g weexpack
    weexpack create weexDemo

我们选择了第二种，因为 weexpack 集成了 iOS，Android 等应用模板，快速打包 weex 应用并安装到手机运行。

1. 创建一个 Hello World，Web App(项目名weexDemo)版本
   https://www.npmjs.com/package/weexpack

2. 本地运行 Weex 官方demo weex-hackernews
   https://github.com/weexteam/weex-hackernews
   weex官方demo weex-hackernews代码解读(上)
   weex官方demo weex-hackernews代码解读(下)
   附：同时学习 Vue 进阶: Render 函数, 混合(mixin)等

3. 将Hello World App(weexDemo)，替换成 weex-hackernews
   1）拷贝 weex-hackernews/src 下的文件至 weexDemo/src
   2）删除 weexDemo/src/index.vue, 重命名 entry.js 为 index.js
   3）更改 weexDemo/webpack.config.js 中 entry 的定义

       const webConfig = {
         context: pathTo.join(__dirname, ''),
         // entry: entry,
         entry: {
           'entry': pathTo.resolve('src', 'index.js')
         },
         output: {
           path: pathTo.join(__dirname, 'dist'),
           filename: '[name].web.js',
         },
         ...
       }

   4）增加 .babelrc 文件（解决错误: Unexpected token: punc (() UglifyJs）

       {
         "presets": [
           ["es2015",  {"modules": false}]
         ]
       }

4. 运行上述 Android App
   1）安装 Android 开发环境（可找嘉伟，或 Android Client同学帮忙）
   2）执行命令：

   a. 添加android模版：weexpack platform add android
   b. 打包运行android应用：weexpack run android   
   

5. 运行上述 iOS App

6. 再来学习 Weex
   Weex 手册