前言：工作、学习记录，不定期更新，想到啥写啥

本文注：写此片时，🐏的第一天，为非工作状态，下文所述，就不贴实际工作代码片段及开发者工具调试结果了，根据配置要点走，基本能规避大部分问题

jssdk包配置(使用步骤)

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

步骤一配置要点：

一般公众号会根据env环境的不同，申请多个测试账号，在配置对应的js接口安全域名时，需要确认好环境与你所要配置jssdk的代码环境是否相同

配置的js接口安全域名链接，一般为：window.location.origin

步骤二：引入 JS 文件

在需要调用 JS 接口的页面引入如下 JS 文件，（支持https）：res.wx.qq.com/open/js/jwe…

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

步骤二配置要点：

为保证项目的稳定性，一般来讲，尽量不要选择最新版本的js文件资源，降一个版本可以规避一些风险，此处推荐降版引用1.4版本：res.wx.qq.com/open/js/jwe…

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

所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用（同一个 url 仅需调用一次，对于变化 url 的SPA的web app可在每次 url 变化时进行调用,目前 Android 微信客户端不支持 pushState 的H5新特性，所以使用 pushState 来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

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

步骤三配置要点：

接口请求后端获取nonceStr、signature等参数时，需要讲页面的url参数传递过去，hash模式下 url = window.location.href.split("#")[0]，history模式下：url = window.location.href

对于自定义分享配置，我们在页面路由切换时，页面的url会产生变化，页面变化以后，会导致后一个页面引用jssdk的api时会报签名错误，此时，根本原因就是url变化时需要重新使用 wx.config 进行jssdk包的重新配置

根据env环境的不同，可以选择，非生产环境下将debug设置为true，开启jssdk调试模式

在jsApiList下声名需要使用的jssdk的api接口，若未在此声明，代码中引用，将会抛错

步骤四：通过 ready 接口处理成功验证

wx.ready(function(){
  // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
});

步骤四配置要点

每次使用api时，需要用wx.ready方法包裹在外层调用（url变化时，重新使用wx.config进行重新配置是大前提!!!）

步骤五：通过 error 接口处理失败验证

wx.error(function(res){
  // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
});

接下来我们就可以开始使用自定义分享的api了

自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

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

自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）

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

其余配置建议

自定义分享链接的调用可以封装到全局，或在路由守卫中进行调用，减少页面的引用，当然，如果是游戏或者活动页面需要定制分享的参数，可以放在当前页面/组件的路由守卫中进行配置，配置将会以页面/组件调用的为最高优先级

结束语

争取早日杨康不重阳

微信公众号h5开发——jssdk自定义分享配置