uniapp 获取微信网页授权并且实现微信公众号跳转小程序
一、获取网页授权
1、申请测试号
配置网页授权地址
注意不需要加htpp!
2、发起授权请求
document.location.replace(
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${this.scope}&state=STATE#wechat_redirect`
);
截取url中的code
getUrlCode() {
// 截取url中的code方法
var url = location.href; //获取打开的公众号的路径
console.log(url);
let winUrl = url;
var theRequest = new Object();
if (url.indexOf('?') != -1) {
var str = url.substr(url.indexOf('?') + 1);
var strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
var items = strs[i].split('=');
theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
}
}
return theRequest;
},
appid是公众号的唯一标识。
scope是授权的形式,分为snsapi_userinfo,非静默授权和snsapi_base静默授权。
非静默授权需要用户手动同意,然后才能回到回调页面,静默授权是自动跳转到回调页。
redirect_uri是授权返回时的路径,这里面有code。
正常应该使用redirect_uri来获取access_token,但是我们公司这一步由后端来实现所以在这里省略。
二、微信公众号跳转小程序
1、引入微信js-sdk
npm install jweixin-module --save
2、通过config接口注入权限验证配置并申请所需开放标签
handlerwxConfig(url) {
wxConfig(url).then(r => {
wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来,
//若要查看传入的参数,可以在pc端打开,
//参数信息会通过log打出,仅在pc端时才会打印
debug: r.data.data.debug,
appId: r.data.data.appId, // 必填,公众号的唯一标识
timestamp: r.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: r.data.data.nonceStr, // 必填,生成签名的随机串
signature: r.data.data.signature, // 必填,签名
jsApiList: r.data.data.jsApiList, // 必填,需要使用的JS接口列表
// 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
openTagList: ['wx-open-launch-weapp']
});
wx.ready(() => {
console.log("ready");
})
wx.error((res1) => {
console.log(res1);
})
})
}
3、开放标签
<wx-open-launch-weapp id="launch-btn" appid="要跳转的小程序appid" :path="wxPath"
v-if="this.productId == 30">
<script type="text/wxtag-template">
<style>.btn {
width: 100%;
font-size: 16px;css
color: rgb(0, 82, 217);
margin:0 auto;
}
</style>
<button class="btn">确定</button>
</script>
</wx-open-launch-weapp>