ZGH0709
ZGH0709
  • 发布:2019-05-23 20:22
  • 更新:17 小时前
  • 阅读:14113

uni-app subNVue 原生子窗体开发指南

分类:uni-app

此功能需要 HBuilderX 版本 1.9.10+, 需要使用自定义组件模式,关于编译模式差异详见文章

需求背景

在我们的开发中,经常会遇到各种层级覆盖和原生界面自定义的问题:

  • 原生导航栏渐变背景色、灵活自定义内容
  • 覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏,比如 popup盖不住tabbar
  • 弹出层内部元素可滚动,
  • 在地图、视频等组件上的添加复杂覆盖组件:比如直播视频上覆盖滚动的聊天记录。

在小程序中只能用 cover-view 来解决。App中,开发者希望有更强的解决方案。
过去在App端有很多问题:

  1. cover-view 不支持嵌套、只能在 videomap 上使用、样式和控件少;
  2. plus.nativeObj.view 虽然更灵活,但易用性比较差、没有动画、不支持内部内容滚动。

既然uni-app已经支持 nvue 的原生渲染,我们何不做一个subNVue,来替代 cover-view,实现更强的功能?

顾名思义,subNVuevue 页面的子窗体,它不是全屏页面,就是用于解决 vue 页面中的层级覆盖和原生界面自定义用的。它也不是组件,就是一个原生子窗体

在新版的hello uni-app里,接口-界面-原生子窗体新增了subNVue 示例。包括了4个 subNVue 示例:

  • 顶部原生的渐变背景色导航栏
  • 侧滑菜单,可以盖住原生视频
  • 弹出一个原生的 popup,并且内部内容可滚动
  • 视频上覆盖一个滚动聊天记录

有了 subNVue,插件市场的一些插件就没有意义了,比如这个原生增强提示框插件,完全可以用 subNVue 替代,免去原生插件打包的麻烦。

在通信方面: subNVue 页面可以和 vue 页面进行通信,来告知 vue 页面用户执行的操作。或者通过 vue 页面对 subNVue 进行数据和状态的更新。 subNVue 除了与 vue 页面进行通信,还 可以与 nvue 页面进行通信

使用 subNVue 子窗体的页面结构

我们建议 subNVue 子窗体与引用该子窗体的vue页面放在同一目录下,新建 subNVue 目录包含这些 subNVue 子窗体,例如:

|-- pages  
    |-- index               // index 目录  
    |   |-- subNVue         // subNVue 目录  
    |       |-- nav.nvue    // 自定义导航栏  
    |       |-- popup.nvue  // 弹出层子窗体  
    |-- index.vue           // index 页面

当然你也可以提供公共的 subNVue 子窗体,供多个 vue 页面引用,此时我们建议放在 最外层与 pages 文件同级的 paltform\app-plus\subNVue 下。(只是建议,不是约束。不管放哪里,只要 pages.json 里引用了,都会编译到App端)

使用 subNVue 子窗体的 pages.json 配置

pages.json 中,新增了 subNVues 节点, 与 titleNView 在同一级别。支持配置 subNVue 子窗体的相关属性。配置结构如下:

subNVues:

  • id: [String], 全局唯一,不能重复
  • path: [String], subNVue 子窗体的路径。
  • type: [String], 内置的特殊子窗体类型,弹出(popup)和导航(navigationBar)。
  • style: [Object], 配置子窗体的位置,背景等样式属性。

代码示例:

{  
    "pages": [{  
        "path": "pages/index/index", //首页  
        "style": {  
            "app-plus": {  
                "subNVues":[{  
                    "id": "concat", // 唯一标识  
                    "path": "pages/index/subnvue/concat", // 页面路径  
                    /*"type": "popup",  这里不需要*/  
                    "style": {  
                        "position": "absolute",  
                        "dock": "right",  
                        "width": "100upx",  
                        "height": "150upx",  
                        "background": "transparent"  
                    }  
                }]  
            }  
        }  
    }]  
}

