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 虽然已经开源好久了，

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