微信小程序web-view页面安卓下显示空白的解决办法!!!

最新推荐文章于 2025-06-13 23:03:24 发布

weixin_30613433

最新推荐文章于 2025-06-13 23:03:24 发布

阅读量5.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签：移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/Smiled/p/8746329.html

本文介绍了一种在WebView中加载带有参数的页面时遇到的问题及解决方案。主要针对Android平台，在某些情况下页面会显示为空白。文章提供了一个实用的方法来解决这个问题，通过控制WebView的显示时机确保页面正常加载。

web-view页面在你向地址拼接参数展示页面时,在安卓上有时会显示空白

解决方案:

A: 普通不需要参数的话可以直接把地址写在src里,不要去在onLoad里获取你的全局变量后再赋值.

B: 如果需要拼接参数!!!

1.在data里添加一个bool用作判断显示web-view,默认设置为false;

2.然后在onLoad里添加一个定时器,定时器里执行你需要的逻辑和设置data,并将bool设置为true

3.页面用bool控制web-view的显示时机

完美解决!!!

转载于:https://www.cnblogs.com/Smiled/p/8746329.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30613433

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序 - 详细解决web-view公众号文章或第三方网站分享转发后打开失败，页面显示“无法打开该页面，不支持打开“、“页面不存在“报错提示，苹果IOS系统手机打开是空白页，安卓手机系统会有提示！

🏆 前端领域优质创作者

08-22

1万+

微信小程序，公众号文章，第三方H5网页，内嵌网站分享后打不开，web-view，页面分享，小程序里公众号文章转发后无法打开，白屏，页面空白什么都没有，不支持打开，无法打开该页面，页面不存在，业务域名配置好了还是不行，公众号和小程序已经关联，iOS端苹果真机打开空白页，安卓手机，页面分享后，用户打不开提示错误，提示页面不存在，如何解决页面提示无法打开该页面，微信小程序web-view无法打开该页面不支持打开的解决方法，无法打开该页面不支持打开，最新详细解决方案，分享之后无法打开页面，提示无法打开该页面,不支持

微信小程序 - 完美解决 web-view 公众号文章或第三方网站分享转发后，打开提示 “无法打开该页面，不支持打开” 或 “页面不存在”（IOS 苹果系统打开是空白页，安卓系统会有提示）超详细排查

🏆 前端领域优质创作者

01-30

1万+

微信小程序微信小程序提示无法打开该页面,不支持打开，打开webview公众号文章地址不对，小程序WebView打开关联的公众号文章失败，小程序webview访问公众号文章提示非业务域名，微信小程序页面分享后提示页面不存在或者页面空白的解决办法，微信小程序分享webview公众号文章页面提示无法打开该页面,不支持打开，微信小程序webview提示页面不存在，小程序提示无法打开页小程序打开webview页面显示无法打开该页面显示一串地址，请在小程序右上角更多，微信小程序分享webview公众号文章页面提示无法

参与评论您还未登录，请先登录后发表或查看评论

微信小程序封装自定义组件-空白页带按钮

l_yilan的博客

05-09

824

