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

0.034字数 359阅读 9393

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说明文档

推荐阅读更多精彩内容