关于 subNVue 更多详细的配置见: 完整配置

注意事项:

  • id 属性是全局唯一的,
  • path 路径只能是 nuve 页面路径
  • type 属性目前只有导航栏 (navigationBar) 和弹出层 (popup) 类型,且级别最高,一旦设置 typenavigationBarpopuppositiondock 的值都会被忽略。
  • position 为原生子窗体的定位方式。
  • dock 表示原生子窗体的停靠位置,只有当 position 值为 dock 时才生效,如 top, bottom,right, left 等。
  • 在配置中可以使用 upx 单位,方便你进行响应式布局。

subNVue 子窗体书写

subNVue 子窗体引用的是 nvue 页面。所以只需要书写 nvue 页面。

需要注意的是,nvuevue 页面的开发注意事项。两者开发起来还是有一些区别,目前我们正在优化 nuve,在之后会逐渐抹平 nvuevue 的开发体验。

相关参考

怎么在页面中使用 subNVue 子窗体

pages.json 中增加完配置,也写好了 subNVue 子窗体,接下来就是在 vue/nvue 页面中使用了。 在 vuenvue 页面中使用方式是一样的,这里以 vue 页面为例进行说明:

在页面中打开和关闭 subNVue 子窗体

// 通过 id 获取 nvue 子窗体  
const subNVue = uni.getSubNVueById('map_widget')  
// 打开 nvue 子窗体  
subNVue.show('slide-in-left', 300, function(){  
    // 打开后进行一些操作...  
    //   
});  
// 关闭 nvue 子窗体  
subNVue.hide('fade-out', 300)

动态修改 subNVue 子窗体位置,大小

subNVue.setStyle({  
    top: '100px',  
    left: '20px',  
    width: '100px',  
    height = '50px',  
})

subNVue 子窗体与 vue/nvue 页面通信

无论是页面与页面,子窗体与子窗体之间,如果没有了彼此之间的通信,都只是孤立的散件而已。 nvue 子窗体与使用子窗体的 vue/nvue 页面之间,可以互相发送和传递消息,进而实现彼此之间的互相更新和表现协调。 在 vuenvue 中进行通信的方式一致,这里仍然以 vue 页面为例:

推荐使用页面通讯完成与子窗体通讯(新增)

关于页面通讯的内容详见: 页面通讯指南

通讯实现方式

// 在 subNVue/vue 页面注册事件监听方法  
// $on(eventName, callback)  
uni.$on('page-popup', (data) => {  
    vm.title = data.title;  
    vm.content = data.content;  
})  

// 在 subNVue/vue 页面触发事件  
// $emit(eventName, data)  
uni.$emit('page-popup', {  
    title: '我是一个title',  
    content: '我试data content'  
});

使用页面通讯时注意事项: 要在页面卸载前,使用 uni.$off 移除事件监听器。

旧的通讯方式(推荐上述使用页面通讯机制)

vue 页面中监听 subNVue 子窗体的消息和向 subNVue 子窗体传递消息

// 获取要通信的 subNVue 子窗体  
const subNVue = uni.getSubNVueById('map_widget')  

// vue 向 subNVue 子窗体发送消息  
//  postMessage(<Object>)  
subNVue.postMessage({  
    type: 'message',  
    title: '我是来自 vue 页面的消息',  
    content: 'Hello, map_widget'  
});  

// vue 监听 subNVue 子窗体传递的消息  
subNVue.onMessage((res) => {  
    const data = res.data;  
    // 执行一些操作  
});

subNVue 子窗体监听 vue 页面的消息和向 vue 页面发送消息

// 获取当前 subNVue 子窗体  
// 可以使用 getSubNVueById 查找的方式,但推荐使用下面的方式  
const subNVue = uni.getCurrentSubNVue();  

// subNVue 子窗体向 vue 页面发送消息  
//  postMessage(<Object>)  
subNVue.postMessage({  
    type: 'message',  
    title: '我是来自 subNVue 子窗体的消息',  
    content: 'Hello, map_widget'  
});  

