我的书签
添加书签
移除书签扩展 Web 组件
Vue.js 是一个独立的前端框架，在浏览器中渲染时不需要基于 Weex 容器。因此，针对 Weex 平台扩展 Vue.js 的 Web 端组件，和直接使用 Vue.js 开发一个 Web 组件是一样的。具体的组件编写方法可以参考其官方文档：组件
，另外建议使用 .vue 格式的文件编写组件，使用方法参考：单文件组件。
扩展内置组件
目前我们提供了 weex-vue-render 作为 Vue 2.x Web 端的渲染器。引入该库到项目里，即可使用 weex.registerComponent 来进行内置组件扩展，也可以使用 Vue.component，两者基本上是一致的。
以扩展 <sidebar> 为例，首先应该编写组件自身的逻辑：
1. // sidebar.vue
2.
3.
6.
7. 8.
13. 14.
然后在使用之前，全局注册 <sidebar> 组件：
1. import Vue from 'vue'
2. import weex from 'weex-vue-render'
3. import Sidebar from './path/to/sidebar.vue'
4. weex.init(Vue)
5. // 全局注册 sidebar 组件
6. weex.registerComponent('sidebar', Sidebar)
7. // 或者使用 Vue.component
8. // Vue.component('sidebar', Sidebar)
在扩展 Weex 组件时，如果只使用了 Weex 提供的内置组件，并且使用的都是 Weex 支持的样式，那么就和普通的前端自定义组件无异，不需要 Native 端再有相应的实现。 如果在定制组件时使用了目前 Weex 不支持的标签或样式，还需要在 Android 和 iOS 中有相应的实现，否则会导致渲染异常。
扩展内置模块
引入了 weex-vue-render 这个库之后，在全局能获取到 weex 这个变量，其中提供了 registerModule 方法可以扩展内置模块。
API格式
registerModule
* name: {string} 必选，模块名称
* define: {object} 必选，模块的定义
* meta: {object} 可选，模块元数据。将非 iterable 的属性或方法注册到模块对象里，才需要用到这个参数，将 { registerType: 'assignment' } 作为 meta 参数传入即可
扩展模块示例
下边的代码注册了一个名为 guide 的模块：
1. weex.registerModule('guide', {
2. greeting () {
3. console.log('Hello, nice to meet you. I am your guide.')
4. },
5. farewell () {
6. console.log('Goodbye, I am always at your service.')
7. }
8. })
在 weex 上提供了 require 方法用于获取已注册的模块，直接传递模块名即可：
1. // 获取模块
2. const guide = weex.requireModule('guide')
3. 4. // 可以直接调用模块中的方法
5. guide.greeting()
6. guide.farewell()
上述模块使用方法在 Native 环境中依然有效，只不过模块中的方法是由 Native 提供的。
