❤
npm
Sign UpSign In

@activity-maker/app-share
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

喜马拉雅 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_31

  • thirdpartyId: 17，如下图：

thirdpartyId_17

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

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

thirdpartyid 对照表 ☞ 传送门

其它

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

Readme

Keywords

Package Sidebar

Install

npm i @activity-maker/app-share

Repository

gitlab.ximalaya.com/cft/sunshine.git

Homepage

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

Weekly Downloads

6

Version

1.0.0

License

ISC

Unpacked Size

93.3 kB

Total Files

14

Last publish

Collaborators

  • zhangfan999999
Try on RunKit
Report malware