Hybrid APP开发实战（三）：uni-app中的nvue
关注公众号前端小白菜，更多前端小干货等着你喔！公众号会不按期分享前端技术，天天进步一点点，与你们相伴成长css
uni-app App端内置了一个基于weex的原生渲染引擎，提供了原生的渲染能力。前端
想用JavaScript开发中原生的组件能力，前端有两种选择weex和react-native，两个框架分别依托于vue与react。weex依托于vue，与uni-app的设计理念一致，故而也是uni-app性能优化上的最优选择。vue
uni-app与本weex的区别在于uni-app本质上仍是运行在webview之上的，说到底仍是网页，而weex提供的是原生的渲染能力，weex实现原理简单点来讲就是将weex组件映射到原生组件上，你写的是view，实际上渲染的安卓或者IOS的容器组件，故而能拥有近乎原生的渲染能力。react
weex原理 web
放一张比较简单的weex的架构图。vuex
图片来源网络typescript
看图说话，不难理解。json
一、WEEX经过前端构建能力将vue文件转换为打包JSBundle文件小程序
二、经过网络或者是内置的方式加载react-native
三、客户端提供js执行引擎，执行JSBundle文件，生成虚拟DOM
四、WEEX渲染引擎针对不一样平台转换为对应的原生组件。
以上只是浅显的理解，但大体描述了WEEX能提供原生渲染能力的缘由。
NVUE正是借用了WEEX的能力来提高uni-app的渲染能力。虽然NVUE能够提供不错的原生的能力，可是同时也有很多限制。
NVUE/WEEX的使用场景
纯NVUE项目，要想得到更好的性能，天然是所有使用NVUE最好，uni-app也提供了纯NVUE的编译模式，内部只提供WEEX渲染引擎，打包出来的APP性能更好，安装包也更小。
提高APP打开速度，混用模式下，推荐首页使用NVUE开发，uni-app提供fast编译模式，能够提高APP的加载以及打开速度。
覆盖原生组件，APP端的导航栏、tabbar、以及一些原生组件（好比VIDEO）没法被覆盖，页面内想要覆盖这些组件就须要用到NVUE。uni-app提供了SUBNVUE功能，SUBNVUE是一个NVUE页面，具备更高的层级，能够覆盖全部组件。
使用原生能力，uni-app虽然提供了众多组件，可是部分组件的部分能力只能在NVUE中使用，好比Input的 confirm-type功能，若是想要定制键盘右下角按钮为“发送”文案，则只能使用NVUE，这个需求在IM即时通信中最为常见。
NVUE/WEEX的限制
WEEX开发有不少限制，主要表如今CSS的限制上，毕竟不是全部的CSS效果都能映射到原生组件上的。好比：
一、只支持flex布局，同时uni-app中默认flex排版方向纵向：flex-direction: column; 开发时须要稍加注意，也能够在 manifest.json 中配置 app-plus.nvue.flex-direction: row 来修改。
二、css只支持类选择器，且不支持嵌套，这意味着你不能写 #app，也不能写.app .main 以及其余更多写法。
三、背景图没法使用。
四、边框阴影支持度不足。
五、不能使用typescript，vue自己对ts的支持就比较弱，但如今已是ts的天下，原生js的书写的代码简直没法维护，本身写的代码，过一个月本身都看不懂，ts绝对是前端开发者心目中的白月光。
六、没法访问Vue.prototype，一个常见的作法是，将vuex示例全局挂载在Vue.prototype上，这样各个组件中均可以很好的使用vuex。
// main.js
import store from "./store";
Vue.prototype.$store = store;
// App.vue
{
methods: {
update() {
this.$store.dispatch('user/update');
}
}
}
七、没法访问全局挂载的组件，相似于Vue.prototype，NVUE中也没法使用全局组件，其缘由在于nvue与vue本质上就不同，甚至是编译环境都不同，二者直接没法直接通信，须要借助uni-app提供的通信机制进行通信。
NVUE的性能提高？
本人NVUE用的很少，性能数据没有实际测试过，纯眼睛测试~貌似看不出太多的不同。可是上面提到的组件覆盖功能，以及原生组件能力仍是须要使用NVUE来实现。 ~~
NVUE开发过程当中其实坑很多，除了某些必须使用NVUE来实现的能力外，若是没有严格的性能追求，不太建议使用NVUE，为了那么点的性能，付出的开发成本可能会更多，此外如今的手机性能都有不错的性能，差距不大的话根本体验不出来。
首页使用NVUE是个不错的选择，毕竟是原生渲染，而首页的渲染速度又关乎着APP的打开速度，APP的打开速度是一个APP的重要衡量标准。原生渲染能力与WEBVIEW的渲染能力越是在性能较差的机器上表现越是明显。
NVUE全局挂在VUEX？
有同窗就要问了，若是我非要在NVUE里面读取全局挂在VUEX实例该怎么办呢？别急仍是有办法的。
uni-app参考小程序实现了globalData能力，这是一种比较简单的全局能力，在NVUE中也可使用，经过这个全局能力，我们就能够实现NVUE读取全局VUEX了。
// main.js
import store from "./store";
Vue.prototype.$store = store;
// App.vue
export default {
globalData: {
$store: null,
},
async onLaunch() {
// 坑逼，getApp() 微信报错，this.$scope h5报错
const _app = this.$scope || getApp();
_app.globalData.$store = this.$store;
}
}
// chat.nvue
export default {
methods: {
send() {
const { $store } = getApp().globalData || this;
$store.dispatch('user/login');
}
}
}
想要挂载其余API能力，能够参考以上写法。若是您有任何想法或疑问能够在下方留言评论探讨。
历史文章阅读
本文首发于本人公众号，前端小白菜，分享与关注前端技术，欢迎关注~~
