uniapp 获取微信网页授权并且实现微信公众号跳转小程序

uniapp 获取微信网页授权并且实现微信公众号跳转小程序

• 一、获取网页授权
• • 1、申请测试号
  • 2、发起授权请求
  • 二、微信公众号跳转小程序
  • • 1、引入微信js-sdk
    • 2、通过config接口注入权限验证配置并申请所需开放标签
    • 3、开放标签

      一、获取网页授权

      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  
      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、开放标签
       
      		
      				.btn {
      					width: 100%;
      					font-size: 16px;css
      					color: rgb(0, 82, 217); 
      					margin:0 auto;
      				}
      				
      	确定