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

最近要做一个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,在这条不归路上永不停歇,??,痛并快乐着

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

上一篇:阿里云如何基于标准 K8s 打造边缘计算云原生基础设施


下一篇:zabbix 告警实践分享 一键实现zabbix 电话、邮件、微信告警