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

43151次阅读 3206人点赞 作者: WuBin 发布时间: 2022-08-10 11:24:52
扫码到手机查看

问题描述与解决

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

https://uniapp.dcloud.net.cn/component/web-view.html#web-view

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

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

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

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

  • 手机端的webview版本过低,不兼容ES6等最新的写法;
  • 代码问题,使用了较新的js/CSS功能、写法,而没有使用babel进行向下兼容;
对于牵扯不大的,我们应该着手解决第一条,于是我采用了uni-app提供的X5内核:
同时,使用自定义基座,打包x5内核后,然后再运行,使用uni的弹窗,显示如下信息:
发现虽然使用了x5内核,可是由于本机的webv版本过低,还是没有正常显示。X5内核使用前需要仔细看其注意事项:
  1. 由于x5使用动态热更新加载x5内核。在Google Play审核是不允许的,所以无法提交Google Play
  2. x5不支持在PC模拟器上运行,一切真机为主
  3. x5内核对webview嵌套支持的不友好。使用x5渲染的页面尽量不要使用webview嵌套(父子页面等)容易出现动画卡顿等现象
  4. 因x5加载内核机制问题,云打包APK第一次安装运行可能x5还没有下载,此时不是x5内核渲染页面,而是系统webview渲染页面。但x5下载完毕后,杀掉进程重新运行,就会使用x5内核渲染页面
  5. 并非所有手机都有x5内核,当手机端没有时x5内核时,App启动后会先下载内核,在x5加载成功前,调用webview仍然是系统webview
  6. html5 嵌入iframe视频fixed定位会导致应用闪退
  7. 部分系统(华为)修改字体后不会重启系统。导致x5页面不能够立即更换字体库重新进行渲染。需要杀掉进程重新启动应用(back退出应用无效)才可以重置字体库进行页面渲染
  8. APK本身已经集成了X5才能通过wgt升级。如果apk本身没集成X5则不可以通过WGT升级支持X5。需要改为APK升级!
  9. 可通过plus.navigator.getUserAgent判断UA中是否包含MQQBrowser关键字判断当前webview是否为X5渲染。 HX2.6.16+支持
  10. x5内核渲染页面的滚动条。会随着页面内容的长短显示滚动滑块。可按住滚动滑块拖动实现快速滚动。与普通webview滚动条有差异
注意,X5内核只能在手机上查看,如果要在手机上测试,必须使用Hbuild中的运行->“自定义基座”,先打包,然后再在手机上运行。

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

https://uniapp.dcloud.net.cn/collocation/manifest.html#appwebview

自定义基座:

https://ask.dcloud.net.cn/article/35115

https://uniapp.dcloud.net.cn/tutorial/run/run-app.html

查看X5内核是否生效:

https://uniapp.dcloud.net.cn/api/system/info.html

安卓手机升级webview版本

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

http://www.downcc.com/soft/559988.html

直接下载:

http://a2.dxiazaicc.com/apk4/webviewv96.0.4664.27_downcc.com.apk

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

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

证明已经更新成功了。

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

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

uni.showModal({
	title: 'msg',
	content: str,
	showCancel:false,
});
			
点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:web-view
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    8179次阅读 521人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3272次阅读 240人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    13228次阅读 854人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12090次阅读 384人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    10347次阅读 829人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    14248次阅读 1132人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14171次阅读 1155人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    27006次阅读 2125人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    23226次阅读 1790人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录