Weex 初探

Weex 初探

Weex 介绍

Weex 是阿里于 2016 年开源的一款开发框架，它的介绍是：

Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。

它使用了 Web 技术来开发 Android、IOS 应用，从而达到更快的迭代速度，同时降低了开发原生应用的门槛,

达到生产力和性能共存。

Weex 项目结构

Weex 设计之初是为了和原有应用进行兼容开发，和 NativeScript 不同，它只需要在项目中添加 Weex 的 SDK 即可使用。

它的定位不是全部应用，目标是针对部分变动频繁的应用。它是一种解耦的应用，每个页面相对独立，通过路由的方式对调用各页面，

通过 API 的方式与设备进行交互。所以可以看到官网上 Weex 的结构图：

使用 Weex 构建一个简单的应用

Weex 做一个简单一些的例子还是比较合适的。本文以仿开眼部分功能为例做一小应用。先看下效果图：

项目搭建前准备工作

首先需要准备好 npm 环境、Android 环境，IOS 环境，由于在 mac 下直接安装 xcode 就具备 IOS 环境了，且 npm 是前端必备开发环境的，就无需再安装了。Android 环境的安装可以直接安装 Android Studio，一键配置好环境。

打开控制台，全局安装 weex

npm i -g weex-toolkit weex weex-debugger

创建项目：

weex create weex-kaiyan
cd weex-kaiyan
weex platform add android
weex platform add ios

按照提示操作即可。安装速度都不是很快，需要耐心等候。为了方便开发，我们采用 airbnb 的代码规范，先在 devDependencies 安装相关依赖（或者全局安装eslint，用 eslint 的init 功能也可以）：

"eslint": "^4.13.1",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-vue": "^4.0.0",

在 .eslintrc.js 中添加

extends: ['plugin:vue/recommended', 'airbnb-base'],

在 vscode 中启用 lint 功能：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
],
"eslint.options": {
    "plugins": ["html"]
},

然后准备好要访问的 api （https://github.com/kaikaixue/Eyepetizer/blob/master/app/src/main/java/com/xk/eyepetizer/api），这样做完了准备工作，可以开始开发了。

目录结构大概是这样子：

├── README.md
├── android.config.json
├── configs
│   ├── config.js
│   ├── helper.js
│   ├── logo.png
│   ├── plugin.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.common.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.prod.conf.js
│   └── webpack.test.conf.js
├── ios.config.json
├── npm-shrinkwrap.json
├── package.json
├── platforms
│   ├── android
│   ├── ios
│   └── platforms.json
├── plugins
│   └── plugins.json
├── src
│   ├── api
│   │   └── index.js
│   ├── components
│   │   ├── card-list-scroller.vue
│   │   ├── card-video-no-author.vue
│   │   ├── card-video.vue
│   │   └── tab.vue
│   ├── entry.js
│   ├── index.vue
│   ├── mixin-common.js
│   ├── mixin-preload.js
│   ├── mixin-router.js
│   ├── router.js
│   └── views
│       ├── categories.vue
│       ├── categoryHome.vue
│       ├── home.vue
│       ├── rank.vue
│       └── videoDetail.vue
├── web
│   ├── assets
│   │   ├── preview.css
│   │   └── qrcode.js
│   ├── index.html
│   └── preview.html
└── webpack.config.js

其中 config 文件下是用于放 webpack 打包的配置， src 就是我们的代码目录，platform 里面放 native 代码，

web 文件夹是我们的 web 的 html 模板。

项目配置

要实现三端开发，默认的 weex 项目模板是不行的，它的设计是为 Native 准备的，不考虑单页应用的方式。

虽然不推荐三端同时开发（兼容三端效率会比较低），但为研究怎么实现我们还是做一下。先安装单页应用必备 vue-router

修改 entry.js

然后修改 src/entry.js ，添加手动挂载 vue 的代码，假定我们 src 目录下有个 router.js,

还有一个所有文件用的mixin，修改完成后的代码如下：

import Vue from 'vue';
import weex from 'weex-vue-render';
import App from './index.vue';

import router from './router';
import mixin from './mixin-router';

weex.init(Vue);

Vue.mixin(mixin);

App.el = '#root';
App.router = router;

const app = new Vue(App);

export default app;

在 native 端这个 entry.js 是没用的，native 端是直接使用由 weex 打包生成的 js 文件，

包括挂载都是框架做的，我们不需要处理，所以它只是给 web 使用的。

设置入口

然后设置主入口：build/webpack.common.conf.js中webEntry为固定值：

