博客/ uniapp

uniapp中使用webview打开vue网页空白的问题

44960次阅读 3352人点赞 作者: WuBin 发布时间: 2022-08-10 11:24:52

扫码到手机查看

问题描述与解决

最近在做一个“信号新闻”的APP，里面有个专题板块，需要使用uni-app内置的web-view引入网页，以下是webview的官网介绍：

这里在浏览器开发环境测试的时候，浏览器使用的是iframe，会有显示、跨域等等问题，所以开发环境推荐使用本地页面进行测试；

到了真机环境，webview是没有跨域等等限制的，所以可以使用真正的网页地址进行测试；

web-view引用传统的JQUERY+HTML页面是没有任何问题的，只要系统的webv版本兼容CSS/JS就可以正常显示；但是到了vue页面，如果webv的版本较低，比如，我的测试手机，未更新前，webv的版本：

这个版本下，当打开webview引用的vue页面时，也没有报错，只在加载后显示白页，而开发模式下浏览器的预览正常，这就明显有两种可能：

对于牵扯不大的，我们应该着手解决第一条，于是我采用了uni-app提供的X5内核：

同时，使用自定义基座，打包x5内核后，然后再运行，使用uni的弹窗，显示如下信息：

发现虽然使用了x5内核，可是由于本机的webv版本过低，还是没有正常显示。X5内核使用前需要仔细看其注意事项：

由于x5使用动态热更新加载x5内核。在Google Play审核是不允许的，所以无法提交Google Play
x5不支持在PC模拟器上运行，一切真机为主
x5内核对webview嵌套支持的不友好。使用x5渲染的页面尽量不要使用webview嵌套（父子页面等）容易出现动画卡顿等现象
因x5加载内核机制问题，云打包APK第一次安装运行可能x5还没有下载，此时不是x5内核渲染页面，而是系统webview渲染页面。但x5下载完毕后，杀掉进程重新运行，就会使用x5内核渲染页面
并非所有手机都有x5内核，当手机端没有时x5内核时，App启动后会先下载内核，在x5加载成功前，调用webview仍然是系统webview
html5 嵌入iframe视频fixed定位会导致应用闪退
部分系统(华为)修改字体后不会重启系统。导致x5页面不能够立即更换字体库重新进行渲染。需要杀掉进程重新启动应用（back退出应用无效）才可以重置字体库进行页面渲染
APK本身已经集成了X5才能通过wgt升级。如果apk本身没集成X5则不可以通过WGT升级支持X5。需要改为APK升级！
可通过plus.navigator.getUserAgent判断UA中是否包含MQQBrowser关键字判断当前webview是否为X5渲染。 HX2.6.16+支持
x5内核渲染页面的滚动条。会随着页面内容的长短显示滚动滑块。可按住滚动滑块拖动实现快速滚动。与普通webview滚动条有差异

注意，X5内核只能在手机上查看，如果要在手机上测试，必须使用Hbuild中的运行->“自定义基座”，先打包，然后再在手机上运行。

配置如果低于某个版本就提示

自定义基座：

查看X5内核是否生效：

一般的测试机都比较老旧，如果要升级webview版本，首先要从网上下载apk

直接下载：

然后连接手机，传到手机，从文件管理中进行安装：

安装后，在设置->应用管理，以及运行程序可以看到：

证明已经更新成功了。

当然，在有限条件下，本方法仅仅为了应付过去所谓的领导，如果要从根本上解决问题，首先就要要注意代码的兼容性！注意使用兼容的写法，尽量不要用()=>箭头函数等等。

最后，在APP模式下，调试不能用alert了，要用uni自带的弹窗测试：

uni.showModal({
	title: 'msg',
	content: str,
	showCancel:false,
});