// subNVue 子窗体监听 vue 页面传递的消息  
subNVue.onMessage((res) => {  
    const data = res.data;  
    // 执行一些操作  
});

总结

基本的使用方式和场景已经介绍完了, 对于使用 subNVue 在更多的应用场景中去实现更多的功能,就需要大家去不断的尝试和创新了。

当然如果一些简单的需求,如果 cover-view 已经能搞定,那也没必要使用subNVue,毕竟能跨端,内存占用也更低。

强大的东西往往也意味着消耗更多内存,为了保证更好的性能体验,一个vue页面不要加载太多 subNVue 子窗体,建议控制在三个以内。

注意事项
在使用 subNVue 子窗体的页面中,同时满足下面两种情形时:

  • 页面包含 map, video 之类的原生组件

  • 页面使用了 type 为 navigationBar 的 subNVue 子窗体

原生组件可能会出现错位的问题,目前可以使用以下方法进行解决:

  • 将此类元素放在页面的 onReady 中进行渲染。
  • 采用延时的策略,保证元素在页面渲染后,再去定位位置。
6 关注 分享
DCloud_UNI_HT ilijiayin asdadad啊的 646729200@qq.com 289772676@qq.com 1063870911@qq.com

要回复文章请先登录注册

2303276504@qq.com

2303276504@qq.com

回复 XLL:
我也想问。。。好像监听不到。。。。好烦
17 小时前
晴空里的雨滴

晴空里的雨滴

子窗体可以设置圆角吗,设置无效呢
20 小时前
307594386@qq.com

307594386@qq.com

回复 1172106013@qq.com:
好的 谢谢
1 天前
Doray

Doray

回复 597392321@qq.com:
我的和你的一样 咋解决
4 天前
421514227@qq.com

421514227@qq.com

根本就覆盖不了,tabbar
4 天前
1172106013@qq.com

1172106013@qq.com

回复 307594386@qq.com:
设置窗体是在pages.json的 subNVues节点下。监听是放在nvue页面的加载方法中(我是放到created()中)
2019-10-07 13:59
307594386@qq.com

307594386@qq.com

回复 DCloud_heavensoft:
可以监听subnvues的遮罩层点击吗 点击遮罩不关闭可以吗
2019-09-29 21:38
307594386@qq.com

307594386@qq.com

回复 1172106013@qq.com:
这写在哪 我的窗体不是全屏的 我点击的遮罩层 你这个貌似只是把遮罩层挡住了
2019-09-29 21:36
1172106013@qq.com

1172106013@qq.com

回复 307594386@qq.com:
设置窗体"width": "100%", "height": "100%", "background": "transparent"。页面再监听返回按钮plus.key.addEventListener('backbutton',function() {
console.log("返回")
},false);就可以了
2019-09-25 09:15
1316438321@qq.com

1316438321@qq.com

窗体外的内容默认了``` overflow:hidden ```吗?,想做一个凸起的tabbar搞一半发现无解了
2019-09-24 15:15
小明子

小明子

很好
2019-09-19 17:26
307594386@qq.com

307594386@qq.com

回复 951993319@qq.com:
暂时没有找到解决办法 点遮罩层就关闭这个子窗体了
2019-09-18 17:23
951993319@qq.com

951993319@qq.com

回复 307594386@qq.com:
同问,你解决了吗?
2019-09-17 16:41
307594386@qq.com

307594386@qq.com

回复 ZGH0709:
subnvues 这个的遮罩层可以监听吗 我不想要点击遮罩关闭,我要这个一直显示 我手动关闭
2019-09-10 14:02
熊大等等我

熊大等等我

在APP下,一个页面A中增加了子窗体后,在子窗体中跳转页面到B中,在点击屏幕左上返回时,会先弹出一下子窗体,然后在点击一下返回才能返回到页面A,请问如果这种场景怎么实现?
2019-09-08 11:57
露珠

