uniapp 获取微信网页授权并且实现微信公众号跳转小程序_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`
);
1
2
3

截取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;
			},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

appid是公众号的唯一标识。
scope是授权的形式，分为snsapi_userinfo，非静默授权和snsapi_base静默授权。
非静默授权需要用户手动同意，然后才能回到回调页面，静默授权是自动跳转到回调页。
redirect_uri是授权返回时的路径，这里面有code。

正常应该使用redirect_uri来获取access_token，但是我们公司这一步由后端来实现所以在这里省略。

二、微信公众号跳转小程序

1、引入微信js-sdk

npm install jweixin-module --save  
1

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);
		})
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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>
1
2
3
4
5
6
7
8
9
10
11
12
13