• 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();
        }
      }
  • 相关阅读:
    eclipse开发首选项
    html中怎么跨域访问
    如何自定义标签
    eclipse开发首选项
    eclipse开发一个文件向导
    eclipse开发一个文件向导
    JavaScript 操作IE菜单
    html中怎么跨域访问
    如何在没有安装 Python 的机器上运行 Python 程序
    Openstack Keystone V3 利用 curl 命令获取 token
  • 原文地址:https://www.cnblogs.com/jervy/p/11946230.html
Copyright © 2020-2023  润新知