侧边栏

接入微信分享

目录

JSSDK使用步骤

接入准备：拥有一个认证订阅号/认证服务号，如果还没有，请前往微信公众平台注册并通过微信认证。

步骤一：绑定域名

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

建议填写一级域名，则该域名下的所有子域名均在安全域名下。

步骤二：引入JS文件

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

请注意，如果你的页面启用了https，务必引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js，否则将无法在iOS9.0以上系统中成功使用JSSDK

步骤三：配置wx.config

wx.config({
        appId: "wxdxxxxxxxxxxxx",  //必填,公众号的唯一标识
        timestamp: "",             //必填,生成签名的时间戳
        nonceStr:  "",             //必填,生成签名的随机串
        signature: "",             //必填,签名,见 http://t.cn/RL24Fgw
        jsApiList: [
            "getNetworkType",
            "getLocation",
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo",
            "onMenuShareQZone"  //如业务需求，可继续加入其他微信JS接口
        ]
});

步骤四：配置wx.ready

请注意，wx.ready 依赖 tar.config 和 wx.config，请保证这两项配置在wx.ready之前完成。 

wx.ready(function () {
        var shareData64 = {
          title: "",                          //必填,分享标题
          desc: "",                         //选填,分享描述
          imgUrl: "",                       //选填,分享图片
          link: "http://www.xxx.com/…"   //必填,支持直接填写location.href
          success: function () {
              // 用户确认分享后执行的回调函数
          },
          cancel: function () {
               // 用户取消分享后执行的回调函数
          }
        };
    wx.onMenuShareAppMessage(tar.shapeShareAppMessage(shareData64));
    wx.onMenuShareTimeline(tar.shapeShareTimeline(shareData64));
});

常见错误及解决方法

  1. invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，如果使用了端口号，则配置的绑定域名也要加上端口号（一个appid可以绑定三个有效域名）。
  2. permission denied该公众号没有权限使用这个JSAPI，或者是调用的JSAPI没有传入config的jsApiList参数中（部分接口需要认证之后才能使用）。
  3. 在iOS和Android都无法分享（请确认公众号已经认证，只有认证的公众号才具有分享相关接口权限，如果确实已经认证，则要检查监听接口是否在wx.ready回调函数中触发）
  4. 服务上线之后无法获取jsapi_ticket，自己测试时没问题。（因为access_token和jsapi_ticket必须要在自己的服务器缓存，否则上线后会触发频率限制。请确保一定对token和ticket做缓存以减少2次服务器请求，不仅可以避免触发频率限制，还加快你们自己的服务速度。目前为了方便测试提供了1w的获取量，超过阀值后，服务将不再可用，请确保在服务上线前一定全局缓存access_token和jsapi_ticket，两者有效期均为7200秒，否则一旦上线触发频率限制，服务将不再可用）。
  5. 通过a链接(例如先通过微信授权登录)跳转到b链接，invalid signature签名失败（后台生成签名的链接为使用jssdk的当前链接，也就是跳转后的b链接，请不要用微信登录的授权链接进行签名计算，后台签名的url一定是使用jssdk的当前页面的完整url除去'#'部分）
  6. 出现config:fail错误（这是由于传入的config参数不全导致，请确保传入正确的appId、timestamp、nonceStr、signature和需要使用的jsApiList）
  7. 绑定父级域名，是否其子域名也是可用的（是的，合法的子域名在绑定父域名之后是完全支持的）
  8. 在iOS微信6.1版本中，分享的图片外链不显示，只能显示公众号页面内链的图片或者微信服务器的图片，已在6.2中修复
  9. 是否需要对低版本自己做兼容（jssdk都是兼容低版本的，不需要第三方自己额外做更多工作，但有的接口是6.0.2新引入的，只有新版才可调用）
  10. 目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题已在Android6.2中修复
  11. require subscribe错误说明你没有订阅该测试号，该错误仅测试号会出现
  12. ICP备案数据同步有一天延迟，所以请在第二日绑定
  13. invalid signature签名错误。建议按如下顺序检查：​
  • 确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
  • 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
  • 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s):'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
  • 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
  • 确保一定缓存access_token和jsapi_ticket。
  • 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

页面工具