喜马拉雅 App、微信的自定义分享/禁用分享封装。

Documentation

http://cft.pages.xmly.work/sunshine/#/packages/app-share

准备工作

区分环境，分别引入对应的 JS SDK 资源，并初始化。

详细步骤如下：

1. 微信

   1. 引入 weixin jssdk 文件；

      推荐使用新版，前往 微信开放文档 查看最新 JSSDK 版本信息。

      <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

   2. JS 接口安全域名

      若你的页面域名是 m.ximalaya.com/pages.ximalaya.com，那么无需做设置，可跳过此步骤。

      否则，请前往（传送门）了解如何支持更多域名。

2. 喜马拉雅 App

   1. 引入 jssdk 文件：

      前往 喜马拉雅 App JSSDK 文档 查看最新版本信息。

      <script src="https://s1.xmcdn.com/lib/jssdk/1.1.1/build/ly.js"></script>

   2. 添加 JSSDK 初始化鉴权，填写 APPID 和使用到的 api：

      APPID 申请地址 ☞ 点击前往。

      // 初始化 JSSDK
      window?.ly?.config({
        appId: '',
        apiList: [
          // 自定义分享需要使用到的 api ☞ nav.setMenu、util.share
          'nav.setMenu',
          'util.share',
        ],
      });

      你也可以在 setXmlyShareData 中，配置 config 参数自动执行初始化鉴权（不推荐）。

使用示例

基本用法

设置微信、喜马拉雅 App 自定义分享内容。

默认配置，仅支持当前页面是 m.ximalaya.com/pages.ximalaya.com 域名（与要分享的地址无关）。

import { Wechat, XMLY, ShareOptions } from '@activity-maker/app-share';

const SHARE_DATA: ShareOptions = {
  link: window.location.href,
  imgUrl:
    'http://fdfs.xmcdn.com/storages/7f77-audiofreehighqps/37/4F/CMCoOSEETHnNAAADcwCee6lz.png',
  title: '自定义分享标题',
  desc: '自定义分享的描述语...',
};

// 设置微信自定义分享
Wechat.setShareData(SHARE_DATA);
// 设置喜马拉雅 App 自定义分享
XMLY.setShareData(SHARE_DATA);

更多域名、环境配置（仅微信分享）

微信自定义分享，通过 config 参数配置，支持更多域名、更多环境（test、uat）页面的自定义分享。

import { Wechat, ShareOptions } from '@activity-maker/app-share';

const SHARE_DATA: ShareOptions = {
  link: window.location.href,
  imgUrl:
    'http://fdfs.xmcdn.com/storages/7f77-audiofreehighqps/37/4F/CMCoOSEETHnNAAADcwCee6lz.png',
  title: '自定义分享标题',
  desc: '自定义分享的描述语...',
};

// 设置微信自定义分享（支持测试环境、UAT 环境）
Wechat.setShareData({
  ...SHARE_DATA,
  // 配置为 true 或不配置，都将会自动执行微信签名鉴权，使用默认配置。能够支持 m.ximalaya.com/pages.ximalaya.com 页面的分享。
  // config: true,
  // 如果自己已经在别处执行了微信签名鉴权，配置为 false 关闭
  // config: false,
  // 配置后，将会自动执行微信签名鉴权（如果需要配置非 m.ximalaya.com/pages.ximalaya.com 页面的分享，须指定 thirdpartyId）
  config: {
    thirdpartyId: {
      production: 17,
      test: 31,
      uat: 31,
    },
    env: 'production', // 自己根据部署环境指定值（'test'、'uat'）
  },
});

喜马拉雅 App 无需区分环境，调用均一致。

微信

自定义微信分享

import { Wechat } from '@activity-maker/app-share';

Wechat.setShareData({
  link: window.location.href,
  imgUrl:
    'http://fdfs.xmcdn.com/storages/7f77-audiofreehighqps/37/4F/CMCoOSEETHnNAAADcwCee6lz.png',
  title: '自定义分享标题',
  desc: '自定义分享的描述语...',
  // 配置为 true 或不配置，都将会自动执行微信签名鉴权，使用默认配置。能够支持 m.ximalaya.com/pages.ximalaya.com 页面的分享。
  // config: true,
  // 如果自己已经在别处执行了微信签名鉴权，配置为 false 关闭
  // config: false,
  // 配置后，将会自动执行微信签名鉴权（如果需要配置非 m.ximalaya.com/pages.ximalaya.com 页面的分享，须指定 thirdpartyId）
  // config: {
  //   thirdpartyId: {
  //     production: 17,
  //     test: 31,
  //     uat: 31,
  //   },
  //   env: 'production', // 想要支持 test/uat 环境自定义分享生效，必须配置 thirdpartyId，env 设置为对应的 'test'、'uat'
  // },
  success() {
    console.log('成功回调');
  },
});

更新微信自定义分享信息

你可以在应用内，任意时刻，更新自定义分享信息。

import { Wechat } from '@activity-maker/app-share';

