微信小程序使用 web-view 组件无效

最新推荐文章于 2025-06-12 11:18:38 发布
最新推荐文章于 2025-06-12 11:18:38 发布
阅读量317 收藏
点赞数 3
CC 4.0 BY-SA版权
文章标签： 微信小程序 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/x_Lyric/article/details/146181884

一、访问外部域名，需要在管理后台配置业务域名

开发者登录小程序后台mp.weixin.qq.com，选择开发管理->开发设置->业务域名，点击新增

1. 下载验证文件

注意，没有放置好校验文件是不能通过校验的，也就不能保存域名配置

2. 以nginx为例

获取到校验文件之后，放置到需要访问的域名方的nginx，放到nginx -> html ->和index.html文件同目录

如需要访问www.baidu.com，发给对方，让对方放置好，再直接到浏览器地址栏输入域名+校验文件名，如：http://www.baidu.com/xxxxx.txt，会直接返回校验文件的内容，表示放置成功。

3. 测试是否可以访问

放置好校验文件+配置了业务域名，就可以直接在小程序测试是否可以访问外部域名的地址

x_Lyric
关注
微信小程序 - 详细解决web-view公众号文章或第三方网站分享转发后打开失败，页面显示“无法打开该页面，不支持打开“、“页面不存在“报错提示，苹果IOS系统手机打开是空白页，安卓手机系统会有提示！
资深程序员
08-22 1万+
微信小程序，公众号文章，第三方H5网页，内嵌网站分享后打不开，web-view，页面分享，小程序里公众号文章转发后无法打开，白屏，页面空白什么都没有，不支持打开，无法打开该页面，页面不存在，业务域名配置好了还是不行，公众号和小程序已经关联，iOS端苹果真机打开空白页，安卓手机，页面分享后，用户打不开提示错误，提示页面不存在，如何解决页面提示无法打开该页面，微信小程序web-view无法打开该页面不支持打开的解决方法，无法打开该页面不支持打开，最新详细解决方案，分享之后无法打开页面，提示无法打开该页面,不支持
微信小程序使用web-view，内嵌外网h5踩坑记！！
weixin_61877032的博客
10-13 5189
微信小程序使用web-view业务域名配置问题总结
【微信小程序】web-view 第三方网站分享，用户打不开提示错误
前端相关
06-19 4188
页面由 webview 组件承载，点击右上角 ··· 分享转发出去后，用户却无法打开（如下图真机所示），大部分情况下，IOS 苹果系统打开是空白页，安卓系统才会有提示！提示：以下是本篇文章正文内容，下面案例可供参考问题原因主要是由于小程序跳转路径不正确导致，修改后可以正常跳转到小程序web-view页面。
【小程序开发】web-view 标签详解
最新发布
qq_65142821的博客
06-12 760
本文介绍了小程序开发中web-view组件的使用方法和注意事项。web-view类似于iframe，用于嵌入网页内容，常用于展示协议、活动页等。微信小程序要求嵌入网页必须使用HTTPS协议并配置业务域名，需通过后台验证。uni-app中使用web-view时需要采用页面组件方式。文章详细说明了业务域名的配置流程，并提示公众号文章链接不能直接嵌入。掌握这些要点能帮助开发者合理利用web-view组件，实现小程序与网页内容的集成。
微信小程序web-view无法打开第三方页面，且无法添加业务域名的解决办法。实测可用！！
c12312303的博客
03-20 2023
微信小程序中web-view无法添加业务域名的解决方法
bindmessage 无效 webview postMessage @message
weixin_60592115的博客
05-21 647
前提：必须引入 <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>用这个wx.miniProgram.postMessage({data:{foo: 'bar'}})
微信小程序 webview应用+网络校验
weixin_45173576的博客
02-23 497
1. 创建 webview 的文件 2. wxml 这里做了个是否有网络的验证 <view wx:if="{{isNonetwork == false}}"> <web-view src="{{lick}}?u={{userId}}" ></web-view> </view> <view wx:else> <view class="noChong">网络不给力，请重新加载</view>
微信小程序临时开启开发环境不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 选项
zgscwxd的博客
12-02 4158
微信小程序临时开启开发环境不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 选项
微信小程序web-view的那些事（持续更新）
q1003675852的博客
04-03 1589
本文主要记录微信小程序web-view的一些注意事项
微信小程序在web-view页面增加一个按钮
weixin_45496202的博客
04-20 2790
方法不难,重点就是要使用cover-view标签,一定要给样式,层级越高越好,再一个就是需要在真机查看效果,调整样式有点麻烦.
解决小程序web-view两个恶心问题
林恒的博客
07-24 1896
算是小完美的解决了吧，这里记录一下，看看就行，勿喷。
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
10-16
【微信小程序Webview组件交互与内联H5页面实现微信支付解析】 微信小程序引入Webview组件后，开发者能够将已有的H5页面嵌入到小程序中，实现资源复用，如微信商城、文章详情页、商品详情页等。然而，由于微信安全...
如何解决微信小程序使用webview无法打开
weixin_43814775的博客
12-20 555
如何解决微信小程序使用webview无法打开
小程序web-view无法打开该页面的解决方法
我是小鹏呀的博客
06-28 9628
把文件给后端，后端部署服务器，部署完后，可以直接访问该文件。例如：业务域名为https://baidu.com，下载下来的文件名为test.txt，后端部署完成后，可以确保https://baidu.com/test.txt可以访问。问题：开发者工具可以正常打开，正式上线版小程序使用 web-view 组件测试时提示：“无法打开该页面，不支持打开。解决方法：需要配置业务业务域名，在微信公众平台-开发-开发管理-业务域名。，请在“小程序右上角更多->反馈与投诉”中和开发者反馈。
微信小程序配置服务器域名和业务域名校验文件
ai_xy的博客
06-29 1万+
为方便开发，一般在使用开发者工具-本地设置中会勾选"不校验合法域名、业务域名及HTTPS证书"。开发完成后需使用微信公众平台登录小程序账号完成服务器域名和业务域名配置(业务域名校验文件)
微信小程序web-view使用说明，及链接打不开问题
热门推荐
m0_60312580的博客
04-25 2万+
开发微信小程序时，有时会需要在小程序内打开网页链接，这时就需要用到 web-view 标签。web-view 是小程序上用来承载网页的容器，且每个页面只能有一个 web-view，它会自动铺满整个页面，并覆盖其他组件。目前个人类型的小程序上不支持使用。在小程序上打开的网页链接地址大致可以分为两种类型：外部网页链接，如百度、知乎等网页地址微信公众号文章链接web-view 跳转外部网页链接需要配置业务域名，外部网页内 iframe 的域名也需要配置。配置小程序业务域名的方法可以参考。
android用webview加载H5页面出现点击事件失效的问题解决
milli236的博客
08-03 1万+
不论点击还是标签链接都失效，反复查阅，可能性方法试了又试最终解决。总结下：1.开启js支持2.webview 设置WebChromeClient3.websetting和webviewclient import android.os.Bundle; import android.annotation.SuppressLint; import android.app.Activity; impor
微信小程序web-view无法打开该页面不支持打开的解决方法
qq_42351675的博客
01-24 1万+
我在正式上线版小程序使用web-view组件测试时提示：“无法打开该页面，不支持打开 https://xxxxxx，请在“小程序右上角更多->反馈与投诉”中和开发者反馈。” 奇怪的是，“真机调试”、“开发模式”都可以使用web-view组件访问我需要的路径。只有“体验版”、“线上版本”会出现这个错误提示。
【微信小程序】webview使用、限制、扩展说明
RogerQianpeng的博客
02-01 8083
如果想知道渠道来源，比如业务场景是从多个渠道通过Url Scheme跳入web-view，想知道各个渠道的流量，也可以在生成时设置不同的channel字段，然后在此处读取再落库。Url Scheme跳转进入时，进入的并非小程序首页，左上角会出现首页按钮，可以隐藏。以及你自己的后端服务，即可获得用户的openid、unionid。1、关联公众号的非文章页【公众号带“关注”按钮的首页（下图）】在h5中，也可以调用一些wx提供的接口，比如常见的跳回带参。用生成的带参数的Url Scheme跳入也可以读取到参数。
微信小程序webview改变高度
01-15
### 动态调整微信小程序 WebView 组件高度的方法 在开发过程中，有时需要根据网页内容动态设置 `web-view` 的高度以适应不同设备屏幕或优化用户体验。由于 `web-view` 默认情况下不会自动适配其内部加载页面的内容高度，因此需通过特定方法来实现这一功能。 #### 方法一：利用 JavaScript 和 CSS 实现自定义滚动条隐藏并计算真实高度 可以在 H5 页面中加入一段脚本，在页面完全加载完毕后向父级容器发送消息告知实际所需的高度值： ```html <script> document.addEventListener('DOMContentLoaded', function() { let bodyHeight = document.body.scrollHeight; // 向宿主环境传递信息 try{ wx.miniProgram.postMessage({ data: { height: bodyHeight } }); }catch(e){ console.error("Failed to send message", e); } }); </script> ``` 接收来自子页面的消息更新样式表中的变量从而改变 webView 容器尺寸[^2]。 对于小程序端，则监听消息事件，并据此修改对应的 wxml 文件内的 style 属性: ```javascript Page({ onLoad(query) { this.setData({ url: query.url }); const that = this; wx.onMessage(function (data) { if(data.height){ that.setData({ containerStyle:`height:${data.height}px;overflow:hidden;` }) } }); }, }) ``` 对应 WXML 结构如下所示： ```xml <view class="container" style="{{containerStyle}}"> <web-view src="{{url}}"></web-view> </view> ``` 这种方法适用于希望保持原有布局结构的同时让 webview 能够更好地贴合所展示内容的情况。 #### 方法二：固定比例缩放模式下的解决方案 如果应用允许采用固定的宽高比呈现网页内容，也可以考虑直接指定一个较大的初始高度值，再配合 CSS 中的 viewport 单位 (`vh`) 来创建响应式的视窗效果。不过这种方式可能会导致部分区域不可见或者存在空白空间的问题，具体取决于目标平台以及设计需求[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值