前言介绍

微信官方提供分享方式：

1.普通公众号使用js-sdk

2.第三方平台代公众号使用js-sdk

官方文档说明地址：文档地址

微信js-sdk文档地址：文档地址

前期准备工作

1.配置js安全域名（必须）

因前端涉及多租户/多二级域名方案，因此需考虑配置安全域名方案，不能设置太多，因此考虑将校验文件放置主域名下，安全域名设置主域名即可类似于（www.xxxx.com）

A.普通公众号配置js安全域名，登录公众号后台-公众号设置（最多设置5个，一月5次保存）

B.使用三方平台代公众号，配置安全域名入口，三方应用-选中对应的公众平台-详情- 选择开发资料-对应公众号开发域名（为js安全域名，最多设置3个，一月3次保存）

2.获取公众号相关配置信息

2.后端需要按照上面其中一种方式，通过前端传参（必须为当前页面URL，微信分享时会校验配置安全域名和后端生成签名等信息是否一致，否则分享功能无效），接口需返回以下信息

参数：url （单页应用不包含#后面的，有#需做特殊处理，处理方式URL截取#前面的参数）

appid: 公众号appid

Timestamp：当前时间戳

nonceStr：参与签名的随机字符串

signature：通过access_token和jsapi_ticket票据生成

3.前端项目引入js-sdk

获取到返回参数，通过config接口注入权限验证配置，通过校验则会返回接口list（建议使用微信开发者工具调试）使用微信开发者工具调试微信分享及相关api时需注意要设置host映射域名，具体方法如下：

例如：安全域名-test.xxx.com

Host文件插入以下内容

127.0.0.1 test.xxx.com

window文件路径：C:\Windows\System32\drivers\etc

Mac使用命令操作插入：sudo vi /etc/hosts

4.前端封装hooks使用

export const useWxShare = () => {
  let initConfig: () => void = () => {}
  let setShareInfo: (val: ShareInfo) => void = () => {}

  // 初始化
  initConfig = async () => {
    // 接口请求
    const configInfo: ConfigInfo = { appId, timestamp, nonceStr, signature }
    return new Promise((resolve) => {
      wx.config({
        debug: false,
        appId: configInfo.appId,
        timestamp: configInfo.timestamp,
        nonceStr: configInfo.nonceStr,
        signature: configInfo.signature,
        jsApiList: [
          'updateAppMessageShareData',
          'updateTimelineShareData',
        ],
        openTagList: [],
      })
      wx.ready(function() {
        resolve()
      })
    })
  }
  setShareInfo = async (shareData: ShareInfo) => {
    await initConfig()
    // 自定义“分享给朋友”及“分享到QQ”
    wx.updateAppMessageShareData({
      title: shareData.title, // 分享标题
      desc: shareData.desc, // 分享描述
      link: shareData.link, // 分享链接
      imgUrl: shareData.shareImg, // 分享图标
    })
    // 自定义“分享到朋友圈”及“分享到QQ空间”
    wx.updateTimelineShareData({
      title: shareData.title, // 分享标题
      link: shareData.link, // 分享链接
      imgUrl: shareData.shareImg, // 分享图标
    })
  }
  return {
    setShareInfo
  }
}
// 使用方式-设置分享信息
useWxShare.setShareInfo()

常见错误：

Invalid signature 签名错误，前端url参数和后端生成签名都需排查

Invalid url domain 域名与使用的appid没有绑定

分享未实现卡片样式排查：

1.开启debug，打印配置是否成功

2.是否满足场景需求：微信场景说明

developers.weixin.qq.com/community/d…

微信分享全方案解析（附代码）