[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>`