辅助开发的文档和工具

微信 sdk 开发文档：developers.weixin.qq.com/doc/offiacc…

微信 JS 接口签名校验工具：mp.weixin.qq.com/debug/cgi-b…

申请一个微信公众号（服务号）

如果是企业的话，需要企业的一些营业执照等等去申请，并且每年要交 300 多大洋的服务费。

如何获取接口

步骤一：绑定域名

在公众号中把网页的域名绑定到微信公众号上（这个需要操作服务器绑定）。

步骤二：引入 JS 文件

可以使用官方文档中推荐的最新 JS 文件，这里使用的是 https://res.wx.qq.com/open/js/jweixin-1.4.0.js，并且把这个文件引入所需要的 js 文件中。

步骤三：通过config接口注入权限验证配置

通过 config 接口注入权限验证配置

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表，可以详见开发附录表
});

封装 signature

需要后端封装好 signature，传给前端。（调用微信的任何接口都需要使用公众号的 ID 以及 AppSecret，如果前端直接去生成 signature，将会暴露这两个重要的信息，这是不可行的）

获取 signature 需要步骤：

获取 access_token：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APP_ID&secret=APP_SECRET，这个 token 有效时间只有两个小时
获取 jsapi：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
获取到 jsapi，就可以看 signature 加密文档 ,可以使用校验小工具看看有没有算错
重点说明：第三点中用于计算 signature 的 url 必须是当前你要分享出去的 URL，所以这个 URL 应该是是动态去获取，而不只是网页的一个域名

处理成功验证与失败验证的接口

wx.ready(function(resutl) {...}) 处理成功验证
wx.error(function(error) {...}) 处理失败验证

敲黑板，划重点！！！

开发过程中遇到的一些坑，比如一直报 config invalid，刚开始总是想不通，为什么呢！！原来用于生成的 signature 的 URL 必须当前网页的链接，所以是需要是动态去获取的。结果我一直 hardcode 网站的域名，显然是错的。

当然还有一个坑！有些网页分享给微信系统（不论是朋友圈还是朋友），网页的 URL 会被带上微信的一些参数，所以这个时候也是要用到动态获取 URL 的机制

ajax 请求 signature

⚠️注意： 这里使用的是 ajax 请求，如果没有处理好异步操作，signature 将无法赋值给 config。

function requestSig() {
    const url = "YOUR_API_TO_FETCH_SIGNATURE";
    var res;
    $.ajax({
        url,
        type: "GET",
        async: false,
        success: function(result) {
            res =JSON.parse(result) 
        },
        error: function(error) {
            console.log('error')
        }
    })
    return res
}
    
async function getSig() {
    const resJSON = await requestSig()
    return resJSON
}
    
getSig().then(function(result) {
    wx.config({
        debug: true,
        appId: 'APPID',
        timestamp: result.timestamp,
        nonceStr: result.nonceStr,
        signature: result.signature,
        jsApiList: ['updateTimelineShareData']
    })
})

调用接口，自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容

// 以 updateTimelineShareData 为例，这个接口必须写在 config 中的 jsApiList

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
  wx.updateTimelineShareData({ 
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致，必填！
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

debug 模式

在 config 中，如果 debug 模式被开启的话，微信接口调用的时候，成功与否都会返回一条以接口命名，并带有调用状态的提示。在生产环境中把 debug 模式关闭即可。

Misc：因为本次需要分享的网页是搭建在 Discourse 上的一个论坛，没有后端程序，并且有很多的跨域请求被阻塞，或者是协议混用造成了各种开发不顺利，后端同学硬生生是写了一套后端程序绑在域名下，并且还要动态获取当前分享页面的 URL 后，生成 signature 返回给前端。太难惹😢

手把手教学「使用微信 SDK 自定义网页分享至朋友圈的头图、title 和链接」