一、 为什么要使用nvue
小程序和App的vue页面，主体是webview渲染的。为了提升性能，小程序和App的vue页面下部分ui元素，比如导航栏、tabbar、video、map使用了原生控件（详见: 原生组件使用说明）。这种方式被称为混合渲染。虽然提升了性能，但原生组件带来了其他问题：
- 前端组件无法覆盖原生控件的层级问题。
- 原生组件不能嵌入特殊前端组件(如scroll-view，swiper)。
- 原生控件无法灵活自定义。
- 无法对原生组件设置 CSS 动画
- 无法定义原生组件为 position: fixed；
- 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域。
为了解决webview渲染中原生组件层级最高的限制，uni-app提供了 cover-view 和 cover-image 组件，让其覆盖在原生组件上。App端还提供了2种方案：plus.nativeObj.view、subNVue。此外app-nvue 不涉及层级问题，天然所有组件都是同层渲染。因此有如下方法解决层级覆盖问题:
- cover-view：只能覆盖原生组件，不能覆盖其他原生界面元素。比如cover-view可以覆盖video、map，但无法覆盖原生导航栏、tabbar、web-view。
- plus.nativeObj.view：简称nview，它是一个原生的类画布的控件，其实cover-view也是用plus.nativeObj.view封装的。详见: API文档， 它的api很底层，开发比较复杂；不支持动画；不支持内部滚动。
- subNVue：subNVue是把weex渲染的原生子窗体，覆盖在vue页面上，它解决了plus.nativeObj.view的所有不足，提供了最强大的层级问题解决方案。详见: uni-app subNVue 原生子窗体开发指南
二、nvue不同编译模式介绍
三、nvue页面编译模式差异
四、开发nvue页面
1. 组件标签
- weex编译模式下： 详见weex内置组件
2. css样式
- 只能使用类选择器，并且不能组合嵌套
- 只能使用flex布局，默认全部容器均为 display: flex; flex-direction: column;
- weex编译模式下：使用px单位; uni-app编译模式下：使用upx单位
五、vue与nvue页面通信(见:原生子窗体开发指南 和 页面通讯指南)
六、nvue发送网络请求
注意： 不能使用FlyIO，仅仅能使用自带的 uni.request 方法
created() {
uni.request({
url: '接口地址', //仅为示例，并非真实接口地址。 method:"GET", success: function(res) {
console.log( res ); // 服务器返回的数据 } }); }, 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/209625.html原文链接：https://javaforall.net
