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>
  • 10
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值