在项目中，经常会有接口数据返回空的情况，多个页面需要显示空数据状态，那么可以封装成自定义空白页组件：页面效果如下：图一：暂无数据图二：带按钮接下来就开始写组件代码啦步骤如下： 1.在根目录下新建components文件夹 2.在components下新建一个blankPage文件夹，新建blankPage的wxml、wxss、json、js文件 blankPage.wxml： /**empty-空白图片的链接，isShowExplain-是否显示文字，emptyExplain-文字，isShow

小程序 web-view进入空白

Pluto_98的博客

03-22

987

web-view进入空白小程序中的web-view点击进入空白，在域名配置完成的情况下，真机调试也可以的情况下，本地调试进入不了，可以试试以下方法：点击“终止”，连续点击好几次就好了奇怪的知识又增长了，第一次遇到这种，找了好多办法都不行，以此记录一波~~~ ...

解决WebView白屏空白的九种方案，AutoSize？

chuyouyinghe的专栏

06-13

503

比如我第一个要说的就是你项目如果集成了AutoSize的话，并且使用了副单位，会有一定概率webview里面适配失效，注意失效后会因为单位特别大等原因看起来是白屏（其实是超出了可视范围导致看不见了而已），你还需要适配下即可。在Android 5.0之后，WebView默认不允许Https + Http的混合使用方式，所以当Url是Https的，图片资源是Http时，导致页面加载失败。平时工作中和前端交流也是，他们说的最多的就是缓存问题，web遇见bug或问题，说浏览器或缓存的问题，刷新下就好了。

微信小程序web-view遇坑，空白页面

weixin_44622464的博客

06-10

4262

使用微信小程序 web-view 标签一直空白页面错误：一直刷新还是一直空白，查了下跳转别的页面使用web-view 还是不行解决：重启微信开发者工具/真机调试试试

QQ小程序webview空白页，无法显示数据

王中阳讲编程

07-24

1508

咳咳咳本文写于2019年7月24号，QQ小程序还处于内测阶段。 webview权限需要单独申请！！！

Android WebView加载页面不能正常显示，空白一片

sunming的博客

11-30

4334

如果你用的测试机是Android8.0以下，并且在此之前也搜到其他文章并没有解决问题，那么你很有可能遇到和我一样的问题，那就是手机自带的android-system-webview版本过低。 解决办法也很简单安装的高一点版本就好了，但是也不能安装太新的版本，楼主在试了几个之后，找到了一个相对中间的版本资源已上传 android-system-webview-7703.apk-Android文档类资源-优快云下载 ...

微信小程序web-view的那些事（持续更新）

q1003675852的博客

04-03

1710

本文主要记录微信小程序web-view的一些注意事项

微信小程序开发之webview组件内网页实现微信原生支付

热门推荐

u013401630的专栏

01-06

2万+

前言、背景本人目前的工作岗位是安卓工程师，在这之前对于前端和后台的知识基本是白纸，只是在日常的工作项目中有需要和小伙伴进行对接的时候接触了那么一丢丢，对于前端和后台的一些专业描述和理解有不当之处还请各位指正。目前部门的主营项目是一个电商项目，在本人入职之前整个项目系统的主营业务流程已经完备，也已经在正式运营，不过因为各种原因平台主要是在PC端和微信公众号进行运营。小程序其实出来的挺

小程序webview调用微信扫一扫的“曲折”思路

HashTang的博客

09-29

1103

自上一篇遇到webview中没有返回按钮之后，虽然跳出坑了。解决方案：《小程序webview跳转页面后没有返回按钮完美解决方案》但是，小程序踩坑之路并没有结束。在公众号网页中通过配置APPID和appsecret可以正常调起微信扫一扫，但是，如何在小程序webview中调用扫一扫？扫描之后数据如何处理？小程序页面处理？还是传递给H5页面处理？做为一名面向搜索引擎开发的我，遇到问题的第一件事，当...

记录微信小程序 跳转页面使用 web-view 加载一直空白问题

wtianp的博客

01-02

3072

从微信小程序跳转时，web-view 一直处在加载中1.查看web-view src是否正确；（正确的）2.查看小程序业务域名是否配置跳转页面域名；（已配置）3.开发者工具能正常跳转，电脑端微信小程序正常打开，手机端微信小程序不能正常跳转，4.电脑端网页能正常打开但使用https 时会提示不安全；（关键问题）5.手机浏览器打开相应链接会先提示不安全选择继续可正常访问；（问题确定）服务端配置相应域名的SSL证书，成功解决问题

微信小程序使用web-view跳转网页解决跳转出现空白或者被拦截问题

qq_53722480的博客

01-09

2690

Page({data: {url: '', // 需要跳转的网址param1: '', // 参数1param2: '' // 参数2},url: options.url, // 从参数中获取需要跳转的网址param1: options.param1, // 从参数中获取参数1param2: options.param2 // 从参数中获取参数2})})

uniapp开发微信小程序使用cover-view不显示的问题

deng_aixuexi的博客

06-06

1317

主要是就是z-index的css样式，层级要高于video或者其他的层级比较高的。在微信小程序真机不显示，但是模拟器显示。可以直接改为view来写。

Webview白屏

Werty

08-25

1037

环境：创维会议电视系统：android8.0 网页：vue3 需求，将网址封装成apk，在会议大屏上无地址栏，全屏显示。使用webview访问百度或其他vue3项目均无问题，仔细对比发现vue的启动方式不对。 package.json 白屏： "dev": "vite", 不白屏： "cli serve": "vue-cli-service serve", 具体原因还未查明。对了，即便白屏的写法，换台android设备也不再白屏。 ...

微信小程序web-view配置及遇到预览真机白屏

qq_57015835的博客

03-27

1028

需要企业主体AppID，（个人的可以在开发工具详情中设置勾选不校验webView，但仅在开发时）经ICP备案，域名注册24小时以上https：域名的方式。

开发那点事（十五）微信小程序webView首次进入白屏优化方案

开发那点事

06-06

4382

微信小程序webView首次进入白屏优化

webview白屏的原因之一

bangelua的专栏

03-19

2179

load本地的html文件，webview白屏的原因： 1. webview设置为setLayerType(View.LAYER_TYPE_SOFTWARE, null); 这段代码是用来关闭webview的硬件加速，去掉这行代码可解决部分手机白屏问题。如果在手机设置的开发者选项中开启”强制使用GPU渲染”，会使该问题必现。

微信小程序 分享到朋友圈，打开后显示空白

最新发布

08-28

微信小程序在分享到朋友圈后打开显示空白的问题，通常与配置、缓存、页面路径以及微信平台的限制等因素有关。以下是详细的解决方案： ### 1. 检查并配置分享路径确保分享到朋友圈的页面路径是有效的，并且符合微信小程序的限制要求。朋友圈分享仅支持 `pages/index/index` 这样的页面路径，且不能携带复杂参数。如果路径配置错误，可能导致页面无法加载，从而显示空白。 ```javascript onShareAppMessage() { return { title: '分享标题', path: 'pages/index/index?query=1' // 确保路径有效且简单 }; } ``` ### 2. 检查页面是否配置为“可分享到朋友圈” 从微信小程序基础库版本 2.11.3 开始，支持将页面分享到朋友圈。需要在页面的 JSON 配置文件中启用 `shareTimeline` 功能，以允许页面支持朋友圈分享。 ```json { "usingComponents": {}, "shareTimeline": true } ``` ### 3. 清除缓存并重新打开有时候，用户可能因为缓存问题导致页面显示空白。可以尝试清除微信缓存，或使用不同的设备进行测试。此外，用户首次打开分享链接时，可能会因小程序未安装而跳转失败。需要确保用户已经安装或能够正常加载小程序。 ### 4. 检查页面路径是否超出长度限制 微信小程序的页面路径有长度限制（通常不超过 1024 字符），如果路径中携带的参数过长，可能导致路径失效。建议减少参数数量或使用短参数名。 ### 5. 检查页面是否被微信限制如果页面涉及敏感内容或违反微信平台规范，可能会被限制访问。确保分享内容符合微信小程序审核规范，避免违规导致页面无法打开。 ### 6. 使用 `web-view` 时检查域名配置如果页面中使用了 `web-view` 加载网页，需要确保该网页的域名已在小程序后台配置为业务域名，并且已通过 HTTPS 认证。否则，页面可能在部分设备（如 iOS）上无法加载，导致空白页 [^1]。 ### 7. 调试工具排查问题使用微信开发者工具的调试功能，查看控制台是否有报错信息。常见的错误包括路径错误、页面未注册、组件加载失败等。通过日志可以快速定位问题根源。 ### 8. 更新基础库版本确保使用的小程序基础库版本为最新版本。微信平台会不断优化分享功能，旧版本可能存在兼容性问题。可以在 `app.js` 中设置最低基础库版本要求。 ```javascript App({ globalData: {}, onLaunch() { const updateManager = wx.getUpdateManager(); updateManager.onCheckForUpdate(res => { // 检测更新 }); updateManager.onUpdateReady(() => { wx.showModal({ title: '更新提示', content: '新版本已准备好，是否重启应用？', success: res => { if (res.confirm) { updateManager.applyUpdate(); } } }); }); } }); ``` ### 9. 检查用户授权状态如果页面依赖用户授权信息（如登录状态），需要确保用户已授权。未授权可能导致页面内容无法加载，从而显示空白。 ### 10. 测试不同设备和微信版本不同设备（如 iOS 和 Android）以及不同版本的微信客户端可能对分享功能的支持存在差异。建议在多种环境下进行测试，确保兼容性。 ---