nvue可以解决什么问题？
小程序和App的vue页面，主体是webview渲染的。为了提升性能，小程序和App的vue页面下部分ui元素，比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。
虽然提升了性能，但原生组件带来了其他问题：
- 前端组件无法覆盖原生控件的层级问题。
- 原生组件不能嵌入特殊前端组件(如scroll-view，swiper)。
- 原生控件无法灵活自定义。
- 无法对原生组件设置 CSS 动画
- 无法定义原生组件为 position: fixed；
- 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域。
H5、App的nvue页面，不存在混合渲染的情况，它们或者全部是前端渲染、或者全部是原生渲染，不涉及层级问题。
nvue不同编译模式介绍
weex 模式：老模式，使用weex组件，写法同weex标准写法。只能在App端中运行，部分uni-app JS Api不能使用。uni-app 模式：新模式，默认模式，使用uni-app基础组件，组件、jsapi写法同uni-app。支持app.vue里的全局样式；支持nvue页面编译H5和小程序端；可以使用绝大部分uni-app Api。uni-app模式也可以使用weex里的组件，比如list、refresh、recircle-list。
| \ | uni-app 编译模式 | uni-app 编译模式 |
|---|---|---|
| 平台 | 仅 App | 所有端，包含小程序和 H5 |
| 组件 | weex 组件如 div | uni-app 组件如 view |
| 生命周期 | 只支持 weex 生命周期 | 支持所有 uni-app 生命周期 |
| JS API | weex API、uni API、Plus API | weex API、uni API、Plus API |
| 单位 | 750px 是屏幕宽度，wx 是固定像素单位 | 750rpx 是屏幕宽度，px 是固定像素单位 |
| 全局样式 | 手动引入 | app.vue 的样式即为全局样式 |
| 页面滚动 | 必须给页面套或组件 | 默认支持页面滚动 |
开发 nvue 页面
nvue 页面结构同 vue, 由 template、style、script 构成。
-
template： 模板写法、数据绑定同 vue。组件支持 2 种模式，
- weex 组件，同 weex 写法，参考：weex 内置组件 (opens new window)；
- uni-app 组件，同 uni-app 写法。
- App 端 nvue 专用组件，详见uniapp.dcloud.io/component/b…。
-
style：由于采用原生渲染，并非所有浏览器的 css 均支持，布局模型只支持 flex 布局，虽然不会造成某些界面布局无法实现，但写法要注意。详见：样式
-
script：写法同 vue，并支持 3 种 API：
- nvue API ：仅支持 App 端，uni-app 编译模式也可使用。使用前需先引入对应模块，参考：模块引入 API
- uni API：uniapp.dcloud.io/api/README(…
- plus API：仅支持 App 端。www.html5plus.org/doc/h5p.htm…
vue与nvue页面通信
1.在vue文件使用uni.$emit方法去实现要传递的数据
//下面的数据是我在data绑定的数据,写在你需要触发的方法下
console.log("传输中")
uni.$emit('page-send', {
id:_this.id,
title: _this.title,
share: _this.shareHref,
image:_this.shareImg,
})
2.在nvue文件使用uni.$on方法去实现接收数据
//下面的数据是我在vue文件绑定的数据拿到的,写在onLoad事件方法下
uni.$on('page-send', data => {
_this.id = data.id
_this.title = data.title
_this.shareImg = data.image
console.log("监听到了")
// console.log(data)
})
注意:.需要将uni.$on方法写在onLoad方法下，并保证该nvue页面是有被运行到的
nvue发送网络请求
注意：只能使用自带的 uni.request 方法
