nw-share

nw-share

分享组件，兼容漫画、蜗牛、阅读、lofter、云音乐、微信、易信和普通浏览器

LOFRER业务分享注意

• LOFTER域名因为不是163.com，不在微信分享的白名单中，所以LOFTER的网页分享必须先到服务端生成一些鉴权信息，示例如下：

{
    noncestr: "1MhzBSvy"
    signature: "a4c929f45d5538ae705eca4f9c6e00edbe63c37f"
    timestamp: "1628244174"
}

• 以上的信息生成需要我们将当前页的url发送到服务端生成，url的规则为当前页url去除hash的所有部分，代码为location.href.split('#')[0]

• 分享配置中的link字段无需与当前页url一样，只要求链接域名或路径必须与当前页面对应的公众号JS安全域名一致

• 如果当前页是SPA或者会使用history.replaceState修改当前页url，请一定注意，调用本组件必须在修改url之后，或者每次修改完url都重新调用一次本组件，否则会出现生成的鉴权信息与分享时刻的页面url不匹配，导致分享信息配置失败。

安装

es6 module

$ yarn add nw-share

script

引用dist下的share-dist.js，组件暴露的命名空间是Share

API

import {setOrUpdate, share} from 'nw-share';

setOrUpdate(shareData, callback)

设置当前页面的分享参数，可多次调用

• shareData: required Object 分享数据对象
  • title: required String 标题
  • description: required String 描述信息
  • activityId: required String 活动ID，只能由数字组成
  • picurl: required String 分享图片，如果提供的链接无法访问，可能造成分享功能失效
  • text: optional String 分享到微博的文字，可选，未传时取title的值
  • link: optional String 分享出去的链接，可选，未传时取当前页面的地址
• callback: optional Function 分享成功回调，可选，lofter和云音乐没有回调功能

注意1: 注意图片的大小，过大的图片会导致分享失败，而且没有错误提示，推荐200x200左右的尺寸，并且用jpg格式，大小在50k以内；阅读应用会把分享到微信的图片截成160x160

注意2: 由于png会比jpg大很多，本库默认会把png图转成jpg（通过在url后面加参数type=jpg）

注意3: 回调函数里，不要立即执行alert，在iPhone版阅读应用里会卡死应用

注意4: link，如果需要在阅读应用使用该组件，link的域名必须是yuedu.163.com，其他域名会提示参数问题，如果有需要，联系阅读产品策划把需要的域名加到白名单里

注意5: 微信和易信平台没法直接触发分享分享功能，会提示用户点击右上角按钮去分享

注意6: 调试分享回调函数时最好使用80端口，存在非80端口的页面分享回调不执行的情况

注意7: 发现分享文案中的某些关键字会使分享的内容被屏蔽，如"礼包"。

share(shareData)

• shareData: optional Object 分享数据对象，设置此次分享的数据，若为空，使用setOrUpdate配置的数据。

注意1: lofter不支持shareData参数 LOFTER6.8.4版本JSBridgeV7版本已支持主动调用时设置分享参数

触发分享

import {setOrUpdate, share} from 'nw-share';
import {isWeixin, isLofter} from 'nw-detect';

share();

发布

• 本组件有提供ES Module调用方式，所以在更新组件代码后，需要调用工程根目录的npm run build nw-share，构建ES Module版本的文件。
• 在nw-share目录执行npm run build，构建非ES Module版本的文件