文章插图
需求体现：在小程序里面，点击查看用户签订的协议，跳转到协议详情页，刚好协议详情页在另一个H5项目的已经有，所以就想直接跳转过去，不必再重复开发小程序版本的模块
实现H5页面跳转小程序里面加载H5页面，需要嵌在web-view里面，注意：一个项目只能有一个 。例如：在小程序里面打开百度网页 在小程序项目里面src/pages/新建一个webview的文件夹，含有wxml/wxss/json/js
wxml：
<web-view src=https://www.isolves.com/it/cxkf/ydd/xcx/2019-10-22/"{{ src }}">
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页面返回小程序页面，需要使用微信SDK提供的跳转方法 。
window.wx.miniProgram.navigateTo({
url: `/page/account/index`,
});
使用微信的SDK方法，需要先发送签名验证wx.config
小程序和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，看错误来源哪里 。谨记 。
【小程序与移动端页面实现互通跳转】
推荐阅读
- 如何将电脑磁盘分区与合并？
- 茶的苦与甜
- 奶在温奶器里最长放多长时间 温奶器里的奶最多保存几小时
- 喝的不是茶 是情境与哲学
- 术士与道士区别 方士是道士吗
- 厨宝安装注意事项介绍
- 细解餐饮店面装修与风水讲究
- 桂林搬家公司推荐与介绍
- 章鱼小丸子
- 五香小酥鱼