Wechat.updateShareData({
  link: window.location.href,
  imgUrl:
    'http://fdfs.xmcdn.com/storages/7f77-audiofreehighqps/37/4F/CMCoOSEETHnNAAADcwCee6lz.png',
  title: '自定义分享标题',
  desc: '自定义分享的描述语...',
  success() {
    console.log('成功回调');
  },
});

禁用微信分享

import { Wechat } from '@activity-maker/app-share';

Wechat.setShareData({
  disable: true,
});

喜马拉雅 App

自定义喜马拉雅 App 分享

import { XMLY } from '@activity-maker/app-share';

XMLY.setShareData({
  link: window.location.href,
  imgUrl:
    'http://fdfs.xmcdn.com/storages/7f77-audiofreehighqps/37/4F/CMCoOSEETHnNAAADcwCee6lz.png',
  title: '自定义分享标题',
  desc: '自定义分享的描述语...',
  // 配置后，将自动执行喜马拉雅 JSSDK 签名鉴权
  // 通常你不应该配置 config，而是在别处统一执行 window?.ly?.config() 去初始化 ly.js
  // 如果页面特别简单，仅仅需要配置自定义分享，无需调用其它 ly.js 的 api，你可以借助 config 配置自动完成 ly.js 初始化
  // config: {
  //   appId: 'xxxxxxxxxxxxxxxx',
  // },
  success() {
    console.log('成功回调');
  },
  fail() {
    console.log('失败回调');
  },
  complete() {
    console.log('无论成功失败都执行');
  },
});

喜马拉雅 App 点击拉起分享

import { XMLY } from '@activity-maker/app-share';

XMLY.share({
  link: window.location.href,
  imgUrl: 'http://fdfs.xmcdn.com/storages/7f77-audiofreehighqps/37/4F/CMCoOSEETHnNAAADcwCee6lz.png',
  title: '自定义分享标题',
  desc: '自定义分享的描述语...',
  channel: ['weixin], // 若是单个渠道，将直接拉起，不会弹出选择面板
  success() {
    console.log('成功回调');
  },
  fail() {
    console.log('失败回调');
  },
  complete() {
    console.log('无论成功失败都执行');
  },
})

禁用喜马拉雅 App 分享

import { XMLY } from '@activity-maker/app-share';

XMLY.setShareData({
  disable: true,
});

API

微信分享、喜马拉雅 App 的自定义分享回调机制不同（如：微信自定义分享无 fail 回调），为了避免使用上的不统一，设计不同的 API 分别使用（当然，这个思路未必很好...）。

XMLY

喜马拉雅 App 分享相关

import { XMLY } from '@activity-maker/app-share';

// 喜马拉雅 App 自定义分享
function setShareData(options: XmlyShareOptions | DisableOptions): void;

// 喜马拉雅 App 直接拉起分享
// 若是单个渠道，将直接拉起，不会弹出选择面板
function share(options: XmlyShareOptions): void;

// 喜马拉雅 App JSSDK 鉴权
// 通常你不需要单独调用此方法（此方法仅作为附赠的快捷方法，也许某些时候你会用的上）
// setXmlyShareData 方法中，如果已配置 config 参数，将会自动执行鉴权操作
function setConfig(options: XmlyAuthConfig): void;

Wechat

微信自定义分享相关

import { Wechat } from '@activity-maker/app-share';

// 微信自定义分享
function setShareData(options: WechatShareOptions | DisableOptions): void;

// 更新微信自定义分享信息
function updateShareData(options: UpdateWechatShareOptions): void;

// 微信 JSSDK 鉴权
// 通常你不需要单独调用此方法（此方法仅作为附赠的快捷方法，也许某些时候你会用的上）
// setWechatShareData 方法中，如果已配置 config 参数，将会自动执行鉴权操作
function setConfig(options?: WechatAuthConfig | undefined): void;

XmlyShareOptions

| 参数 | 说明 | 类型 | 必填 | 默认值 | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ---- | ------ | | link | 分享的链接 | string | 是 | - | | imgUrl | 分享的头图 | string | 是 | - | | title | 分享的标题 | string | 是 | - | | desc | 分享的文案 | string | 是 | - | | channel | 喜马拉雅 App 分享渠道 | XmlyShareChannel[] | 否 | - | | config | 喜马拉雅 app jssdk 鉴权配置（通常不应该配置此项，而是在自己在需要的地方调用 window?.ly?.config() 方法统一注册所有 ly.js 需要的 api list） | XmlyAuthConfig \| false | 否 | - | | success | 成功回调 | (data: any) => void | 否 | - | | fail | 失败回调 | (error: any) => void | 否 | - | | complete | 执行完成后回调 | (data: any) => void | 否 | - | | onShare | 点击分享按钮回调 | () => void | 否 | - |

XmlyShareChannel

/** 微信 */
| 'weixin'
/** 微信朋友圈 */
| 'weixinGroup'
/** 新浪微博 */
| 'tSina'
/** QQ */
| 'qq'
/** QQ 空间 */
| 'qzone'
/** 喜马拉雅 App 我的动态 */
| 'tingZone'
/** 短信 */
| 'message'
/** 喜马拉雅 App 群组 */
| 'xmGroup'
/** 复制链接 */
| 'url';

XmlyAuthConfig

| 参数 | 说明 | 类型 | 必填 | 默认值 | | ------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | ------ | | appId | 申请接入的 appid，申请地址 ☞ 传送门 | string | 是 | - | | apiList | 需要鉴权的接口列表 | string[] | 否 | - |

WechatShareOptions

| 参数 | 说明 | 类型 | 必填 | 默认值 | | ------- | --------------------- | ----------------------------- | ---- | ------ | | link | 分享的链接 | string | 是 | - | | imgUrl | 分享的头图 | string | 是 | - | | title | 分享的标题 | string | 是 | - | | desc | 分享的文案 | string | 是 | - | | channel | 喜马拉雅 App 分享渠道 | WechatShareChannel[] | 否 | - | | config | 微信鉴权配置 | WechatAuthConfig \| boolean | 否 | - | | success | 成功回调 | (data: any) => void | 否 | - |

UpdateWechatShareOptions

| 参数 | 说明 | 类型 | 必填 | 默认值 | | ------- | --------------------- | ---------------------- | ---- | ------ | | link | 分享的链接 | string | 是 | - | | imgUrl | 分享的头图 | string | 是 | - | | title | 分享的标题 | string | 是 | - | | desc | 分享的文案 | string | 是 | - | | channel | 喜马拉雅 App 分享渠道 | WechatShareChannel[] | 否 | - | | success | 成功回调 | (data: any) => void | 否 | - |

WechatShareChannel

'weixin' | 'weixinGroup';

WechatJSSDKConfig

| 参数 | 说明 | 类型 | 必填 | 默认值 | | ------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------- | ---- | ------ | | debug | 是否开启调试模式 | boolean | 否 | - | | jsApiList | 需要使用的 JS 接口列表，微信 JSSDK 文档 ☞ 传送门 | string[] | 否 | - | | openTagList | 需要使用的开放标签列表，例如：['wx-open-launch-app'] | string[] | 否 | - | | [K: string] | 支持其它更多参数（预防微信 JSSDK 扩展参数） | any | 否 | - |

WechatAuthConfig

| 参数 | 说明 | 类型 | 必填 | 默认值 | | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ---- | -------------------------------------- | | thirdpartyId | 平台架构统一维护微信鉴权，通过 thirdpartyId 关联注册的不同微信公众号，而不同的微信公众号，在后台对应配置了不同的安全域名。详细介绍参照上方的准备工作 thirdpartyid 对照表 ☞ 传送门 | Record<Env, number> | 否 | { test: 31, uat: 31, production: 17} | | env | 运行环境 | Env | 否 | 'production' | | debug | 是否开启调试模式 | boolean | 否 | - | | jsApiList | 需要使用的 JS 接口列表，微信 JSSDK 文档 ☞ 传送门 | string[] | 否 | - | | openTagList | 需要使用的开放标签列表，例如：['wx-open-launch-app'] | string[] | 否 | - | | [K: string] | 支持其它更多参数（预防微信 JSSDK 扩展参数） | any | 否 | - |

DisableOptions

| 参数 | 说明 | 类型 | 必填 | 默认值 | | ------- | -------- | --------- | ---- | ------ | | disable | 禁用分享 | boolean | 是 | - |

Env

'test' | 'uat' | 'production';

ShareOptions

| 参数 | 说明 | 类型 | 必填 | 默认值 | | ------ | ---------- | -------- | ---- | ------ | | link | 分享的链接 | string | 是 | - | | imgUrl | 分享的头图 | string | 是 | - | | title | 分享的标题 | string | 是 | - | | desc | 分享的文案 | string | 是 | - |

JS 接口安全域名

调用微信 JSSDK API 设置自定义分享，需要将自己的页面域名（不是要分享的链接）配置到微信公众号后台“JS 接口安全域名”。

在喜马拉雅，平台架构统一维护微信鉴权，通过 thirdpartyId 关联注册的不同微信公众号，而不同的微信公众号，在后台对应配置了不同的“JS 接口安全域名”、“网页授权域名”。

@activity-maker/app-share 默认使用的 thirdpartyId 是:

{
  "test": 31,
  "uat": 31,
  "production": 17
}

对应 thirdpartyId 配置的“JS 接口安全域名”如下：

截图时间：2021-08-03 11:11，将来也许会被修改，如果有偏差，请钉钉联系王志伦。

• thirdpartyId: 31，如下图：

• thirdpartyId: 17，如下图：

如果你的页面域名不在默认配置中，你必须要使用新的 thirdpartyId，并在初始化参数 config 中配置 thirdpartyId。

喜马拉雅的大部分域名都有在微信公众号配置过，请钉钉联系王志伦帮忙查询即可，某些未添加也可以新增。

thirdpartyid 对照表 ☞ 传送门

其它

1. 注意分享的小图，如果图片体积太大，有可能在部分设备上无法显示，推荐控制在 200KB 以内。