微信网页分享JS-SDK使用步骤

ps: 公众号必须开通微信认证，否则无法自定义分享

1.公众平台

绑定域名

登录微信公众平台，进入“公众号设置”-“功能设置”,然后填写“JS接口安全域名”。不用加http://只需要写域名即可，例：www.abc.com（也可以是一个路径）。

2.服务器

然后在微信公众平台下载域名验证文件MP_verify_xxx.txt文件，放到服务器的目录下（如果填写的是域名则放到服务器根目录下，例如：www.abc.com/MP_verify_xxx.txt，如果是路径就放到路径目录下，例：www.abc.com/xxx/MP_verify_xxx.txt）否则会报错：无法访问xxx指向的web服务器（或虚拟主机）的目录，请检查网络设置

报错

3.前端页面

引入js文件

在需要调用js接口的页面引入js文件http://res.wx.qq.com/open/js/jweixin-1.2.0.js，如果你的服务器是https请求的话请引入https://res.wx.qq.com/open/js/jweixin-1.2.0.js

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

所有需要使用JS-SDK的页面都需要先注入配置信息，下面是代码：

var config = data.payload;
//config为调用后台接口返回的数据,出于安全考虑，开发者必须在服务器端实现签名的逻辑。
wx.config({
  debug: false,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: config.appId, // 必填，公众号的唯一标识
  timestamp: parseInt(config.timestamp), // 必填，生成签名的时间戳
  nonceStr: config.nonce, //必填， 生成签名的随机串
  signature: config.signature, //必填，签名
  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'] //必填， JS接口列表，这里只填写了分享需要的接口
 });

通过ready接口处理成功验证

wx.ready(function () {
  wx_share('分享标题',分享地址,分享图标,'分享描述');
});

function wx_share(title, link, imgurl, desc) {
  //朋友圈
  wx.onMenuShareTimeline({
    title: title, // 分享标题
    link: link, // 分享链接
    imgUrl: imgurl, // 分享图标
    success: function() {
      // 用户确认分享后执行的回调函数
    },
    cancel: function() {
      // 用户取消分享后执行的回调函数
    }
  });
  //微信好友
  wx.onMenuShareAppMessage({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgurl, // 分享图标
    type: 'link', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function() {
      // 用户确认分享后执行的回调函数
    },
    cancel: function() {
      // 用户取消分享后执行的回调函数
    }
  });

  //qq
  wx.onMenuShareQQ({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgurl, // 分享图标
    success: function() {
      // 用户确认分享后执行的回调函数
    },
    cancel: function() {
      // 用户取消分享后执行的回调函数
    }
  });
  // qq空间
  wx.onMenuShareQZone({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgurl, // 分享图标
    success: function() {
      // 用户确认分享后执行的回调函数
    },
    cancel: function() {
      // 用户取消分享后执行的回调函数
    }
  });
}

通过error接口处理失败验证

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

最后

微信JS-SDK说明文档