浅谈js-sdk的场景-微信分享

Posted 2020-12-11 goddess

最近要做一个h5活动页，产品大大想要通过一个按钮想要调起微信的分享，想法很美好，现在很骨感，然而微信早已废弃了这种诱导用户分享的方式，此事只能作罢，通过设置蒙层，引导用户，使用微信自带的分享
那么如何能设置分享给别人的链接里的缩略图以及title描述，此时，就要引出今天的主人公，weixin-js-sdk

开发准备工作

1. 首先有一个测试公众号和正式服务号

2. 在公众号里绑定安全域名，这个安全域名即应用sdk功能的前端部署域名

3. 调用后端接口，获取签名相关信息： appid，

4. 通过wx.config接口注入权限验证配置, 验证签名是否正确

5. wx.ready(function(){
   // 验证通过会调用ready里的回调
   });

6. wx.error(function(res) {
   // 如签名过期导致验证失败，具体错误信息可以打印出来
   })

7. 在微信开发者工具里有一个网页公众号，可以用来验证是否调用成功，并可以看到相应的log信息

安装weixin-js-sdk依赖

npm install weixin-js-sdk

微信sdk配置实现代码

/** 初始化微信环境,只需要在main.js中初始化一次就ok*/
const wx = require(‘weixin-js-sdk‘)
export function initWechat () {
  return new Promise((resolve) => {
    // 判断当前所处环境
    const env = getEnv()
    if (env === ‘wechat‘) {
      // 防止多次调用initwechat，此时有可能还在等待接口的返回
      if (window.wxConfigQuerying) {
        if (!window.wxConfigCallbacks) window.wxConfigCallbacks = []
        window.wxConfigCallbacks.push(resolve)
      } else {
        window.wxConfigQuerying = true
        net.getWXConfig({ // 后端接口
          // 微信中不能有特殊符号，这里是去除特殊符号#
          paramUrl: window.location.href.split(‘#‘)[0]
        }).then((res) => {
          if (res.data.code === 0) {
            const { data } = res.data
            const { appId, nonceStr, signature, timestamp } = data
            const cfg = {
              debug: false, // 为true，则会弹出配置相关日志信息
              appId,
              timestamp,
              nonceStr,
              signature,
              jsApiList: [‘updateAppMessageShareData‘, ‘updateTimelineShareData‘], // 需要使用的JS接口列表，分享好友，分享朋友圈，会在js中调用这两个微信开发配置，1.4已经废弃之前的分享
            }
            wx.config(cfg)
            wx.ready(() => {
              window.wxConfigQuerying = false
              resolve()
              window.wxConfigCallbacks.forEach((f) => {
                f()
              })
              delete window.wxConfigCallbacks
            })
            wx.error(function(res){
              // eslint-disable-next-line no-console
              console.log(res)
            });
          }
        })
      }
    } else {
      resolve()
    }
  })
}

// 调用微信的sdk方法
export function updateShareConfig (params) {
    wx.updateAppMessageShareData({ 
      title: params.title,
      desc: params.desc,
      link: params.link,
      imgUrl: params.imgUrl,
      success: function () {
        // 设置成功
      }
    })
    wx.updateTimelineShareData({ 
      title: params.title,
      link: params.link,
      imgUrl: params.imgUrl,
      success () {
        // 设置成功
      }
    })
}

如何调用分享朋友和朋友圈的配置

// eg：vue项目
// 在mounted 钩子内可以直接调用updateShareConfig（params）这个方法，去调用分享js接口，而不用再一次initWebchat，一定要记得，调用要在wx.ready完成之后进行

开发过程中的踩坑记录

1.分享出去的图片不显示

  * 若验签正常，则是图片尺寸的问题， 尽量不要超过200 * 200
  * 若验签正常，图片地址不是安全域名下的静态资源图片，且是https协议的，此时需改为http，否之也不能正常展示

2. 分享不显示desc和图片,后端返回的签名不正确

  > 部署前端服务域名不在安全域名之列，由于微信自身安全性限制，一个服务号最多添加3个安全域名，此时需要找一个安全域名，在安全域名配置一个子路径，让这个子路径反向代理到真正的前端服务域名
  * 坑1： 前端路由中必须要设置路由前缀和安全域名的子路径保持一致，否则，无法正确打到正在的域名
        即： 安全域名  abc.lanti.com    前端服务域名 activity-h5.haishui.com
        ```
              // childpath 是设置的子路径
               abc.lanti.com/childpath/home 代理  activity-h5.haishui.com/childpath/home
               
        ```
        由于自身一开始想的方案和运维给出的实现方案不一致，导致坑了很久
        我原先的方案是：abc.lanti.com/childpath/xxx     代理到  activity-h5.haishui.com/xxx  
        代理的过程就把路径代理剔除掉，然后想的很美好，结果很悲催，被坑了很久，真是想起来都觉得心痛
  * 坑2： 通过反向代理后，window.location.origin 已经是代理后的域名，导致发送给后端安全域名错误，验签失败

真是一波三折，写bug，改bug，在这条不归路上永不停歇，??，痛并快乐着