ucar-weex

前言

環境搭建

官網

1. weex-toolkit

2. node

3. weexpack

4. weextools

brew install node

npm install -g weex-toolkit
npm install -g weexpack
npm install -g weextools

腳手架經常使用命令
weextools:

Commands:

    create [name]         initialize a standard weex project
    platform [command]    command for add or remove a  platform project
    run [platform]        run weex app on the specific platform
    build [platform]      build weex app generator package(apk or ipa)
    install [platform]    install weex app to mobile
    plugin [command]      command for add,create,login,publish weex plugins
    weexplugin [command]  create a project that is a manager of plugin
    help [cmd]            display help for [cmd]

項目初始化

weex init demo
weexpack create demo1
weextools create demo2

項目

官方demo:weex-hackernews

解讀

components ——vue組件
views ——視圖
store ——Vuex
mixins——擴展
filters——vue.js 的filter
App.vue 主UI界面
entry.js 入口程序
router.js ——vue-router

2. ucar-weex

WeexProject
  ├── dist
  編譯（js文件）目錄
  |   └── views/index.js
  |   └── package
  |       └── ucar-weex_1_20170910101838.so
  |       └── ucar-weex_1_20170910101838.json
  ├── hooks
  │   └── README.md
  ├── node_modules node依賴包
  ├── package.json node配置文件
  ├── platforms     // 平臺模版目錄
  │   └── android
  │   └── ios
  ├── plugins       // 插件下載目錄
  │   └── README.md
  ├── src           // 業務代碼（we文件）目錄
  │   └── views
  │       └── index.vue
  │       └── pageA.vue
  │   └── assets
  │       └── image/icon_back.png
  │       └── font/icon_font.ttf
  ├── tools
  │   └── android
  │   └── ios
  │   └── packzip.js
  │   └── webpack.config.plugin.js
  └── webpack.config.js //webpack 編譯腳本

2. ucar-weex Android 集成

3. weex集成ucar-weex

• https://www.npmjs.com/package...

npm install ucar-weex --save

1. ucar-weex 基礎api

項目調試

npm run dev
weex debug

打包發佈

1. 第一步

npm run packzip

• ucar-weex_1_20170910101838.json
• ucar-weex_1_20170910101838.so

2. 第二步

npm run copy:android

• .json |.so => android/assets

3. 第三步

• .json |.so => 發佈到服務器

4. 第四步

UWXResManager.getInstance().addWXResFromAssert(this, FileUtils.getWXPackageFileName(this,"weex"));
//        UWXResManager.getInstance().setServerUrl("");
        UWXResManager.getInstance().checkUpdate(new UWXResManager.CheckUpdateCallback() {
            @Override
            public void callback(int code, String msg, WXPackageInfo info) {
                Toast.makeText(WXApplication.this, msg, Toast.LENGTH_LONG).show();
                UWLog.d("WXApp", msg);
                //重啓 提示
            }
        });

其餘

1. 插件市場

2. weexext

3. weex論壇