Weex 擴展內(nèi)置組件

2023-12-28 15:47 更新

目前我們提供了 Vue Render For Apache Weex 作為 Vue 2.x Web 端的渲染器。引入該庫到項目里,即可使用 ?weex.registerComponent? 來進行內(nèi)置組件擴展,也可以使用 ?Vue.component?,兩者基本上是一致的。

Vue Render For Apache Weex 是三方插件, 不由 Apache Weex 開發(fā)或維護。

以擴展 ?<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 提供的內(nèi)置組件,并且使用的都是 Weex 支持的樣式,那么就和普通的前端自定義組件無異,不需要 Native 端再有相應的實現(xiàn)。

如果在定制組件時使用了目前 Weex 不支持的標簽或樣式,還需要在 Android 和 iOS 中有相應的實現(xiàn),否則會導致渲染異常。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號