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

有时候会遇到小程序跳转到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，

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

小程序跳到h5页面_小程序如何跳转h5页面
小程序跳转H5页面是通过web-view组件来实现的,web-view是一个可以用来承载网页的容器,会自动铺满整个小程序页面. 1.配置业务域名小程序账号必须是企业账号,个人和海外账号暂不支持,只有 ...
taro小程序跳转h5页面
taro微信小程序跳转h5页面项目架构-tarojs+react+sass+微信开发者工具项目使用taro官网上面的步骤构建起来的项目架构,之后生成微信端的小程序,由于项目与车险有关,需要多个渠道 ...
小程序跳转H5页面没有返回按钮解决方案
公司做了一个小程序,使用webview搭建:页面全部开发完毕后,领导说这个我们得嵌入某某H5活动页.一想,这不很简单.直接把h5页面地址给我不就好了吗.然而问题来了,发现下图的问题了吗???缺少返回按 ...
小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
【微信小程序】微信小程序跳转H5页面的实现思路与方案
需求简述当前项目的主流程采用H5的方式编写. 在一些渠道的营销推广活动中,并不能直接跳转到网页,但可以跳转到微信小程序. 于是希望通过微信小程序,间接实现跳转H5页面的需求. 方法简述有两种解决方 ...
微信小程序跳转h5页面的方式
通过web-view跳转h5, 自己总结了几种用过的方法,有更好的,欢迎讨论补充: 1.使用navigator在wxml中编码,单独写一个文件,/pages/webview/index.wxml 第二 ...
WebView 微信小程序跳转h5项目，h5项目拿到token
h5vue项目接收token,防止用户从微信跳转h5,token失效,用户体验性差在App.vue文件中Mouted里面 getUrlData() {let tempStr = window.loc ...
【微信小程序】关于H5跳转微信小程序、微信小程序跳转H5、微信小程序跳转微信小程序的实现方法
0 说明业务提出需求,要实现H5跳转微信小程序的需求,在浏览器.微信环境下,都能通过H5跳转进入小程序. 另外,本文也将微信小程序跳转到H5,以及微信小程序跳转到微信小程序的方法进行汇总. 对于,微 ...
小程序跳转小程序，小程序跳转公众号，小程序跳转h5
1:小程序跳转小程序 uni.navigateToMiniProgram({appId:'wx11111111111111111111' ,//小程序appidpath:'pages/phone/in ...

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

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

最新文章

热门文章