文章目录

一、前言二、问题分析三、解决方案3.1 nvue 页面替代 vue 页面3.2 白屏检测刷新3.2.1 自动刷新3.2.2 手动刷新

3.3 总结

四、拓展阅读

一、前言

应用uni-app框架开发好APP上架使用过程中,发现应用经过长时间由后台切换至前台时,通过webview方式嵌套的H5页面发生白屏现象。

二、问题分析

任何手机设备上,当手机内存不足时,os都会回收资源。一般是先回收后台打开的资源。如果当前应用占用的资源过高,当前应用也有可能崩溃。尤其是在调用摄像头点击拍照时,手机内存占用会达到一个峰值,此时较容易出问题。

有关内存管理,详参博文《安全生产:内存溢出和内存泄漏》。

在iOS上,当内存不足时,根据uiwebview和wkwebview的不同,它自身有不同的回收策略。

如果是uiwebview的app(常见于5+app),内存不足时整个app会崩溃,即闪退。

如果是wkwebview的app(uni-app和wap2app在iOS上默认就是wkwebview),内存不足时,单个wkwebview会崩溃。也就是所谓的应用还在,而页面白屏。

这个问题在所有使用wkwebview的应用都会出现,比如微信的公众号网页里也存在。在微信小程序里,它做了一个自动恢复手段,可以让jscore存储数据状态,崩溃的wkwebview自动恢复。所以在遇到问题时,会白一下然后恢复渲染。

三、解决方案

uni-app因为引入了独立的jscore处理数据状态,jscore不会崩溃,所以官方采用了和微信小程序一致的策略,补充自动的白屏恢复能力。亲测使用 HBuilder 3.6.4.20220922 并无白屏自动恢复功能,怀疑是HBuilder版本问题! uni-app中也可以使用nvue来避免这个问题,nvue页面不会出现内存不足引发的白屏崩溃。

3.1 nvue 页面替代 vue 页面

nvue文件webview使用方式如下:

//nvue 中的webview需要自行设置宽高否则无法展示

h5页面内容如下:

本地网页

web-view 组件加载本地 html 示例,仅在 App 环境下生效。点击下列按钮,跳转至其它页面。

网页向应用发送消息。注意:小程序端应用会在此页面后退时接收到消息。

注意⚠️:uni-app 中的 nvue 页面问题 nvue 页面不使用 webview 渲染,但其中的web-view组件说明如下:

nvue的weex 组件模式: weex模式下的web-view组件是weex自己实现的,它目前仍然使用UIWebview。官方会追踪weex的升级。 nvue的uni-app组件模式: web-view组件使用WKWebview,不可修改为uiWebview。

3.2 白屏检测刷新

3.2.1 自动刷新

需要一个全局挂载的工具类,Vue.prototype.$utils = utils在需要使用的页面(一般为tab页)最外层需要设置为同一个class名称;在onshow方法调用;

let pageList = {};

const utils = {

reloadCurrentPage: function(_self, isTab = true) {

// #ifdef APP-PLUS

// 获取当前路由及传参,以备页面刷新之用

var route = _self.$scope.route;

var data = _self.$scope.options && _self.$scope.options.data;

var url = '/' + route;

if (data) {

url = '/' + route + '?data=' + data;

}

var isRecovery = true; // 页面刷新标识

let newTime = Date.now();

if (pageList[url]) {

const query = uni.createSelectorQuery().in(_self);

//这里select()中替换为自己的样式class名称

query.select('.container').fields({size:true}, data => {

isRecovery = false; // 重置页面刷新标识

}).exec();

setTimeout(() => {

// 页面白屏,需触发刷新机制

if (isRecovery) {

//如果获取不到节点

//确保只刷新一次

if (newTime - pageList[url] > 3000) {

//超过3秒才重新刷新,这里设置几秒就行,目的是防止无限刷新

//因为刷新后页面肯定会出来,但是立马再次调用该方法不一定能获取节点(DOM树未必构建完毕)

pageList[url] = newTime;

// 若为tab标签栏位

if (isTab) {

uni.reLaunch({

url

})

} else {

// 若为页面

uni.redirectTo({

url

})

}

}

}

}, 600)

} else {

// 页面正常,记录当前时间

pageList[url] = newTime;

}

// if (plus.os.name === 'iOS') {

// }

// #endif

}

}

3.2.2 手动刷新

webview页面提供按钮以支持用户手动刷新,

手动刷新实现逻辑如下:

手动刷新按钮在检测到白屏事件发生时显示:

query.select('.container').fields({size:true}, data => {

isShow = true; // 展示刷新按钮

}).exec();

应用3.2.1小节提供的刷新方法,当点击刷新按钮调用刷新方式。

3.3 总结

在前端减少内存使用,最重要的就是图片渲染,尤其是大图片。

在页面上不要渲染多张大图,比如从摄像头或相册选择多张图,并缩放尺寸渲染在页面上,虽然肉眼看起来手机屏幕上是几张小图,但实际上是多张大图只是被缩小,这种情况非常耗费内存。一张图片3m,9张这样的大图同时渲染到屏幕上,什么手机都受不了。

一个缩略图控制在几k或十几k,才是合理的。

详情页面展现多张大图并不受影响。如果图片滚动在屏幕外,os内存不足时也会自动收回这些屏幕外图片占用的渲染资源,最吃资源的就是同屏渲染多张大图。

四、拓展阅读

《uni-app中Webview的使用注意》《uni-app SelectorQuery》《跨平台应用开发进阶(五十六):应用渲染异常问题分析及解决》《安全生产:内存溢出和内存泄漏》

参考文章

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: