wechat-webview-bridge

A substitute for the official WeChat JS-SDK library, rewritten from https://res.wx.qq.com/open/js/jweixin-1.6.0.js.

Quick Start

import axios from 'axios'
import WeChatWebViewBridge, { type ConfigData } from 'wechat-webview-bridge'

/**
 * Function to request WeChat JS-SDK configuration parameters.
 *
 * @var Function
 */
const configHandler = async function ({ url }: { url: string }): ConfigData {
  return axios.post('/url/to/wechat-jssdk-config', { url })
    .then(res => {
      return {
        appId: res.appId,
        timestamp: res.timestamp,
        nonceStr: res.nonceStr,
        signature: res.signature
      }
    })
}

/**
 * List of WeChat JS-SDK API you want to grant.
 *
 * @var Array
 */
const jsApiList = [
  'menu:share:timeline',
  'menu:share:appmessage',
  'imagePreview',
  'hideMenuItems',
  'showMenuItems',
  'scanQRCode',
  'getBrandWCPayRequest'
]

/**
 * List of WeChat Open Tag you want to grant.
 *
 * @var Array
 */
const openTagList = [
  'wx-open-launch-app'
]

/**
 * The bridge instance.
 *
 * @var WeChatWebViewBridge
 */
const bridge = new WeChatWebViewBridge({
  configHandler,
  jsApiList,
  openTagList,
  debug: true
})

// wait for WebView bridge initialized
await bridge.load()
  .then(() => bridge.config())
  .then(() => {
    // example: listen on WeChat Timeline Share event
    return bridge.on('menu:share:timeline', () => {
      // invoke registration of sharing
      bridge.invoke('shareTimeline', {
        title: 'The Title Goes Here',
        desc: 'The description goes here',
        img_url: 'https://www.example.com/image.jpeg',
        link: window.location.href,
        type: 'link',
        data_url: ''
      })
        .then(data => {
          // successfully shared
        })
        .catch(error => {
          if (error.message === 'cancel') {
            // user cancelled
            return
          }
          // any other reasons
        })
    })
  })
  .then(() => {
    // example: invoke hiding custom menu items
    return bridge.invoke('hideMenuItems', {
      menuList: [
        'menuItem:share:facebook'
      ]
    })
  })

API

`new WeChatWebViewBridge(<options>)`

Parameter	Type	Description	Default
`options.configHandler`	({ url } : { url: string }) => ConfigData	Function to request WeChat JS-SDK configuration parameters. It should return a Promise and resolves with an object contains WeChat configuration parameters (`appId`, `timestamp`, `nonceStr` and `signature`).	(required)
`options.jsApiList`	Array<string>	List of WeChat JS-SDK API names you want to grant.	`[]`
`options.openTagList`	Array<string>	List of WeChat Open Tag you want to grant.	`[]`
`options.debug`	boolean	Enable console debug output.	`false`

`bridge.load()`

Asynchronously wait for WebView bridge initialized. The returned Promise will be resolved once the bridge is ready to config.

Parameters: (none)
Returns: Promise<void>

`bridge.config()`

Get configuration parameters from provided configHandler function and then pass to preVerifyJSAPI handler immediately. The returned Promise will be resolved once the bridge is ready to use.

Parameters: (none)
Returns: Promise<any>

`bridge.invoke(<handerName>, [params])`

Invoke WebView bridge handler. (see below for the complete handler list)

Parameter	Type	Description	Default
`handerName`	string	The name of handler to be called.	(required)
`params`	object	Parameters passed to WeChat WebView bridge.	`{}`

Returns: Promise<any>

`bridge.on(<handlerName>, <listener>)`

Listen on WebView bridge event. (see below for the complete handler list)

Parameter	Type	Description	Default
`handlerName`	string	The name of event to be listened on.	(required)
`listener`	function	The callback for WeChat WebView bridge response.	(required)

Returns: Promise<void>

`bridge.urlToConfig`

Get the trimmed URL at the moment for WeChat WebView to configure.

Returns: string

`bridge.configData`

Get WeChat WebView bridge configuration data. The data will be fulfilled after a successful configHandler call.

Returns: object

`bridge.ready`

Get whether WeChat WebView bridge was successfully configured before.

Returns: boolean