微信公众号开发之网页授权

327 阅读1分钟

公众号网页开发,首先需要授权。具体的可以查看微信公众号授权开发

授权方式有两种: 

 (1)静默授权。scope:snsapi_base 

 (2)非静默授权。scope:snsapi_userinfo  

下面是我在开发项目中使用的流程:【项目中使用的是非静默授权】 

首先:重定向是后端那边完成的,前端这边不需要做任何处理,只需要得到重定向过来链接里面的参数即可。 


这样做可以省去很多不必要的麻烦。

部分相关代码如下:

const config = {
  USERhttpURL: 'xxx',
  nurl: 'ddd.do?',   // 重定向的地址
 
  // 网络请求中
  ajaxIng(url, data, method, resolve, sessionVal) {
    data.session = sessionVal;
    $.ajax({
      type: method,
      url: config.USERhttpURL + url,
      contentType: 'application/x-www-form-urlencoded;charset=utf-8',
      data: data,
      dataType: "json",
      success: res => {
        console.log(url + '返回的数据:', res);
        if (res.success) {
          resolve(res); // 成功
        }
      }
    })
  },
  // 封装数据请求
  /**
   * url   请求的api               必传
   * data  请求参数{}              非必传
   * method  请求方法  get、post   非必传
   */
  RequestData: (url, data = {}, method = 'post', isSession = true) => {
    return new Promise((resolve, reject) => {
      config.getSession().then(sessionVal => {
 
        if (config.getCookie('userSession')) { // 个人中心
          config.ajaxIng(url, data, method, resolve, sessionVal);
        }
      })
    })
  },
  /*
   * 获取session
   */
  getSession: function() {
    return new Promise(res_session => {
      if (config.paramsAnalysis(window.location.href).from) { // 分享的
        console.log('分享链接', config.paramsAnalysis(window.location.href))
        var sessionUrl = config.paramsAnalysis(window.location.href).session;
        if (config.getCookie('userSession') != sessionUrl) {
          window.location.replace(config.nurl);
        }
      } else { // 不是分享的,从链接里面获取参数   链接里面的session 用于后端对比,sessionReq用于接口请求
        if (config.paramsAnalysis(window.location.href).session) {
          var sessionUrl = config.paramsAnalysis(window.location.href).session;
          var sessionReq = config.paramsAnalysis(window.location.href).sessionReq;
          config.setCookie('userSession', sessionReq)   // sessionReq用户接口请求
          config.setCookie('session',sessionUrl)   // session 用于后端对比
          res_session(sessionReq) // session
        } else {
          if (config.getCookie('userSession')) {
            res_session(config.getCookie('userSession'))
          } else {
            window.location.replace(conifg.nurl);
          }
        }
      }
    })
  },
  // 设置cookie
  setCookie: function(name, value) {
    var Days = 2;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
  },
  // 读取cookie
  getCookie: function(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
      return unescape(arr[2]);
    else
      return null;
  },
  //删除cookie
  delCookie: function(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null)
      document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  },
 
  // 参数解析
  paramsAnalysis: function(url) {
    if (url.indexOf('#') != -1) {
      url = url.replace(/\#\//ig, '')
    }
    console.log('当前页面的url', url)
    var params = {};
    var urls = url.split("?");
    if (urls[1]) {
      var arr = urls[1].split("&");
      for (var i = 0, l = arr.length; i < l; i++) {
        var a = arr[i].split("=");
        params[a[0]] = a[1];
      }
      return params;
    } else {
      return urls[0]
    }
  }
}

更多内容,可以关注博客