const webEntry = {
  'index': helper.rootNode(config.entryFilePath)
};

同时注释掉读取文件内容并注入entry中

    // if (extname === '.vue') {
    //     const entryFile = path.join(vueWebTemp, dir, path.basename(file, extname) + '.js');
    //     fs.outputFileSync(path.join(entryFile), getEntryFileContent(entryFile, fullpath));
    //     webEntry[name] = path.join(entryFile) + '?entry=true';
    //   }

添加代理

在 webpack 中添加代理，由于 web 端有跨域问题，我们在 configs/config.js 中添加

proxyTable: {
  '/api': {
    target: 'https://baobab.kaiyanapp.com/',
    changeOrigin: true,
  }
},

编写代码

公用模块

现在开始像正常写 vue 一样开始码代码吧。要先注意的一点是 native 端不支持 vue-router 的特性，

需要使用 navigator 模块进行 push 操作，所以我们需要单独写个模块，通过 mixin 方式进行兼容 页面跳转，

参考 https://www.jianshu.com/p/497f1a9ff33f:

const isWeex = weex.config.env.platform.toLowerCase() !== 'web';
const nav = weex.requireModule('navigator');

export default {
  methods: {
    push(path, option = {}) {
      if (isWeex) {
        const toUrl = weex.config.bundleUrl.split('/').slice(0, -1).join('/') + '/' + path.replace(/^\//, '') + '.js';// 将a.js的绝对地址转为b.js的绝对地址
        nav.push({
          url: toUrl,
          animated: option.animated || 'true',
        });
      } else {
        this.$router.push(path);// 使用vue-router
      }
    },
    pop(option = {}) {
      if (isWeex) {
        nav.pop({
          animated: option.animated || 'true',
        });
      } else {
        window.history.back();
      }
    },
  },
};

这样我们在写跳转时候就可以写成：

this.push('/videoDetail')

同时准备好你需要的 api 库模块（我用的 axios），以及其他公众模块，比如说 storage 。Weex 中的 Storage 模块是为了兼容 web 版本，接口和 web 版本的 LocalStorage 比较类似，只是异步形式。为方便，我们可以将回调式转为 Promise 式：

function callStorage(type) {
  return function callMethod(...args) {
    const storage = this.$storage;
    return new Promise((resolve, reject) => {
      const callback = (e) => {
        if (e && e.result === 'success') {
          resolve(e.data);
        } else {
          reject(e);
        }
      };

      storage[type].call(storage, ...args, callback);
    });
  };
}

class Storage {
  constructor() {
    this.$storage = weex.requireModule('storage');
  }
  setItem = callStorage('setItem')
  getItem = callStorage('getItem')
  removeItem = callStorage('removeItem')
}

然后在 Mixin 中使用它即可。如果你有精力的话，可以设计一个基于 storage 的数据传递模块。

开发页面

开发页面就和写 vue 一样啦，只是要注意一些点：

• Weex 支持的元素类型是有限的，用到哪种需要到官网手册中去查询
• 每个页面是独立，一定要记住这一点，因此 mixin 之类的公用库，需要手动引入到页面中
• css 选择器只支持一级，比如 .classA 不支持 .classA .classB 这种类型，你需要为设置样式的每个元素添加 className，需要防止变量冲突（web 端是单页应用，可能会有问题）

Native 端配置

包括在开发阶段，我们也是需要对 native 端进行效果验证的。Weex 提供了一个简单的命令：

weex run android
weex run ios
npm run dev

如果已经配置了 IOS 环境，直接运行命令就可以了。不过默认的主页是 index.js，

可以在 android.config.json 和 ios.config.json 中分别配置 WeexBundle 选项即可。

需要注意的是，运行状态下默认是打开本地文件的，而运行命令是不会放 views 文件夹目录过去，

需要手动拷贝一下。安卓下面由于访问本地文件的接口在 7.0 下有问题，

建议在 app_config.xml 中修改 launch_locally 为 false, 并指定好远程地址。

调试没问题后，我们按照 Android 和 IOS 各自的方案进行打包即可.

总结

由于自己对 Native 开发了解得不多，所以好多东西一知半解，而且 Weex 的包总能发现各种小问题，

需要强大的耐心去解决或者规避这些问题，只能祝使用的人好运吧。新出的 weex-ui 虽然已经开源好久了，

有时间可以尝试下，不过由于核心模块没有开源，好多组件不能使用，先观望一段时间，等有好的点子再试试。