codecamp

Weex 扩展内置组件

目前我们提供了 Vue Render For Apache Weex 作为 Vue 2.x Web 端的渲染器。引入该库到项目里,即可使用 ​weex.registerComponent​ 来进行内置组件扩展,也可以使用 ​Vue.component​,两者基本上是一致的。

Vue Render For Apache Weex 是三方插件, 不由 Apache Weex 开发或维护。

以扩展 ​<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)

在扩展 Weex 组件时,如果只使用了 Weex 提供的内置组件,并且使用的都是 Weex 支持的样式,那么就和普通的前端自定义组件无异,不需要 Native 端再有相应的实现。

如果在定制组件时使用了目前 Weex 不支持的标签或样式,还需要在 Android 和 iOS 中有相应的实现,否则会导致渲染异常。


Weex 扩展 Web 组件
Weex 扩展内置模块
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Weex 调试

Weex 集成Devtool到Android

Weex 集成Devtool到IOS

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }