微信分享JS-SDK

时间 2019-11-20

标签微信分享 sdk 栏目 JavaScript 繁體版

原文原文链接

微信JS-SDK,提供给开发者的基于微信内的网页开发工具包后端

使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时能够直接使用微信分享、扫一扫、卡券、支付等微信特有的能力api

使用步骤

一、绑定域名

微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”浏览器

二、引入JS文件

在须要调用JS接口的页面引入以下JS文件 http://res.wx.qq.com/open/js/jweixin-1.4.0.js安全

三、经过config接口注入权限验证配置

全部须要使用JS-SDK的页面必须先注入配置信息，不然将没法调用微信

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

四、经过ready接口处理成功验证

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

五、经过error接口处理失败验证

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

六、先检查是否为微信浏览器

var isWeixin = function () {
    //判断是不是微信
    var ua = navigator.userAgent.toLowerCase();
    return ua.match(/MicroMessenger/i) == "micromessenger";
  };

若是是微信，则请求后端接口获取签名并配置configapp

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

微信分享

原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃
最新接口为户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、updateTimelineShareData 接口微信公众平台

自定义“分享给朋友”及“分享到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 () {
          // 设置成功
        }
});