Orcrist-Wechat 微信 SDK 服务组件

背景

安装

npm install --save-dev orcrist-wechat

使用说明

ES 模块引入：

import WeChat from 'orcrist-wechat'

import { authorize, register, msg } from 'orcrist-wechat'

WeChat.msg() || msg()

开放 API：

公众号相关：

| API 功能名称 | 功能说明 | 入参 | 返回值 | Demo | 备注 | | :----------: | :------------------------- | :--------------------: | :------------------------: | :----------------: | :----------------------------------------------------------- | | authorize | 微信用户授权 | redirectURL, isVisible | Promise {code, data, type} | DEMO | code: 20000（成功）/ -1（失败）, type: 'userINFO' / 'openID' | | explicitAuth | 微信显式授权 | redirectURL | Promise {code, data, type} | - | - | | msg | 微信获取公众号后管配置信息 | - | Promise | DEMO | |

JS-SDK：

| API 功能名称 | 功能说明 | 备注 | | :----------: | :-----------------: | :---------------------------------------------------------------------------------------- | | register | 注册微信 jssdk 服务 | 同时在 ready 中可设置分享信息（参数一 shareOpt），与是否隐藏菜单栏信息（参数二 hideMenu） | | share | 单独调用分享 | 通常为重置分享用 | | pay | 调用支付 | | | getUser | 获取微信用户信息 | 前提条件需调用 authorize 显式授权 |

DEMO

authorize 微信用户授权

/**
 * 参数 Object { redirectURL: '', isVisible: '' }
 * return Promise resolve(openID)
 */

// 1.在无依赖的场景下纯授权，并获取openID记录至sessionStorage
WeChat.authorize() // 默认参数 redirectURL = location.href当前页，isVisible为false - 直接重定向拿code换openID的“隐式授权”

// 2.对微信openID要做额外的处理，如拿openID去走用户登录 或 单独其它处理
/**
 * then 回调返回 data为 { code: 20000, data: openID, type }, 首次跳转及获取openID失败时， data为 { code: -1, data: "" }
 */
WeChat.authorize().then({code: 20000, data: openID, type = 'openID'} => {

  // go login fn
  // ---------------------
  // some other logic code...
})

// 3.控制render 不加载两次 componentDidMount ->
componentDidMount() {
  WeChat.authorize({
      redirectURL: location.href,
      isVisible: true, // 是否显式授权
    }).then(code: 20000, data: openID, type = 'userINFO' => {

      self.setState(
        {
          userINFO: data,
        },
        () => {
          Utils.preventTouch(this.myRefTabs.current, false);
        },
      );
    });
}

// ......
render() {
  if (!this.state.flag) {
    return (<div>empty<div>)
  }
  return (<div>....</div>)
}

msg 获取公众号信息

/** 

返回值： 
{"APPID":"wx0d74e6b4fe6aba0b","SOURCE":"1000000000","LOGO_IMG":{"name":"1587869394.jpg","url":"https://9719956.jpg"},"ACCOUNT_NAME":"XX健康 测试环境","original":{"id":"42ac27f3466b4215a4fc568066c398e0","accountName":"派健康 测试环境","appId":"wx0d74e6b4fe6aba0b","appSecret":null,"logoImg":{"name":"1587869394.jpg","url":"https://719956.jpg"},"sources":"1000000000"}}
*/

// 异步查询后，查询成功后存入sessionStorage KEY: ORCRIST_WECHAT_APPMSG
WeChat.msg().then((wxRes) => {
  console.log(wxRes);
});

// or
const fn = async () => {
  const wxRes = await WeChat.msg();
};

register 注册微信 jssdk 服务

// 入口统一注册 app.ts
WeChat.register({
  shareOpt: {
    title: "四十九元惠民保 惠家惠民福利好的很",
    desc: "百万保额、不限年龄、特药覆盖、无等待期，参保仅本月，错过等一年",
    link: location.href, // 分享链接
    imgUrl: "https://m.ytbxjj.com/spcare-public/static-files/hz/share.png", // 分享图标
  },
  hideMenu: true, // 是否关闭菜单栏，默认是false，可以不传
});

// 单页注册 page/index.ts
WeChat.register({
  shareOpt: {
    title: "四十九元惠民保 惠家惠民福利好的很",
    desc: "百万保额、不限年龄、特药覆盖、无等待期，参保仅本月，错过等一年",
    link: location.href, // 分享链接
    imgUrl: "https://m.ytbxjj.com/spcare-public/static-files/hz/share.png", // 分享图标
  },
  hideMenu: true, // 是否关闭菜单栏，默认是false，可以不传
});

share 需调用 register 注册接口，再可单独调用分享，通常为重置分享用

class ReactComponent extends React.Component {
  componentDidMount() {
    // 再次重置分享
    WeChat.share({
      title: "四十九元惠民保 惠家惠民福利好的很",
      desc: "百万保额、不限年龄、特药覆盖、无等待期，参保仅本月，错过等一年",
      link: location.href, // 分享链接
      imgUrl: "https://m.ytbxjj.com/spcare-public/static-files/hz/share.png", // 分享图标
    });
  }
}

getUser 获取微信信息

app.ts 首先在入口处调用显式授权

import WeChat from 'orcrist-wechat'

WeChat.authorize({
  redirectURL: location.href,
  isVisible: true, // 显式授权
})

xxxPage.ts

import WeChat from 'orcrist-wechat'

const userInfo = WeChat.getUser() // {} || null

API 额外说明

msg

关于页面的 sources 管理规范的说明

• 在后续的微信场景下，若当前 URL 中不包含sources参数，则微信组件 Orcrist-WeChat 会抛出 Error 并做 Toast 用户提示。
• 为统一规则，测试环境不再保留无 sources 可默认指向 π 健康场景，接入后统一使用 1000000000（10 位字符串，1 后面有 9 个 0）

sources 关联映射公众号列表

| sources | 公众号 | | :--------: | :----: | | 1100110101 | 广州 | | 1100210101 | 惠州 | | 1100310101 | 惠蓉 | | 1000000000 | π 健康 |

## 内容列表模板

- [背景](#背景)
- [安装](#安装)
- [使用说明](#使用说明)
- [徽章](#徽章)
- [示例](#示例)
- [相关仓库](#相关仓库)
- [维护者](#维护者)
- [如何贡献](#如何贡献)
- [使用许可](#使用许可)