https://github.com/valesdev/wechat-webview-bridge

A substitute for the official WeChat JS-SDK library.
https://github.com/valesdev/wechat-webview-bridge
webview wechat
Last synced: 8 months ago
JSON representation
A substitute for the official WeChat JS-SDK library.
Host: GitHub
URL: https://github.com/valesdev/wechat-webview-bridge
Owner: valesdev
License: mit
Created: 2019-03-15T07:54:09.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2023-09-04T07:43:02.000Z (almost 3 years ago)
Last Synced: 2025-10-03T09:39:20.624Z (9 months ago)
Topics: webview, wechat
Language: TypeScript
Homepage:
Size: 11.7 KB
Stars: 3
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

          # wechat-webview-bridge

[![Version](https://img.shields.io/npm/v/wechat-webview-bridge.svg)](https://www.npmjs.com/package/wechat-webview-bridge)

[![Downloads](https://img.shields.io/npm/dm/wechat-webview-bridge.svg)](https://npmcharts.com/compare/wechat-webview-bridge?minimal=true)

[![License](https://img.shields.io/npm/l/wechat-webview-bridge.svg)](https://www.npmjs.com/package/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

```ts

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

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

### `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`

### `bridge.invoke(, [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`

### `bridge.on(, )`

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`

### `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

| Handler Name                  | Parameters | Official Description |

| ----------------------------- | --- | --- |

| `preVerifyJSAPI`              | `verifyJsApiList`, `verifyOpenTagList` | 注入权限验证配置 |

| `checkJsApi`                  | `jsApiList` | 判断当前客户端版本是否支持指定 JS 接口 |

| `shareTimeline`               | `title`, `desc`, `img_url`, `link`, `type`, `data_url` | (unknown) |

| `sendAppMessage`              | `title`, `desc`, `link`, `img_url`, `type`, `data_url` | (unknown) |

| `shareQQ`                     | `title`, `desc`, `img_url`, `link` | (unknown) |

| `shareWeiboApp`               | `title`, `desc`, `img_url`, `link` | (unknown) |

| `shareQZone`                  | `title`, `desc`, `img_url`, `link` | (unknown) |

| `updateTimelineShareData`     | `title`, `link`, `imgUrl` | 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容 |

| `updateAppMessageShareData`   | `title`, `desc`, `link`, `imgUrl` | 自定义“分享给朋友”及“分享到QQ”按钮的分享内容 |

| `startRecord`                 | (none) | 开始录音接口 |

| `stopRecord`                  | (none) | 停止录音接口 |

| `playVoice`                   | `localId` | 播放语音接口 |

| `pauseVoice`                  | `localId` | 暂停播放接口 |

| `stopVoice`                   | `localId` | 停止播放接口 |

| `uploadVoice`                 | `localId`, `isShowProgressTips` | 上传语音接口 |

| `downloadVoice`               | `serverId`, `isShowProgressTips` | 下载语音接口 |

| `translateVoice`              | `localId`, `isShowProgressTips` | 识别音频并返回识别结果接口 |

| `chooseImage`                 | `count`, `sizeType`, `sourceType` | 拍照或从手机相册中选图接口 |

| `imagePreview`                | `current`, `urls` | 预览图片接口 |

| `uploadImage`                 | `localId`, `isShowProgressTips` | 上传图片接口 |

| `downloadImage`               | `serverId`, `isShowProgressTips` | 下载图片接口 |

| `getLocalImgData`             | `localId` | 获取本地图片接口 |

| `getNetworkType`              | (none) | 获取网络状态接口 |

| `openLocation`                | `latitude`, `longitude`, `name`, `address`, `scale`, `infoUrl` | 使用微信内置地图查看位置接口 |

| `geoLocation`                 | (none) | 获取地理位置接口 |

| `hideOptionMenu`              | (none) | (unknown) |

| `showOptionMenu`              | (none) | (unknown) |

| `closeWindow`                 | (none) | 关闭当前网页窗口接口 |

| `hideMenuItems`               | `menuList` | 批量隐藏功能按钮接口 |

| `showMenuItems`               | `menuList` | 批量显示功能按钮接口 |

| `hideAllNonBaseMenuItem`      | (none) | 隐藏所有非基础按钮接口 |

| `showAllNonBaseMenuItem`      | (none) | 显示所有功能按钮接口 |

| `scanQRCode`                  | `needResult`, `scanType` | 调起微信扫一扫接口 |

| `editAddress`                 | (none) | 共享收货地址接口 |

| `openProductViewWithPid`      | `pid`, `view_type`, `ext_info` | 跳转微信商品页接口 |

| `batchAddCard`                | `card_list` | 批量添加卡券接口 |

| `chooseCard`                  | `app_id`, `location_id`, `sign_type`, `card_id`, `card_type`, `card_sign`, `time_stamp`, `nonce_str` | 拉取适用卡券列表并获取用户选择信息 |

| `batchViewCard`               | `card_list` | 查看微信卡包中的卡券接口 |

| `consumedShareCard`           | `consumedCardId`, `consumedCode` | (unknown) |

| `getBrandWCPayRequest`        | `timestamp`, `nonceStr`, `package`, `paySign`, `signType` | 发起一个微信支付请求 |

| `getRecevieBizHongBaoRequest` | `timestamp`, `nonceStr`, `package`, `paySign`, `signType` | (unknown) |

| `startMonitoringBeacons`      | `ticket` | 开启查找周边 ibeacon 设备接口 |

| `stopMonitoringBeacons`       | (none) | 关闭查找周边 ibeacon 设备接口 |

| `openEnterpriseChat`          | `useridlist`, `chatname` | (unknown) |

| `launchMiniProgram`           | `targetAppId`, `path`, `envVersion` | 打开小程序 |

| `openBusinessView`            | `businessType`, `queryString`, `envVersion` | (unknown) |

| `invokeMiniProgramAPI`        | `name`, `arg` | (unknown) |

## Handlers for JS listening on WebView Bridge

| Handler Name            | Official Description |

| ----------------------- | --- |

| `menu:share:timeline`   | 监听“分享到朋友圈”按钮点击 |

| `menu:share:appmessage` | 监听“分享给朋友”按钮点击 |

| `menu:share:qq`         | 监听“分享到 QQ”按钮点击 |

| `menu:share:weiboApp`   | 监听“分享到腾讯微博”按钮点击 |

| `menu:share:QZone`      | 监听“分享到 QQ 空间”按钮点击 |

| `onVoiceRecordEnd`      | 监听录音自动停止接口 |

| `onVoicePlayEnd`        | 监听语音播放完毕接口 |

| `onBeaconsInRange`      | 监听周边 ibeacon 设备接口 |

## License

[MIT](http://opensource.org/licenses/MIT)
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/valesdev/wechat-webview-bridge

Awesome Lists containing this project

README
