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