nw-share

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

Usage no npm install needed!

<script type="module">
  import nwShare from 'https://cdn.skypack.dev/nw-share';
</script>

README

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参数

触发分享

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

share();

发布

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