露珠

回复 375890534@qq.com:
应该不可以直接做,应该可以通过给子窗体设置最外层背景为透明,里面嵌套的设置成圆角来实现
2019-09-06 15:14
露珠

露珠

回复 dongxs@hisen.com:
同问,你的这个问题解决了吗?
2019-09-06 14:52
1138672634@qq.com

1138672634@qq.com

回复 469939029@qq.com:
老哥 这个问题解决了吗?我也遇到了同样的需求
2019-08-29 14:59
1138672634@qq.com

1138672634@qq.com

回复 469939029@qq.com:
老哥 这个问题后面解决了吗?我也有这个需求。。。
2019-08-29 14:58
米老茨

米老茨

nvue下 无法覆盖全屏后的视频
2019-08-28 09:59
6931541@qq.com

6931541@qq.com

如何遮挡住tabbar
2019-08-25 17:11
jpz966906738@outlook.com

jpz966906738@outlook.com

可以覆在video上,但是无法覆盖在webview上,白忙一场。。。
2019-08-23 21:34
rootOfEchord

rootOfEchord

在第一个tabBar页面注册类型为popup 的nvue子窗体, 在app首页(一个非tabBar页面) 通过switchTab 或reLaunch跳转到第一个tabBar页面 popup 打开后点击蒙层无法关闭, 请问有遇到相同问题的大佬吗?
2019-08-23 14:42
1052036428@qq.com

1052036428@qq.com

回复 心安:
我也遇到这个问题,请问您解决了吗
2019-08-23 09:57
迪丽热bug

迪丽热bug

uni.getSubNVueById is not a function
2019-08-21 09:51
1145331145@qq.com

1145331145@qq.com

我想问问为什么我path路径配好之后弹出框弹出的还是空白一片

"app-plus": {
"subNVues": [{
"id": "concat", // 唯一标识
"path": "pages/index/subnvue/concat", // 页面路径
"type": "popup",
"style": {
"position": "static",
"width": "100%",
"height": "100%",
// "zindex": 900
}
}]
// "titleNView": false,
// "bounce": "none"
}
2019-08-20 16:34
XLL

XLL

在页面中怎么监听子窗口关闭了?
2019-08-16 10:18
DCloud_heavensoft

DCloud_heavensoft

回复 小白鼠:
只有app里有
2019-07-31 13:40
小白鼠

小白鼠

在新版的hello uni-app里,接口-界面-原生子窗体新增了subNVue 示例?没找到
2019-07-31 13:19
597392321@qq.com

597392321@qq.com

回复 DCloud_heavensoft:
您好,我设置了subNVues,但是一进入页面就显示出来了,是需要在onLoad里面先隐藏一下吗
2019-07-30 09:46
心安

心安

回复 dongxs@hisen.com:
请问迩的问题解决了吗?点击蒙版不使其隐藏。
2019-07-29 10:07
sewenfengqing@163.com

sewenfengqing@163.com

回复 tmkook2:
我也是获取不到,你现在只掉是什么原因了吗?
2019-07-26 11:20
dongxs@hisen.com

dongxs@hisen.com

回复 2723095144@qq.com:
不是蒙版,而是在subNVue内部,比如有两个view,其中一个view需要一个半透明的背景
2019-07-23 17:10
2723095144@qq.com

2723095144@qq.com

回复 2723095144@qq.com:
说说我的解决方案,我要的效果是背景透明水平,和垂直滑动,如果是在pages里面的SubNvues里的样式里设置了
"mask": "rgba(0,0,0,0.5)",这样是无法滚动的,改成"background": "rgba(0,0,0,0.1)"就OK了
2019-07-23 11:48
2723095144@qq.com

2723095144@qq.com

subNVue 子窗体 里面的内容无法滚动?我的天坑好的,这个就是开发出来折磨程序员的
2019-07-23 10:00
741407088@qq.com

741407088@qq.com

