我们开发微信小程序过程中,会遇到如下几种情况:小程序内打开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-weapp
id="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