小程序跳到h5页面_[笔记]实现小程序和H5页面之间互相跳转

本文介绍了如何实现在小程序中跳转到H5页面以及从H5返回小程序的方法。通过创建web-view组件并配置跳转参数,可以完成从小程序到H5的跳转;而在H5中,利用微信SDK的navigateTo或reLaunch方法可以返回小程序。文中还详细讨论了在互跳过程中遇到的问题及解决方案,包括URL与app.json冲突、登录态管理等。
摘要由CSDN通过智能技术生成

一、背景

需求背景是这样的,在小程序里面,点击查看用户签订的协议,跳转到协议详情页,刚好协议详情页在另一个H5项目的已经有,所以就想直接跳转过去,避免再开发小程序版本的协议详情页

二、小程序跳转H5页面

小程序里面运行H5页面,需要嵌在web-view里面,注意:一个项目只能有一个。

Demo:在小程序里面打开百度网页

在小程序项目里面src/pages/新建一个webview的文件夹,含有wxml/wxss/json/js

wxml:

js:在onLoad里面获取到url这个参数,然后赋值给data,这样在wxml里面就能取到src的值。

Page({

data: {

url: '',

},

onLoad: function (param) {

this.setData({

url: decodeURIComponent(param.url),

})

}

});

json/wxss是空文件就可以了。

在小程序的页面跳转到H5页面的写法

wx.navigateTo({

url: '../webview/index?url=https://www.baidu.com/'

});

这样就成功实现从小程序跳转到H5页面。

三、H5页面返回小程序

从H5页面返回小程序页面,需要使用微信SDK提供的跳转方法。

window.wx.miniProgram.navigateTo({

url: `/page/account/index`,

});

使用微信的SDK方法,需要先发送签名验证wx.config。

四、小程序和H5互跳遇到的坑

【问题描述】wx.miniProgram.navigateTo中url无法跳转问题

【问题解决】:app.json中配置的tabBar与wx.navigateTo中的url引用相同页面导致

首先pages/account/index这个路径在app.json已经存在,也就是当前从H5页面window.wx.miniProgram.navigateTo(url)的url已经和app.json的一样。此时是不能通过这个方式跳转,而是要改成window.wx.miniProgram.reLaunch(url)

总结:如果url在app.json已定义,则使用reLaunch跳转,如果没有,则使用miniProgram.navigateTo(url)

【问题描述】在小程序里面跳转到H5协议详情页的时候,进入了系统错误页(项目里定义好的错误页),当我现在微信公众号打开该协议详情页,此时再从小程序进入,不会出现。

【问题解决】这里我判断是跟登录态有关系,因为我先访问一下公众号,此时浏览器里有了登录态,所以在小程序里面访问协议详情页不会进入系统错误页。

定位问题过程:H5页面是vue页面,先从路由文件/routes/index.js开始debugger,果然就在登录的js里面找到问题,查看登录的js里面有一个先会登出的过程,然后再login(这里是因为不同券商的原因,需要logout清除上一个券商的数据,哈哈,流水账,不然越记越长,不展开咯)在登录logout的过程,此时该cgi抛出异常,刚好被全局捕获,所以进入了系统错误页。

后面的解决方法,是在登出的时候try catch捕获异常,不要把异常被全局捕获。

try {await request('logout.cgi')} catch(e) {console.log('error')}

记下问题2,是想跟自己说,bugger经常有,遇到了就一个个地看debugger,看错误来源哪里。谨记在心。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值