不同场景下的小程序跳转
1、小程序原生页面之间的互相跳转
wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack
具体跳转方式可查看官方文档--https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
2、同一小程序内嵌H5页面和小程序原生页面之间跳转
内嵌H5跳转小程序原生页面
wx.miniProgram.navigateTo({
url: '/page/index/index?id=' + id + '&name=' + name
})
小程序原生页面跳转内嵌H5
跳转方式同第一种情况，先使用小程序原生页面的跳转方式跳转到webview页面，
跳转时携带需要内嵌的H5页面地址，将其绑定在webview上即可
例如：
原生页面：
wx.navigateTo({
url: `/page/webView/webView?pageUrl=${pageUrl}`
})
小程序webView页面
<view>
<web-view :src="pageUrl" @message="message"></web-view>
</view>
message(e) {}//接收web-view传递的参数
3、小程序A跳转到小程序B
//（1）在小程序A的原生页面跳转小程序B
wx.navigateToMiniProgram({
appId: appId,//appId
path: href,//需要跳转的页面地址
extraData: {},
envVersion: 'trial',//环境
success() {},
fail(){}
})
//（2）在小程序A的内嵌H5页面跳转小程序B
// 先从H5页面跳转至小程序A的原生页面之后操作方式同上
// 跳转成功后，需手动回退，否则返回时会停留在中转页面
wx.navigateToMiniProgram({
appId: appId,
path: href,
extraData: {},
envVersion: 'trial',
success(res) {
let pages = getCurrentPages().length-1;
wx.navigateBack({
delta:pages
});
// 打开成功
},
fail(){
wx.navigateBack();
}
})
4、小程序A的分享页面（微信浏览器打开），跳转至小程序B
html部分
<div class="parentBox">
<img :src="图片路径" />
<wx-open-launch-weapp
id="launch-btn"
:username="原始id"
:path="页面具体路径"
>
<script type="text/wxtag-template">
<style>
.linkBox {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class="linkBox"></div>
</script>
</wx-open-launch-weapp>
</div>
css部分
<style>
.parentBox {
overflow: hidden;
position: relative;
}
#launch-btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
overflow: hidden;
}
</style>
js部分
<script>
created() {
const scriptNode = document.createElement('script');
scriptNode.type = 'text/javascript';
scriptNode.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
scriptNode.onload = this.getjssdk
document.body.appendChild(scriptNode);
}
getjssdk() {
var _this = this
let params = {
url: window.location.href.split('#')[0]//当前地址
}
// 获取签名等
axios({
type: 'get',
url: '后台接口地址',
params: params
})
.then((data) => {
if(data) {
var responseData = JSON.parse(data)
var noncestr = responseData.noncestr;
var signature = responseData.signature;
var timestamp = responseData.timestamp;
var appid = responseData.appid;
wx.config({
debug: true,
appId: appid,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: [
"checkJsApi",
"showAllNonBaseMenuItem",
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone"
],
openTagList:['wx-open-launch-weapp']
});
}
})
}
</script>
