A substitute for the official WeChat JS-SDK library, rewritten from https://res.wx.qq.com/open/js/jweixin-1.6.0.js
.
import axios from 'axios'
import WeChatWebViewBridge from 'wechat-webview-bridge'
/**
* Function to request WeChat JS-SDK configuration parameters.
*
* @var Function
*/
const configHandler = async function ({ url }) {
return axios.post('/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 apiList = [
'menu:share:timeline',
'menu:share:appmessage',
'imagePreview',
'hideMenuItems',
'showMenuItems',
'scanQRCode',
'getBrandWCPayRequest'
]
/**
* The bridge instance.
*
* @var WeChatWebViewBridge
*/
const bridge = new WeChatWebViewBridge({
configHandler,
apiList,
debug: true
})
// wait for WebView bridge initialized
await bridge.load()
.then(() => {
// listen on WeChat Timeline Share event
return bridge.on({
handlerName: 'menu:share:timeline',
listener () {
// invoke registration of sharing
bridge.invoke({
handlerName: 'shareTimeline',
params: {
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(() => {
// invoke hiding custom menu items
return bridge.invoke({
handlerName: 'hideMenuItems',
params: {
menuList: [
'menuItem:share:facebook'
]
}
})
})
Parameter | Type | Description | Default |
---|---|---|---|
options |
object | ||
options.configHandler |
function | 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.apiList |
array | List of WeChat JS-SDK API names you want to grant. | [] |
options.debug |
bool | Enable console debug output. | false |
Asynchronously wait for WebView bridge initialized. The returned Promise will be resolved once the bridge is ready to config.
- Parameters: (none)
- Returns:
Promise<void>
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>
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>
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>
Get the trimmed URL at the moment for WeChat WebView to configure.
- Returns:
string
Get WeChat WebView bridge configuration data. The data will be fulfilled after a successful configHandler
call.
- Returns:
object
Get whether WeChat WebView bridge was successfully configured before.
- Returns:
boolean
Whether we are in an iOS device.
- Returns:
boolean
Whether we are in an Android device.
- Returns:
boolean
Whether we are in a WeChat WebView.
- Returns:
boolean
Whether we are in a WeChat Browser.
- Returns:
boolean
Whether we are in a WeChat Mini Program.
- Returns:
boolean
Whether we are in a WeChat Dev Tools.
- Returns:
boolean
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) |
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 设备接口 |