微信分享JS-SDK-白红宇

微信分享JS-SDK

阅读量：434 次

发布时间：2019-03-06

本文共 1780 字，大约阅读时间需要 5 分钟。

微信JS-SDK是一套为开发者提供基于微信内网页开发的工具包，旨在帮助开发者高效地使用手机系统功能，同时融入微信特有的功能如分享、扫一扫、卡券支付等。

使用步骤

1. 绑定域名

在微信公众平台进入“公众号设置”中的“功能设置”填写“JS接口安全域名”。该域名需与当前页面的JS安全域名一致。

2. 引入JS文件

在需要调用JS接口的页面中引入如下JS文件：

3. 注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。通过config接口进行权限验证配置：

wx.config({
  debug: true, // 开启调试模式
  appId: '', // 必填，公众号唯一标识
  timestamp: '', // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '', // 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

4. 处理成功验证

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

wx.ready(function() {
  // config信息验证后执行ready方法
  // 所有接口调用必须在config验证后执行
});

5. 处理失败验证

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

wx.error(function(res) {
  // 验证失败时执行error函数
  // 可以在这里更新签名或处理相关错误信息
});

6. 检查是否为微信浏览器

判断是否是微信：

var isWeixin = function() {
  var ua = navigator.userAgent.toLowerCase();
  return ua.match(/MicroMessenger/i) === "micromessenger";
};

如果是微信浏览器，则请求后端接口获取签名并配置config：

if (isWeixin()) {
  var url = location.href;
  $.post('/api/weixin/getSignpackage', { url: url }, function(data) {
    var option = JSON.parse(data);
    wx.config({
      appId: option.appId,
      timestamp: option.timestamp,
      nonceStr: option.nonceStr,
      signature: option.signature,
      jsApiList: []
    });
  });
}

微信分享

微信分享功能通过更新分享数据接口进行操作。原有的wx.onMenuShareTimeline等接口已废弃，建议使用新的接口：

wx.updateAppMessageShareData：用于自定义“分享给朋友”及“分享到QQ”按钮的分享内容（支持1.4.0及以上版本）。

wx.updateTimelineShareData：用于自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（支持1.4.0及以上版本）。

分享设置

需在用户点击分享按钮前先调用分享接口：

更新AppMessageShareData：

wx.updateAppMessageShareData({
  title: '', // 分享标题
  desc: '', // 分享描述
  link: '', // 分享链接，需与当前页面域名一致
  imgUrl: '', // 分享图标
  success: function() {}
});

更新TimelineShareData：

wx.updateTimelineShareData({
  title: '', // 分享标题
  link: '', // 分享链接，需与当前页面域名一致
  imgUrl: '', // 分享图标
  success: function() {}
});