最近在看关于跨端开发的技术，出现在视野里较多的关键字React Native、WEEX、Flutter，不论宣传的其他亮点再多，也掩盖不了WEEX一份代码三端运行的光芒，但真正想去入手的时候发现资料还真不多。这里总结下在学习WEEX过程中可能会发出的几个疑问：
如何快速创建一个Weex应用
官方提供了一个手脚架命令行工具weex-toolkit用于创建weex项目
全局安装weex-toolkit
$ npm install -g weex-toolkit
创建一个项目使用create命令,按提示输入创建项目
$ weex create my-project
具体也可参照官方提供的文档快速上手
在WEEX中如何做页面跳转（多页应用）
WEEX中提供了一个内置模块navigator来来实现页面切换。
页面跳转需要分端进行，在h5中url为页面链接，在移动APP中的url则为打包后生成的js bundle文件，已跳转一个详情页为例
h5:
var navigator = weex.requireModule('navigator')
navigator.push({
url: '/detail.html?id=xxxx',
animated: "true"
});
Android or IOS
var navigator = weex.requireModule('navigator')
navigator.push({
url: '/detail.js?id=xxxx',
animated: "true"
});
可以通过weex.config.env.platform变量来获取当前运行的平台，当然在实际项目中这样的跳转方式太麻烦，因为这样我们每个页面切换都需要识别平台。
正确做法可以跟客户端开发的同学商定跳转协议，如客户端拦截到/detail.html时自动去完成detail.js的下载并渲染。
如何使用或扩展一个模块
weex已经内置了部分模块详见weex内置模块
使用方法：
var module = weex.requireModule('模块名')
注册一个模块
如果你引入了 weex-vue-render 这个库，那么在全局能获取到 weex 这个变量，其中提供了 registerModule 方法可以注册模块。
API格式
registerModule
name: {String} 必选，模块名称。
define: {Object} 必选，模块的定义。
meta: {Object} 可选，如果你需要将非 iterable 的属性或方法注册到模块对象里，你才需要用到这个参数，将 { registerType: 'assignment' } 作为 meta 参数传入即可。
下边注册一个名为guide的模块
import Vue from 'vue';
import weex from 'weex-vue-render';
weex.init(Vue);
weex.registerModule('guide', {
greeting () {
console.log('Hello, nice to meet you. I am your guide.')
},
farewell () {
console.log('Goodbye, I am always at your service.')
}
})
使用 guide模块：
// 获取模块
const guide = weex.requireModule('guide')
// 可以直接调用模块中的方法
guide.greeting()
guide.farewell()
当然如果代码是跑在客户端中那么需要客户端同时实现并注册名称参数一样的模块以供调用。
需要说明的是，内置模块是可以重新注册的，也就是覆盖注册，比如内置模块modal中提供了toast方法，但样式不满足实际项目中的视觉需求，因此我们可以重新实现并覆盖。
import Vue from 'vue';
import weex from 'weex-vue-render';
const modal = weex.requireModule('modal')
import toast from '@/components/common/Toast/index'
weex.init(Vue);
weex.registerModule('modal', {
...modal,
toast
})
如何扩展内置组件
以扩展 <sidebar> 为例，首先应该编写组件自身的逻辑：
<!-- sidebar.vue -->
<template>
<div class="sidebar">
<slot></slot>
</div>
</template>
<style scoped>
.sidebar {
/* ... */
}
</style>
<script>
export default {
props: [],
data () {
return {}
}
}
</script>
然后在使用之前，全局注册 <sidebar> 组件：
import Vue from 'vue'
import weex from 'weex-vue-render'
import Sidebar from './path/to/sidebar.vue'
weex.init(Vue)
// 全局注册 sidebar 组件
weex.registerComponent('sidebar', Sidebar)
// 或者使用 Vue.component
Vue.component('sidebar', Sidebar)
附上一个自己写的的包含首页、列表页、详情页|数据请求、页面跳转的简单demo
https://github.com/longyunxia/weex-demo
