zoukankan      html  css  js  c++  java
  • vue:h5实现微信授权

    先在main.js中设置全局的项目地址 方便在其他页面调用

    Vue.prototype.globalVerb={

      openMpOpenPlatformHost:"http://afopen.afarsoft.com"

    }

    1、先调用本地接口获取到后端提供的初始用户信息

    getInfo() {
          This.http.get(“接口地址xxx”,{
    params:{...})
    .then(res => {
            console.log(res.Result);
            if (res.Result.Data) {
              this.appId = res.Result.Data.MpAppId;
              this.img = res.Result.Data.MpHeadImg;
              this.NickName = res.Result.Data.MpNickName;
              this.UserName = res.Result.Data.UserName;
            }
          });
        },

    、授权页面点击按钮调取授权接口,按照如下格式拼接url

    http://test.crm.afarsoft.com/WeChatSynchronization?nickname=1&headimg=https%3A%2F%2Fss1.baidu.com%2F6ONXsjip0QIZ8tyhnq%2Fit%2Fu%3D1750833952,2529388352%26fm%3D58%26bpow%3D380%26bpoh%3D380&appid=3&username=4&qrcode=https%3A%2F%2Fss1.baidu.com%2F6ONXsjip0QIZ8tyhnq%2Fit%2Fu%3D1750833952,2529388352%26fm%3D58%26bpow%3D380%26bpoh%3D380

    btn() {
         var host = request.defaults.baseURL;
                  if(/^//g.test(host)){
                    host=window.location.protocol + "//" + window.location.host+host;
                  }
          var notifyUrl = encodeURIComponent(
            this.baseURL + "/api/mp/mpeventhandler"
        //baseUrl 在http.js里,所以要在该授权页面引入http
          );
          var returnUrl = encodeURIComponent(
            window.location.protocol +
              "//" +
              window.location.host +
              this.$route.fullPath
          );
          window.location =
            this.globalVerb.openMpOpenPlatformHost +
            "/home/index?returnurl=" +
            returnUrl +
            "&notifyurl=" +
            notifyUrl +
            "&type=mp";
        }

    3、更新用户信息

    updateInfo(query) {
          this.appId = query.appid;
          this.img = query.headimg;
          this.NickName = query.nickname;
          this.UserName = query.username;
          this.qrCode = query.qrcode;
          This.http.post(“接口地址xxx”,{
            MpAppId: this.appId,
            MpNickName: this.NickName,
            MpHeadImg: this.img,
            UserName: this.UserName,
            MpQrcode: this.qrCode
          })
    .then(res => {
            console.log(res.Result);
          });
        },

    4、判断状态

     created() {
        var query = this.$router.currentRoute.query;
        if (query.nickname) {
          this.updateInfo(query);
        } else {
          this.getInfo();
        }
      }
  • 相关阅读:
    计蒜客模拟赛D2T2 蒜头君的排序:区间逆序对(移动端点) + 树状数组
    计蒜客模拟赛D2T1 蒜头君的兔子:矩阵快速幂
    计蒜客模拟赛D1T2 蒜头君的树:树上节点之间最短距离和
    计蒜客模拟赛D1T1 蒜头君打地鼠:矩阵旋转+二维前缀和
    Cubieboard安装系统
    awk速查手册
    sed速查手册
    常用正则表达
    MySQL索引小记
    jQuery中attr和prop的区别
  • 原文地址:https://www.cnblogs.com/jervy/p/11946230.html
Copyright © 2011-2022 走看看