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

1、背景

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

2、小程序跳转H5页面

小程序里面运行H5页面，须要嵌在web-view里面，注意：一个项目只能有一个。 Demo:在小程序里面打开百度网页 在小程序项目里面src/pages/新建一个webview的文件夹，含有wxml/wxss/json/js

wxml：
<web-view src="{{ src }}"></web-view>
复制代码

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页面。

3、H5页面返回小程序

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

window.wx.miniProgram.navigateTo({
    url: `/page/account/index`,
 });
复制代码

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

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

1. 【问题描述】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)

2. 【问题描述】在小程序里面跳转到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，看错误来源哪里。谨记在心。