BoredApe
BoredApe
  • 发布:2022-05-07 16:50
  • 更新:2022-11-24 23:28
  • 阅读:3249

uni-app subNVue 动态打开原生子窗体指南

分类:uni-app

需求背景

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

测试工程见附件

3 关注 分享
xzh m***@126.com y***@163.com

要回复文章请先登录注册

m***@126.com

m***@126.com

使用Vue2测试工程使用正常,使用Vue3无法打开原生子窗体,点击没有反应。请问Vue3下该怎么动态打开原生子窗体?
2022-11-24 23:28
1***@163.com

1***@163.com

咋通信啊,大佬
2022-07-20 15:26
132liyh

132liyh

回复 蜗牛小弟 :
对,但是也可以设置页面透明,效果和子窗体差不多
2022-05-26 14:47
蜗牛小弟

蜗牛小弟

实践了一天证明,这个跟pages.json里面配置的subnvue不太一样:
1、子窗口只会在页面创建的时候执行一次生命周期
2、动态子窗口,每次打开都会执行一次生命周期
2022-05-25 19:18
蜗牛小弟

蜗牛小弟

刚发现了一个新问题,这个动态子窗体,不是真正意义的子窗体,子窗体是不可以后退的。这个可以。
2022-05-25 16:13
蜗牛小弟

蜗牛小弟

回复 132liyh :
那个是页面跳转,不是子窗体吧。
2022-05-25 16:11
132liyh

132liyh

每个页面都能打开那个页面啊又不是只有一个页面可以用
2022-05-25 14:28
蜗牛小弟

蜗牛小弟

回复 132liyh :
不想单独页面弹窗,是很多页面都需要这个弹窗。所以只能动态
2022-05-25 14:20
132liyh

132liyh

回复 蜗牛小弟 :
你可以用单独的页面作为弹窗呀
2022-05-25 13:56
tmui

tmui

你好,请问在nvue下如何改变窗体背景色,动态更改。
2022-05-25 09:04