项目中需要从一个微信公众号得页面按钮跳转到另一个小程序首页。目前亲测有效有2种方案如下
方案一(此种方式最简单直接,不需要配置各种config参数,一个链接搞定):
1、在跳转方的小程序平台上配置一个URL Scheme,配置好要唤起的地址,根据官网提供的流程生成链接如下(appid就是要跳转小程序的Appid;path就是你配置好要跳转的URL Scheme):weixin://dl/business/appid=wx71234567777ffd45&path=pages/index/index&query=&env_version=release
官网参考链接:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
2、上面配置好后在代码里写好点击事件直接location.href跳转即可。
方案二(使用wx-open-launch-weapp标签跳转):
前言,使用此标签跳转需要配置公众号的IP白名单,需要在当前h5代码存放的服务器上配置appsetting参数,需要在vue页面中请求接口获取wx.config的timestamp、nonceStr、signature;注意这里的参数获取最好通过接口返回,否则本地配置发送到正式环境测试时,会报错signature不合符要求。
1、服务器上的配置参数如下图圈出的部分(登录微信公众号找到对应的参数放进来):
2、vue页面初始化时获取到wx.config的参数。
getShopWxConfig() {
let urlParam = window.location.href;//.split("#")[0]
this.$api.user.GetWXConfig(urlParam)
.then( res => {
let resData = JSON.stringify(res);//此处不需要反序列化,下面参数直接res.取值即可
wx.config({
debug: false, // 验证结果弹窗控制(成功或者失败)
appId: "wxaff27***********", // 必填,微信公众号appid
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature,// 必填,签名
jsApiList: ["onMenuShareAppMessage"], // 必填,如果只是为了跳转小程序,随便填个值都行
openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
});
wx.ready(function() {
//config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
// alert("ceshi"+resData);
});
wx.error(function(res) {
// console.log('res',res);
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
})
.catch( err => {
Toast(err);
})
},
3、使用wx-open-launch-weapp来跳转,标签内的样式自行定义即可,注意:标签内的样式动态的不能解析。
完成这几步就可以开心的跳转了。
还有一种方案,测试未能正常跳转,如有使用此种方案能跳转的,欢迎留言指教。
增加click事件,使用wx.miniProgram.navigateTo跳转。
// wx.miniProgram.navigateTo({
// appId: 'wx42f1*******',//要跳转的小程序的AppID
// path: 'pages/home/***',//要跳转的页面路径
// extraData: {
// // 传递的参数
// },
// success(res) {
// // 成功回调
// let resD = JSON.stringify(res);
// alert(resD+'sucessbug')
// console.log(resD)
// },
// fail(res) {
// let resD = JSON.stringify(res);
// // 失败回调
// alert("failddd"+resD)
// alert(resD)
// console.log(resD)
// }
// });