打开原生子窗体之后 点击蒙层怎么去关闭子窗体啊 怎么去给蒙层添加点击事件
2019-07-22 19:09
2723095144@qq.com

2723095144@qq.com

回复 dongxs@hisen.com:
"subNVues":[{

"id": "home_tools",

"path": "pages/index/subNVue/home_tools",

"type": "popup",

"style": {

"position": "dock",

"dock": "bottom",

"mask": "rgba(0,0,0,0.5)"
2019-07-22 18:01
dongxs@hisen.com

dongxs@hisen.com

能不能设置在subNVue中点击蒙版不隐藏subNVue呢?
还有subNVue的背景不能设置半透明吗?css里设置background-color:rgba(0, 0, 0, 0.5) 没效果
2019-07-19 16:31
随便一个名字

随便一个名字

回复 随便一个名字:
然后我是用subNVue的弹出层。我只要点击蒙板,subnvue就自己调用hide方法,我也不能在hide方法里面进行重新赋值,进行初始化。如果可以自己选择何时调用hide的话,我就可以在hide前将data里的数据重新赋值初始化
2019-07-05 11:16
随便一个名字

随便一个名字

subNVue当引入它的vue页面加载时,它就初始化,然后可以通过show和hide控制它显示和隐藏。然后重新show显示的话,以前操作改变的subNVue的数据还是在!那如果我需要它隐藏的时候就初始化subNVue里面的初始数据,该怎么办啊?
2019-07-05 09:28
469939029@qq.com

469939029@qq.com

subNVue在type!==popup的情况下如何遮盖tabbar?或者type==popup的时候如何将触摸事件像父窗体传递?
2019-06-28 16:04
1606726660@qq.com

1606726660@qq.com

回复 ZGH0709:
说错了 是body滚动
2019-06-27 10:06
ZGH0709

ZGH0709 (作者)

回复 1606726660@qq.com:
使用 scroller 或者 list 组件,可以参考 hello uni-app 中的示例
2019-06-26 19:41
1606726660@qq.com

1606726660@qq.com

subNVue 子窗体 里面的内容无法滚动 这是专门这么设计的还是 我姿势不对?
2019-06-25 17:48
倒影

倒影

动态修改 subNVue 子窗体位置大小的时候,如果加过渡效果呢
2019-06-20 18:19
393747897@qq.com

393747897@qq.com

回复 393747897@qq.com:
是页面其他因素影响的,换了个新页面,ok了。暂时没找到具体原因,打扰了。
2019-06-18 11:38
393747897@qq.com

393747897@qq.com

uni-app subNVue 原生子窗体开发中,我集成到我的demo页面,发现点击遮罩层,没有响应隐藏这个原生子窗体。好尴尬了,有知道原因的么?背后遮罩层的点击隐藏方法失效了。是有什么需要注意的地方么?
2019-06-18 10:15
1048773612@qq.com

1048773612@qq.com

回复 W小姐:
好吧,白忙活一天了
2019-06-17 19:23
W小姐

W小姐

回复 1048773612@qq.com:
是的,亲测
2019-06-17 17:27
1048773612@qq.com

1048773612@qq.com

请问这个是不是需要自定义组件编译方式才能用的??
2019-06-17 16:41
ZGH0709

ZGH0709 (作者)

回复 tmkook2:
打印下取到的结果,如果是null检查id是否一致,如果方法 undefined 升级下编辑器版本。
2019-06-14 17:37
ZGH0709

ZGH0709 (作者)

回复 W小姐:
测试是正常的,建议新建 hello-uniapp ,打开 接口->界面->原生子窗体 看是否正正常。
2019-06-14 17:19
W小姐

W小姐

回复 ZGH0709:
依然不行
2019-06-14 16:43
ZGH0709

ZGH0709 (作者)

回复 W小姐:
正式版升级到最新 2.0.1 试一下
2019-06-14 16:29
W小姐

W小姐

回复 ZGH0709:
同一套代码,在alpha中运行完美,在正式版2.0.0中,报错
2019-06-14 16:12
ZGH0709

ZGH0709 (作者)

回复 W小姐:
检查是否在 pages.json 中正确配置,是否正确引用 id?可以对照 hello-uniapp 上的示例检查代码。
2019-06-14 16:10
tmkook2

tmkook2

写了个index测试页面 uni.getSubNVueById('home_tools'); 获取不到NVue 是什么情况?

{
"path": "pages/index/index",
"style" : {
"app-plus": {
"titleNView": false,
"subNVues":[{
"id": "home_tools",
"path": "pages/index/subNVue/home_tools",
"type": "popup",
"style": {
"position": "dock",
"dock": "bottom",
"mask": "rgba(0,0,0,0.5)"
}
}]
}
}
}
2019-06-13 15:57
W小姐

W小姐

在2.0.0.20190610中uni.getSubNVueById为undefined
2019-06-13 14:55
375890534@qq.com

375890534@qq.com

回复 375890534@qq.com:
可以的,是我的锅,,
2019-06-02 20:16
375890534@qq.com

375890534@qq.com

子窗体支持import其他nvue组件吗?现在需要做一个picker-view,发现没法做,提示:

20:11:28.480 [JS Framework] Failed to invoke the event handler of "touchmove" on div (519):
20:11:28.480 TypeError: this.preventDefault is not a function. (In 'this.preventDefault(e)', 'this.preventDefault' is undefined)

touchmove是被import的nvue组件。
2019-06-02 20:12
375890534@qq.com

375890534@qq.com

这个窗体是不是没法圆角啦?
2019-06-02 18:13
ZGH0709

ZGH0709 (作者)

回复 倒影:
已修改
2019-06-01 19:06
ZGH0709

ZGH0709 (作者)

回复 597392321@qq.com:
1.9.10 是 alpha 版, 可以在官网进行下载,关于编辑器版本差异见: https://ask.dcloud.net.cn/article/35765
2019-06-01 19:05
ZGH0709

ZGH0709 (作者)

回复 xdhgjdsjdcgrdh:
1.9.10 是 alpha 版, 可以在官网进行下载,关于编辑器版本差异见: https://ask.dcloud.net.cn/article/35765
2019-06-01 19:05
倒影

倒影

uni.getsubNVueById('map_widget') 大小写错了,应该是getSubNVueById
2019-06-01 18:59
倒影

倒影

uni.getsubNVueById('map_widget')
2019-06-01 18:59
597392321@qq.com

597392321@qq.com

回复 ZGH0709:
最新版不是才1.9.9.20190522吗
2019-06-01 09:11
281302552@qq.com

281302552@qq.com

不支持下载的监听吗?downloadTask.onProgressUpdate,直接报错:undefined is not an object (evaluating 'downloadTask.onProgressUpdate')。放在vue页面就没问题,nvue的子窗体就不行。代码用的官方文档里的demo
2019-05-31 21:40
xdhgjdsjdcgrdh

xdhgjdsjdcgrdh

真机运行一直报错,调试了半天才发现是α版的功能(
2019-05-31 10:32
rfr@163.com

rfr@163.com

回复 DCloud_heavensoft:
这就麻烦了,因为有功能需要APP的onshow来触发,这不是每个页面都写一遍吗……
2019-05-30 20:44
ZGH0709

ZGH0709 (作者)

回复 W小姐:
该功能需要 HBuilderX 版本 1.9.10+, 如果版本没问题,打印一下 subNVue 看看是否有值,检查下 id 是否与注册 id 一致。
2019-05-30 14:23
W小姐

W小姐

提示subNVue.onMessage is not a function,怎么回事?
2019-05-30 14:06
DCloud_heavensoft

DCloud_heavensoft

回复 642488023@qq.com:
可以这样啊,但好像区别不是太大。写一个页面,其实也就是写那个列表
2019-05-30 00:44
DCloud_heavensoft

DCloud_heavensoft

回复 rfr@163.com:
页面那个nvue文件,可以随便找个公共目录放。至于pages.json的配置,要引用的页面都要配置
2019-05-30 00:43
DCloud_heavensoft

DCloud_heavensoft

回复 张珏敏:
1.9.10是alpha版,也可以在官网下载
2019-05-30 00:42
rfr@163.com

rfr@163.com

一个nvue子窗体如何供全局调用,比如像uni.modal这样,所有页面都需要调用,不能每个页面都写一遍把。
2019-05-29 22:28
642488023@qq.com

642488023@qq.com

是否就意味着可以在vue页面嵌入nvue了,比如吐槽最多的swiper组件可以直接拿nvue来写,其他地方用vue来写,不用专门为了swiper左右滑动的性能而去专门写一个整个的Nvue页面了,如果是的话,这个是真的解决了一大痛点啊
2019-05-28 09:08
张珏敏

张珏敏

看了半天,写了半天,原来最新版本是 1.9.9, 1.9.10还没有更新
2019-05-25 11:48
1606726660@qq.com

1606726660@qq.com

回复 DCloud_heavensoft:
ok拉,谢谢了,能在这和官方大哥一对一提问,真好
2019-05-24 17:46
DCloud_heavensoft

DCloud_heavensoft

回复 1606726660@qq.com:
对。因为框架底层用了weex里的v8做了js进程分离,优化了js的单线程阻塞问题
2019-05-24 17:44
DCloud_heavensoft

DCloud_heavensoft

回复 1606726660@qq.com:
你的setstyle范围太大了,建议对titleNView或一些子项目设置
2019-05-24 17:35
1606726660@qq.com

1606726660@qq.com

回复 DCloud_heavensoft:
那意思就是在自定义组件开发模式下不管有没有用nvue文件都会打包weex引擎进去?
2019-05-24 17:34
DCloud_heavensoft

DCloud_heavensoft

回复 1606726660@qq.com:
这写的很清楚,非自定义组件如果没有nvue文件,是不会打包weex引擎进去的,动态添加nvue文件后无法动态添加weex引擎
2019-05-24 17:32
1606726660@qq.com

1606726660@qq.com

回复 DCloud_heavensoft:
不支持的情况
SDK 部分有调整,比如新增了 Maps 模块等,不可通过此方式升级,必须通过整包的方式升级。
如果是老的非自定义组件编译模式,之前没有 nvue 文件,但更新中新增了 nvue 文件,不能使用此方式。因为nvue组件的解析需要原生层增加模块。
原生插件的增改,同样不能使用此方式。

厉害了我的官方,那我还是用代码试试吧
2019-05-24 17:29
1606726660@qq.com

1606726660@qq.com

回复 DCloud_heavensoft:
/**
* @param {Object} style
* @param {Object} page
* 合并原生的样式
*/
mergeOptions(style,page){
if(this.config.device !== 'Apple'){ //安卓手机
let p_options=page.getStyle();
return Object.assign({},p_options,style,{position:'dock',bottom:this.config.height});
}
return style;
}
/**
* 重新原生的setStyle 因为在安卓会出你意想不到的问题,贼难受
*/
setStyle(style,page){
let options=this.mergeOptions(style,page);
page.setStyle(options);
}
2019-05-24 17:26
DCloud_heavensoft

DCloud_heavensoft

回复 1606726660@qq.com:
可以热更新。vue也好,nvue也好,都是dsl,编译后其实都是js。
2019-05-24 17:23
DCloud_heavensoft

DCloud_heavensoft

回复 1606726660@qq.com:
先getStyle,拿到json,修改其中一个值,然后在setStyle这个json进去,参考:http://ask.dcloud.net.cn/article/35374
2019-05-24 17:18
1606726660@qq.com

1606726660@qq.com

我来说下setStyle这个方法真的是厉害,每次都会覆盖之前的样式,为啥不写一个检察样式是否存在?覆盖添加的方式多好?其次就是使用nvue是否能用热更呢
2019-05-23 21:05