小程序跳转H5页面，修复线上环境无法打开问题

已于 2022-12-08 16:10:42 修改
阅读量3.1k 收藏 5
点赞数 1
文章标签： 小程序 前端
于 2022-12-05 11:21:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42585114/article/details/128183218
版权

有时候会遇到小程序跳转到H5页面的需求，下面是利用web-view实现简单的小程序跳转到H5页面

首先需要单独创建一个文件来使用web-view组件，组件具体使用方法见官方文档web-view | 微信开放文档

主要配置src属性，其他看自己需求

1.web-view文件（显示H5页面的文件）

 2.文件创建好之后我们需要从另外的页面跳转过来或者给定一个固定的src

 这里我使用的navigateTo跳转并携带需要显示的H5页面地址，

显示页面在onLoad获取

3.需要在微信小程序开发管理-开发设置-业务域名，配置之后才能在小程序中正常开，配置之后子域名也可以正常打开

---------------------------------------------------------------------------------------------------------------------------------

4.在线上环境出问题了........

线上环境H5页面无法展示，出现白屏的情况，（原本bug红框位置会有一个文件路径，这里无法复现）

 经过排查只有真机上的线上环境会出现这个问题、开发工具能正常打开（src属性固定为H5链接也不会出现问题），其他环境真机和开发工具都是正常打开，因为我的src是在onload里面拿到H5链接的，所以先假设web-view在这个阶段并没有成功加载导致链接没有成功打开

先尝试了使用computed计算属性对src重新赋值

 结果竟然成功了，真机线上环境能正常打开了

这只是目前能尽快想到的解决办法了

5.因为我是动态传的url所以需要使用encodeURIComponent编码，既然编码了那么就需要在获取到的时候进行解码decodeURIComponent，

 

 

普罗密斯
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序跳转H5页面的方法步骤
11-21
小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的...因此小程序与H5网页相互跳转页显得尤为重要，下面我就来给大家分享一下微信小程序跳转到H5网页的方法。 小程序
h5页面跳转微信小程序（最简单的方法-URL Scheme）
12-21
H5页面跳转微信小程序的需求是普遍存在的。由于微信小程序是一种只能在微信内部访问的应用程序，而H5页面可以在任何浏览器中访问，因此需要通过跳转来实现两者之间的衔接。 对于用户来说，H5页面跳转微信小程序可以...
小程序使用web-view无法打开该H5页面不支持打开的解决方法
文龙刚的博客
12-19 7175
（4）校验文件放置好后，点击保存按钮。校验成功后，输入的域名就会显示在业务域名中了，这就表示业务域名配置成功了。注意：业务域名（即需要跳转的域名）需经过ICP备案，新备案域名需24小时后才可配置，并且是以https开头的。后，才能支持跳转任意外部链接。（需要跳转到哪个外部链接，就将那个链接配置为业务域名。（3）输入需要跳转的域名，然后点击下载校验文件，并将文件放置在需要跳转的域名的根目录下。（2）然后进入【开发-开发设置-业务域名】中，开始配置业务域名。（1）从微信公众平台，登录微信小程序的帐号。
微信小程序跳转h5页面
最新发布
m0_51768044的博客
06-07 254
uni-app微信小程序跳转h5页面
小程序 - Taro小程序中打开h5页面链接 - 并解决：无法打开该页面 - 不支持打开 https://www.baidu.com/，请在“小程序右上角更多-＞反馈与投诉”中和开发者反馈
工作中遇到问题记录
08-01 4574
Taro小程序中打开h5页面链接 - 并解决：无法打开该页面 - 不支持打开 https://www.baidu.com/，请在“小程序右上角更多->反馈与投诉”中和开发者反馈
微信小程序web-view跳转到公众号部署线上打开是空白的
林同学啊的博客
04-29 1496
需求是做一个通过web-view跳转公众号加粉的功能 本地跑代码的时候是很正常的，但是部署到线上的时候，发现是打开是空白的，就感觉很奇怪，问题逐一排查发现了是因为本地勾选了 解决方法就是： 1.登录微信公众平台微信公众平台 2.找到菜单中的开发管理 3.点开发设置配置你的服务器域名和业务域名（都是同一个） 4. 刷新小程序，成功显示内容 ...
在小程序中嵌套h5页面，点击事件不触发
Hero_rong的博客
10-17 9746
最近在写小程序，由于小程序快满了，就把页面写成h5，嵌在小程序里，原以为很简单，没想到遇到问题，问题不多，但是很大 第一个就是点击事件不触发， 场景如下：     点击按钮触发ajax请求，请求成功之后跳转到另一个页面，但是页面始终不跳转。 解决方法，将http开头的域名换成https开头的，如果你看过其他的文章，发现此方法没有用的话，请看下面的详解   后来不停地alert()，先后...
小程序跳转到的H5页面再跳转回跳小程序的方法
10-15
主要介绍了小程序跳转到的H5页面再跳转回跳小程序的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序和H5页面间相互跳转代码实例
12-13
这篇文章主要介绍了微信小程序和H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram ...
小程序使用webview嵌入H5，附件链接无法打开问题
哈喽234的博客
07-27 1619
在一次做项目时，排查小程序中附件链接打不开问题，但另一个小程序同样的代码有的可以打开，有的打不开；小程序的wx.request()是通过jsCore调用系统原生api发起的请求，即便header里带有set-cookie，也不会在web-view对应的’浏览器’中设置cookie，而是由原生应用来处理这个header中的set-cookie。但是，小程序中的web-view和微信中直接打开的h5，因为用的是同一个浏览器内核，所以，它们的cookie、storage是可以共享的。
uniapp h5打开微信小程序
国企程序媛 record 前端技术 & review code。。。
03-15 4301
首先贴代码将几个需要注意的点： 1、当获取不到微信小程序APPID和微信小程序APPSECRET时只能在微信浏览器打开小程序 2、此代码只要是在微信环境打开小程序 3、需要在线上域名调试，本地看不到效果，可将本地host反向代理到线上域名进行调试 4、wx-open-launch-weapp标签内样式只支持px，要自适应需再将rpx转px 5、需要服务端的接口生成签名和公众号的一些数据给前端 6、前端安装模块 npm install jweixin-module --save 7、main.js 添加一行代
微信小程序打开微信H5页面，体验版可打开，生产环境访问失败，无法访问该页面
海贼王某人的博客
02-08 4039
这里的校验文件只需要放在域名根目录下即可，比如我们要访问https://www.baidu.com,那校验文件就放在https://www.baidu.com/testFile.txt,这个校验完成后我们就可以访问此域名下的网页了，比如https://www.baidu.com/h5/index,或者https://www.baidu.com/test_h5,在绑定了域名，子域名都可以访问的，还有不明白的可以在下方留言。解决办法，在小程序后台找到开发管理，开发设置，往下拉，找到业务域名配置。
微信小程序嵌入h5页面加载空白
weixin_51305414的博客
07-19 1526
项目背景:我做的这个项目是用uniapp写的h5页面,然后嵌入到微信小程序中,微信小程序中开个入口,跳转到我们的h5页面.但是有时候会出现一个问题,就是有的手机加载的时候页面突然空白.(当时我和很多同事的手机都是正常进入,但是甲方的老师有的手机进入空白,之前他们也打开过,但是后来就打不开了)解决方案:第一:清除微信缓存 我的--设置--通用--存储空间--清除缓存(注意:缓存要全部清理掉,不 能光清微信小程序的)
微信小程序与h5的相互跳转
weixin_45059911的博客
07-13 6574
微信小程序与h5的相互跳转
微信小程序全部内嵌H5遇到的问题记录
c1o2c3o4的博客
12-29 1627
微信小程序内嵌H5
开发那点事（十五）微信小程序webView首次进入白屏优化方案
开发那点事
06-06 3709
微信小程序webView首次进入白屏优化
小程序内嵌H5遇到的坑
AuraVic的博客
10-18 899
小程序的 webView 权限少的可怜，如果官网中没有提及某一些权限和方法，则H5一定无法实现该方法，请换一种思路去开发。大家开发的时候慎用H5，不要把太重的功能放在H5上去实现！URL Link。
小程序webview组件嵌H5页面，安卓手机没有问题，苹果有部分页面不显示
祈澈菇凉
01-12 2580
小程序上线之后的有一天，发现了一个bug，同事说点击列表的时候会进入一个状态界面，这个界面是H5页面，但是在苹果手机上却是空白的。这涉及到了小程序webview组件嵌H5页面，安卓手机没有问题，苹果有部分页面不显示 问题。 对webview以下的这些坑进行一一排查： 并进行真机调试 ![](https://upload-images.jianshu.io...
微信小程序 使用 web-view实例上的函数和window函数
05-24
在微信小程序中，可以通过 `web-view` 标签加载一个 web 页面，并且可以在该页面中调用一些函数。同时，也可以在小程序中通过 `wx` 对象调用一些 `web-view` 实例上的函数。 以下是一些示例代码： 1. 在 `web-view` 页面中调用 `window` 上的函数 在 web 页面中，可以使用 `window` 对象定义一个自定义函数，例如： ```js function customFunc() { console.log('custom function called'); } ``` 然后在页面中的某个事件或函数中调用该函数，例如： ```js document.getElementById('btn').addEventListener('click', function() { window.customFunc(); }); ``` 在小程序中，则可以通过 `wx.createWebViewContext` 方法获取 `web-view` 实例的上下文对象，然后使用 `postMessage` 方法向页面发送消息，从而调用该函数，例如： ```js const webViewContext = wx.createWebViewContext('web-view'); webViewContext.postMessage({type: 'callCustomFunc'}); ``` 在 web 页面中，则需要监听 `message` 事件，当收到消息时调用相应的函数，例如： ```js window.addEventListener('message', function(event) { if (event.data.type === 'callCustomFunc') { customFunc(); } }); ``` 2. 在小程序中调用 `web-view` 实例上的函数 在小程序中，可以通过 `wx.createWebViewContext` 方法获取 `web-view` 实例的上下文对象，然后直接调用该对象上的函数，例如： ```js const webViewContext = wx.createWebViewContext('web-view'); webViewContext.postMessage({type: 'callWebViewFunc'}); ``` 在 web 页面中，则需要监听 `message` 事件，当收到消息时调用相应的函数，例如： ```js window.addEventListener('message', function(event) { if (event.data.type === 'callWebViewFunc') { // 调用 web-view 实例上的函数 console.log('web-view function called'); } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值