JSSDK 使用记录 - Githubissues

最近接触了移动端H5的项目，也学到了不少经验，主要总结下使用JSSDK做分享时遇到的坑。

活动线上地址：学科大闯关

喜马拉雅站内分享到微信

站内提供了相关的JSSDK文档相关说明，使用如下：

// shareData 为分享内容，数据结构同微信
const appShare = shareData => {
  window.ly.config({
    appId, // 必填，应用 appId
    apiList: ['util.share', 'nav.setMenu'] // 必填，需要使用的 jsapi 列表
  });

  // error 可能原因
  // 1. config 配置问题
  // 2. 使用本地 ip 访问
  window.ly.error(err => {
    alert(JSON.stringify(err));
  });

  window.ly.ready(() => {
  // 需要立即调用 native 能力的接口在这里初始化
    console.log('ly ready');

    window.ly.invokeApp('nav.setMenu', {
      items: [{ id: '1', icon: 'share', text: '分享' }],
      success: data => {
        // 方法执行成功的回调
        if (data.id === '1') {
          window.ly.invokeApp('util.share', {
            channel: ['weixin', 'weixinGroup'],
            ...shareData
          });
        }
      }
    });
  });
};

微信分享

微信官方文档介绍的很清楚了（概述 | 微信开放文档），下面简单介绍下使用，并说说遇到的坑：

const weixinShare = shareData => {
  let wxCheckResult = {};

  // 接口请求获取微信 jssdk 配置
  request
    .get(weixinConfigUrl)
    .then(data => {
      if (data.appId) {
        window.wx.config({
          debug: false,
          jsApiList: [
            'checkJsApi',
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareTimeline',
            'onMenuShareQZone'
          ],
          ...data
        });

        // 判断当前客户端版本是否支持指定 JS 接口
        window.wx.checkJsApi({
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
          success: res => {
            wxCheckResult = res.checkResult;
          }
        });

        window.wx.ready(() => {
          // 在用户可能点击分享按钮前就先调用
          console.log('wx ready');

          if (wxCheckResult && wxCheckResult.updateAppMessageShareData) {
            window.wx.updateAppMessageShareData(shareData);
            window.wx.updateTimelineShareData(shareData);
          } else {
            window.wx.onMenuShareAppMessage(shareData);
            window.wx.onMenuShareQQ(shareData);
            window.wx.onMenuShareWeibo(shareData);
            window.wx.onMenuShareTimeline(shareData);
            window.wx.onMenuShareQZone(shareData);
          }
        });

        window.wx.error(res => {
          console.log(res);
        });
      }
    })
    .catch(err => {
      console.log(err);
    });
};

在官方文档中有这样一段描述：所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用, 目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

在调用weixinShare方法时，只在应用入口处调用了一次，发现路由切换到其他页面时分享失效。上面描述中说SPA应用中应在每次url变化时进行调用，所以可以在每次路由变化时调用一次该方法来解决。

shuangmianxiaoQ / study-note

JSSDK 使用记录 #55

喜马拉雅站内分享到微信

微信分享