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;csscolor: rgb(0, 82, 217); margin:0 auto;}确定