[TOC] > [wexx 文檔](https://weex.apache.org/zh/docs/styles/common-styles.html#%E7%9B%92%E6%A8%A1%E5%9E%8B) ## 概述 1. 可以提供原生渲染能力 2. 可以使用所有`weex`的內置組件和內置模塊 3. 只有 文件后綴為`.nvue` ,只有 app 端才會編譯 4. nvue 相當于 weex + plus + uni-app api 5. 如果你是web前端，不熟悉 weex，那么建議你仍然以使用 vue 為主 ## 支持的 api * weex API ：使用前需先引入對應模塊，參考：[weex 內置模塊](http://weex-project.io/cn/references/modules/index.html) * uni API：nvue可以使用部分 uni API，詳細支持列表請參照：[nvue 里可使用的 uni-app API](https://uniapp.dcloud.io/use-weex?id=nvue-%e9%87%8c%e5%8f%af%e4%bd%bf%e7%94%a8%e7%9a%84-uni-app-api) * plus API：在自定義組件編譯模式下，nvue里可直接使用plus API ## 調試 nvue 頁面 [參考方法](https://uniapp.dcloud.io/use-weex?id=_3-%e8%b0%83%e8%af%95-nvue-%e9%a1%b5%e9%9d%a2) ## 生命周期 | Vue 生命周期鉤子 | 說明 | | --- | --- | | beforeCreate | 在實例初始化之后，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用 | | created | 在實例創建完成后被立即調用 | | beforeMount | 在掛載開始之前被調用 | | mounted | el 被新創建的 vm.$el 替換時調用 | | beforeUpdate | 數據更新時調用 | | updated | 頁面元素更新后調用 | | beforeDestroy | 實例銷毀之前調用 | | destroyed | 實例銷毀后調用 | | errorCaptured | ## nvue 和 vue 相互通訊 1. 在`nvue`使用`uni.postMessage(data)`發送數據通訊，`data`為`JSON`格式（鍵值對的值僅支持String）。 2. 在`App.vue`里使用`onUniNViewMessage`進行監聽 ## vue 向 nvue 通訊 [參考](https://uniapp.dcloud.io/use-weex?id=vue-%e5%90%91-nvue-%e9%80%9a%e8%ae%af) ## nvue 中使用 weex 第三方庫 ``` npm init -y npm i weex-ui -S ``` 使用 ``` <template> <div> <wxc-cell label="標題" title="Weex Ui" :has-arrow="true" @wxcCellClicked="wxcCellClicked" :has-margin="true"></wxc-cell> </div> </template> <script> import { WxcCell } from 'weex-ui'; export default { components: { WxcCell }, methods: { wxcCellClicked (e) { console.log(e) } } }; </script> ``` ## nvue 里使用 BindingX [BindingX](https://alibaba.github.io/bindingx/) `npm install weex-bindingx --save` ## 注意事項 * nvue 不支持 vue 里的 vuex 目前不支持在 nvue 頁面使用 scss、less 等預編譯語言。 nvue 中不支持使用 import 的方式引入外部 css, `<style src="@/common/test.css"></style>`