微信环境h5跳转小程序页面:
1、判断环境
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
// 小程序中打开h5跳转小程序页面
wx.miniProgram.switchTab({
url: "/pages/personal/index",
});
} else {
// 非小程序
}
});
} else {
console.log("不在微信里");
}
小程序中h5跳转小程序页面:
微信原文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
2、浏览器环境跳转小程序
2.1 引入js-sdk注入权限
微信原文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#11
created() {
this.setJsTicket();
},
mounted() {
// 打开小程序
var btn = document.getElementById("launch-btn");
btn.addEventListener("launch", function (e) {
console.log("success", e);
});
btn.addEventListener("error", function (e) {
alert("小程序打开失败");
console.log("fail", e.detail);
});
},
methods:{
setJsTicket() {
axios
.get(接口, {
参数
})
.then((res) => {
window.wx.config({
debug: false,
appId: res.data[0],
timestamp: res.data[1],
nonceStr: res.data[4],
signature: res.data[3],
jsApiList: ["wx-open-launch-weapp"],
openTagList: ["wx-open-launch-weapp"],
});
});
},
}
2.2 小程序开放标签
微信原文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
<wx-open-launch-weapp
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
"
id="launch-btn"
username="gh_aa5bce5cb179"
path="pages/personal/index"
>
<script type="text/wxtag-template">
<style>.btn{position:absolute; top: 0; left: 0; width: 100%; height: 100%;opacity:0}</style>
<div class="btn">去实名</div>
</script>
</wx-open-launch-weapp>
2.3 最终效果部署上服务器才会显示
出现这个图片就是注入成功: