我们开发微信小程序过程中,会遇到如下几种情况:小程序内打开H5、小程序内H5返回小程序、H5跳转到小程序、小程序打开小程序、小程序内H5跳小程序,那具体怎么操作实现呢,下面就总结下我认为可行的方案。
1、小程序内打开H5
这个只需要用标签web-view即可,类似
<web-view src="https://www.baidu.com" bindload="bindload" binderror="binderror"></web-view>
参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
2、小程序内H5返回小程序
这个也很简单直接
wx.miniProgram.navigateTo({url: '/path/to/page'})
返回指定页面即可
参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
3、H5跳转到小程序
使用wx-open-launch-weapp标签
<wx-open-launch-weappid="launch-btn"appid="wx12345678"path="pages/home/index?user=123&action=abc"><script type="text/wxtag-template"><style>.btn { padding: 12px }</style><button class="btn">打开小程序</button></script></wx-open-launch-weapp><script>var btn = document.getElementById('launch-btn');btn.addEventListener('launch', function (e) {console.log('success');});btn.addEventListener('error', function (e) {console.log('fail', e.detail);});</script>
参考文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
4、小程序打开小程序
wx.navigateToMiniProgram({appId: appId, //必传值path: path,//别的小程序路径,空为跳到主页success(res) {// 打开成功},fail(res) {//打开失败}})
参考:https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html
5、小程序内H5跳小程序
还有一种比较诡异的现象,我们的H5被某一个小程序打开,又想在H5内打开别的小程序,这种我们可以结合”小程序内H5返回小程序”和”小程序打开小程序”的模式
首先是H5页面修改
1、获取配置的别的小程序参数和别的小程序路径
2、跳转到包含该h5页面的小程序某个页面,带上目标参宿和
wx.miniProgram.navigateTo({url: '/pages/自己小程序页面路径?appid=别的小程序参数&path=别的小程序路径'});
然后是小程序页面修改
1、获取别的小程序appid和别的小程序路径path
2、小程序打开小程序
wx.navigateToMiniProgram({appId: appId, //必传值path: path,//别的小程序路径,空为跳到主页success(res) {// 打开成功},fail(res) {//打开失败}
文档参考:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html , https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html
