H5集成微信登录链入微信公众号

为响应轻应用模块的设计思路，为原有系统更方便快捷的集成入微信生态，编写接入微信公众号的用户体系的操作流程：

1. 准备工作

公众号信息（AppId，AppSecret）；绑定为公众号的开发者

2. 操作说明

• 配置项

  将AppId写到自己项目的Config文件中

• 全局引入

  在项目的全局入口地方，加入代码逻辑[官方集成文档]，逻辑如下：

  1. 第一步：用户同意授权，获取code
  2. 第二步：通过 code 换取网页授权access_token
  3. 第三步：刷新access_token（如果需要）
  4. 第四步：拉取用户信息(需 scope 为 snsapi_userinfo)

具体的代码片段在最下方，需要自己做适配性改造。

3. 集成后验证

将打包好的包放到测试服（需后端配置nginx），用ADS或手机微信浏览器打开

/**
 * 处理Code
 */
handleCode: function () {
  var _this = this;
  console.log("检测是否微信浏览器，是否有session")
  // 如果是微信浏览器 并且storage没有user信息
  if (this.Util.isWeiXin() && !sessionStorage.getItem("wxInfo")) {
    // Url参数
    var urlData = this.Util.getParams(location.href);
    console.log("UrlParams", urlData)
    if (!urlData["code"]) {
      console.log("url no has code")
      // 参数中没有Code
      this.jumpWxAuth()
    } else {
      // 参数中有Code
      this.getLoginInfo()
    }
  } else {
    console.log('login， get index data')
  }
},

/**
 * 跳转到授权地址
 */
jumpWxAuth: function(){
  var state = Date.parse(new Date(new Date().getTime() + ((new Date().getTimezoneOffset() / 60) + 8) * 3600 * 1000).toString());
  var url =
    "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
    config.APPID +
    "&redirect_uri=" +
    encodeURIComponent(location.href) +
    "&response_type=code&scope=snsapi_userinfo&state=" +
    state +
    "#wechat_redirect";
  window.location.href = url;
}
/**
 * 获取登录信息
 * code {String} 微信Code
 */
getLoginInfo: function(code){
  console.log("has code", code)
  this.Http.get("/api/home/login", {
    code: code,
  }).then((res) => {
    console.log("codelogin function res", res)
    if (res.code == 1) {
      sessionStorage.setItem("wxInfo", JSON.stringify(res.data));
      window.location.href =
        location.origin + location.pathname + location.hash;
    } else {
      this.$Message.error(res.msg);
    }
  });
}
/**
   * @description 判断是不是微信浏览器
   * @param void
   * @returns void
   */
  isWeiXin: () => {
    var ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i)) {
      if (ua.match(/MicroMessenger/i)[0] === 'micromessenger') {
        return true
      } else {
        return false
      }
    } else {
      return false
    }
  },

微信公众号自定义分享功能

需求：不管哪个页面，分享给用户，打开之后都是首页

1. 在微信公众平台，公众号设置 -> 功能设置 -> 配置业务域名、js接口安全域名、网页授权域名。
2. 开发文档参考 JS-SDK说明文档
3. 开发遇到报错，签名不正确的情况
4. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分
5. 传参注意，需要前端 encodeURIComponent 转码，后端 解码

// APP.vue
// 如果是微信浏览器 并且storage没有user信息
if (isWeiXin() && !uni.getStorageSync('openId')) {
    // Url参数
    const code = getQueryString('code');
    console.log(code);
    if (!code) {
        this.jumpWxAuth()
    } else {
        this.$gm.userDetails({ code }).then(res => {
            console.log(res);
            uni.setStorageSync('openId', res.data.openId);
            // 通过code拿到openId之后重定向
            window.location.href = 
                window.location.origin + window.location.pathname + window.location.hash
        })
    }
} else {
    console.log('login， get index data')
}

// 需要使用分享的页面调用
setTimeout(() => {
    const url = location.href.split('#')[0];
    this.share({
        title: '运工评选',
        desc: '“2023年度诚信工会会员让利店评选”活动正在进行！',
        img:'https://weixindev.shanxigh.com/file/upload/2023/10-11/a267c7a086f8426b91024fcc287ea197.png' }, url);
}, 1000)

//在需要自定义分享的页面中调用  
share(data, url) {
    if (!this.isWechat()) {
        return;
    }
    // 每次都需要重新初始化配置，才可以进行分享  
    this.initJssdkShare(function(signData) {
        jweixin.ready(function() {
            var shareData = {
                title: data.title || '',
                desc: data.desc || '',
                link: url,
                imgUrl: data.img || '',
                success: function(res) {
                    // 分享后的一些操作,比如分享统计等等

                },
                cancel: function(res) {}
            };
            console.log(shareData);
            //分享给朋友接口  
            jweixin.updateAppMessageShareData(shareData);
            //分享到朋友圈接口  
            jweixin.updateTimelineShareData(shareData);
        });
        jweixin.error(function(res) {
            console.log(res);
        });
    }, url);
},
//初始化sdk配置  
    initJssdkShare( callback, url) {
        uni.request({
            url: this.$serverurlapi + '/front/getSignature',
            method: 'post',
            data: {
                page: encodeURIComponent(url)
            },
            success: (res) => {
                console.log(res)
                if (res) {
                    let result = res.data.data;
                    jweixin.config({
                        debug: false,
                        appId: result.appId,
                        timestamp: result.timestamp,
                        nonceStr: result.nonceStr,
                        signature: result.signature,
                        jsApiList: [
                            "onMenuShareAppMessage",
                            "onMenuShareTimeline",
                            'updateTimelineShareData',
                            'updateAppMessageShareData'
                        ]
                    });
                    //配置完成后，再执行分享等功能  
                    if (callback) {
                        callback(result);
                    }
                }
            },
            fail: (err) => {
                console.log(err);
            }
        });

    },