uniapp开发的H5嵌套在uniapp开发的小程序中,如何从H5跳回小程序

一、引用依赖的文件
在 web-view 加载的 HTML 中调用 uni 的 API,需要在 HTML 中引用必要的 JS-SDK。

<!-- 微信 JS-SDK  -->  
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

注意!!!
1、有的地方说微信 JS-SDK这个js可以不用引入,但是我没有引入就一直不起作用,所以如果你没有引入这个js而一直不起作用的话,一定要引入这个js再试试;
2、微信的SDK一定要写在uniAppSDK的前面。

二、调用方法的前提
可以调用官网上所说的五个跳转方法与uni.postMessage、uni.getEnv这些方法的前提是:待触发 UniAppJSBridgeReady 事件后,才可调用 uni 的 这些API。

document.addEventListener('UniAppJSBridgeReady', function() {
    uni.getEnv(function(res) {
        console.log('当前环境:' + JSON.stringify(res));
    });
});

注意!!!
1、如果H5端是用引入vue方式写的,触发方法一定要写在new Vue的外面,原因我也不太清楚,我当时将触发事件写到mounted中根本不执行,放到外面才执行了。
2、触发方法成功执行后,你不必非得在事件里面调用uni的方法,在别的地方也行,vue中也是可以的。不过你可以在触发事件的回调里调用uni的方法来判断触发方法是否成功执行了没。

三、调用uni的路径跳转方法
然后在需要点击跳转的页面执行JSSDK提供的接口返回小程序

//返回小程序tabBar页面
jWeixin.miniProgram.switchTab({
	url: '/pages/index/index'
})
//返回到小程序非tabBar页面
jWeixin.miniProgram.navigateTo({
	url: '/pages/index/index'
})

你可能感兴趣的:(uni-app)