需求背景
在uni-app subNVue 原生子窗体开发指南文档中列举了subNVue在开发过程中能解决的很多问题。
但在现实生活中还有几个问题迫切的需要解决。例如:
1、免配置page.json,动态打开subNVue
2、subNVue被关闭后,无法再次打开
3、适用场景非常多,更多玩法等你开发
原理解析
正常的subNVue需要在page.json中配置到对应需要使用subNVue的页面下。但这也制约了我们将subNVue写成通用组件。还有多个页面使用,每个页面都得配的麻烦。
通过阅读Uni-app源码,我们可以看到一种全新被雪藏起来的调用方式,代码位于https://github.com/dcloudio/uni-app/blob/dev/src/platforms/app-plus/helpers/page.js。
const style = {
uniNView: {
// eslint-disable-next-line
path: `${typeof VUE_APP_TEMPLATE_PATH === 'string' ? VUE_APP_TEMPLATE_PATH : ''}/${url}.js`,
defaultFontSize: 16,
viewport: plus_.screen.resolutionWidth
}
}
plus.webview.create('', pageId, style)
当用html5+的create webview方法时,在style里传uniNView字段,则代表这个webview是虚拟的,会使用nvue来渲染。渲染的这个js文件是nvue编译出来的(你也可以理解为将subNVue页面打包成了js,然后交给webview通过NVue去渲染)
使用方法
1、声明subNVue页面,生成uniNView渲染页面的js文件
在page.json中声明subNVue页面,声明之后,uni-app会将nvue页面打包为js, 这个js存放位置就是uniNView path所打开文件的位置
目录结构:
├── components
│ └── sub-nvue
│ └── sub-nvue.nvue
2、打开subNVue
测试工程见附件
