近日做了个vue h5跳转微信小程序的需求,随手记录一下,首先的准备工作要先做好,根据官方文档设置安全域名设置白名单引入js等等,一种是微信小程序环境下的,一种是微信浏览器下的,微信官方文档
弄完之后代码部分如下:需要先判断在什么环境
getWxEnv() {
let ua = navigator.userAgent.toLowerCase();
let that = this
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
that.isWeChat = 1 //1微信小程序 2微信浏览器 3不在微信
} else {
that.isWeChat = 2
}
})
} else {
that.isWeChat = 3
}
},
微信浏览器情况下:这里是样式部分,username是小程序原始id,path是要跳转的页面路径(后面要加.html) .open-launch-weapp-btn是样式部分
<wx-open-launch-weapp id="launch-btn" username="gh_e4cb5edfa6c4" path="pagesActivity/kjActivity/index.html">
<script type="text/wxtag-template">
<style>.open-launch-weapp-btn {
width: 234px;
border: none;
background: #ff4c5a;
color: #fff;
font-size: 16px;
font-weight: 600;
border-radius: 24px;
margin: 20px auto;
padding: 12px 0;
margin-left: 50%;
transform: translateX(-117px);
text-align: center; }</style>
<button class="open-launch-weapp-btn">跳转小程序</button>
</script>
</wx-open-launch-weapp>
以下是js部分:完成后如果一直弹窗提示的话要把config配置里边的debug改为false
this.signParams.url = window.location.href //获取域名
this.$api.post("/def/user/getWxTicketSign", this.signParams).then((res) => {//这里是通过后端接口获取wx.config的配置信息
if (res) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: res.appId, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature,// 必填,签名
jsApiList: ['onMenuShareTimeline'], // 必填,需要使用的JS接口列表 随便填
openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
let that_ = this
wx.ready(function () {
console.log("success");
});
wx.error(function () {
that_.$toast('跳转小程序失败')
});
} else {
this.$toast(res.msg)
}
});
微信小程序下:要绑定到点击事件上才有效哦
wx.miniProgram.navigateTo({
url: '/pagesActivity/kjActivity/index', //指定跳转至小程序页面的路径
success: function () {
console.log('success'); //页面跳转成功的回调函数
}
})