需求体现:
在小程序里面,实现小程序和H5页面互相跳转。
1. 实现H5页面跳转小程序
小程序里面加载H5页面,需要嵌在web-view里面,注意:一个项目只能有一个。 例如:在小程序里面打开百度首页,在小程序项目里面src/pages/新建一个webview的文件夹,含有wxml/wxss/json/js
wxml:
<web-view src="{{url}}"></web-view>
js:在onLoad里面获取到url这个参数,然后赋值给data,这样在wxml里面就能取到url的值。
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/'
});
2. H5页面返回小程序
从H5页面返回小程序页面,需要使用微信SDK提供的跳转方法。
window.wx.miniProgram.navigateTo({
url: `/page/account/index`,
});
使用微信的SDK方法,需要先发送签名验证wx.config
3. 小程序和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)