应用场景:小程序webview加载一个h5广告页,倒计时结束或者点击跳过按钮,跳转指定小程序某个页面(如首页)
第一步:H5页面引入小程序微信sdk
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
第二步:
<script>
function toEnter() {
//getEnv获取环境
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
//如果当前是小程序环境
wx.miniProgram.navigateTo({
url: "../home/home",
});
}
})
}
</script>
第三步:小程序新建一个页面调用webview组件(暂时用ip地址测试,上线请配置业务域名等信息)
<web-view src="http://192.168.1.130:9001"></web-view>
h5跳转小程序就是这么简单,但有一点要注意,那就是h5页面跳转小程序页面路径得是相对路径。
错误示例:
wx.miniProgram.navigateTo({
url: "pages/home/home",
});
正确示例:
wx.miniProgram.navigateTo({
url: "../home/home",
});
PS:作为一个小白,被这块坑了一天才发现问题所在,只有相对路径才会跳转成功,绝对路径是不会跳转的。