wechat-webview-bridge v2.0.0

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>)

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)

• Returns: Promise<any>

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

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

• 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

WeChatWebViewBridge.isIOS

Whether we are in an iOS device.

• Returns: boolean

WeChatWebViewBridge.isAndroid

Whether we are in an Android device.

• Returns: boolean

WeChatWebViewBridge.isWeChat

Whether we are in a WeChat WebView.

• Returns: boolean

WeChatWebViewBridge.isWeChatBrowser

Whether we are in a WeChat Browser.

• Returns: boolean

WeChatWebViewBridge.isWeChatMiniProgram

Whether we are in a WeChat Mini Program.

• Returns: boolean

WeChatWebViewBridge.isWeChatDevTools

Whether we are in a WeChat Dev Tools.

• Returns: boolean

Handlers for JS calling WebView Bridge

Handlers for JS listening on WebView Bridge

License

MIT