tencent cloud

腾讯云超级应用服务

动态与公告
【2025年1月2日】关于腾讯云小程序平台更名为腾讯云超级应用服务的公告
控制台更新动态
Android SDK 更新动态
iOS SDK 更新动态
Flutter 更新动态
IDE 更新动态
基础库更新动态
产品简介
产品概述
产品优势
应用场景
购买指南
计费概述
按量计费(后付费)
续费指引
停服说明
快速入门
套餐管理
概述
控制台账号管理
存储配置
加速配置
品牌化配置
平台功能
控制台登录
用户和权限体系
小程序管理
小游戏管理
应用管理
商业化
平台管理
用户管理
团队管理
运营管理
安全中心
代码接入指引
Demo 及 SDK 获取
Android
iOS
Flutter
App 服务端接入指南
GUID 生成规则
小程序开发指南
小程序介绍与开发环境
小程序代码组成
指南
框架
组件
API
服务端
JS SDK
基础库
IDE 使用指南
小游戏开发指南
指南
API
服务端
实践教程
小程序登录实践教程
小程序订阅消息实践教程
支付相关实践教程
广告接入实践教程
小游戏订阅消息实践教程
相关协议
数据处理和安全协议

接口说明

PDF
聚焦模式
字号
最后更新时间: 2025-04-29 18:40:52

JSSDK兼容性对照表

JSSDK
IDE
基础库
iOS SDK
Android SDK
1.0.0
2.0.812
2.0.8
2.0.7
2.0.7
1.0.1
2.2.611
2.2.6
2.2.6
2.2.6

路由接口

接口
说明
最低版本
wx.miniProgram.navigateTo
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabBar 页面
1.0.0
wx.miniProgram.navigateBack
关闭当前页面,返回上一页面或多级页面
1.0.0
wx.miniProgram.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
1.0.0
wx.miniProgram.reLaunch
关闭所有页面,打开到应用内的某个页面
1.0.0
wx.miniProgram.redirectTo
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabBar 页面
1.0.0
注意:
JSSDK 路由接口参数与 小程序路由接口 一致,但无法触发success/fail/complete回调函数。
示例代码:
JAVASCRIPT
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.navigateBack({delta: 1})
wx.miniProgram.switchTab({url: '/path/to/page'})
wx.miniProgram.reLaunch({url: '/path/to/page'})
wx.miniProgram.redirectTo({url: '/path/to/page'})

跳转接口

接口
说明
最低版本
wx.navigateToMiniProgram
打开另一个小程序
1.0.0
wx.exitMiniProgram
关闭当前小程序
1.0.0
wx.navigateBackMiniProgram
返回到上一个小程序,只有在当前小程序是被其他小程序打开时可以调用成功
1.0.0
注意:
JSSDK 跳转接口参数与 小程序跳转接口 一致。
示例代码:
JAVASCRIPT
wx.navigateToMiniProgram({ appId: 'appId', envVersion: 'release', success: (res) => { console.log('navigateToMiniProgram success', res) }, fail: (err) => { console.log('navigateToMiniProgram fail', err) } })

wx.exitMiniProgram({
success: (res) => { console.log('exitMiniProgram success', res) }, fail: (err) => { console.log('exitMiniProgram fail', err) } })

wx.navigateBackMiniProgram({
success: (res) => { console.log('navigateBackMiniProgram success', res) }, fail: (err) => { console.log('navigateBackMiniProgram fail', err) } })

导航栏接口

接口
说明
最低版本
wx.setNavigationBarTitle
动态设置当前页面导航栏的标题
1.0.0
注意:
JSSDK导航栏接口参数与 小程序导航栏接口 一致。
示例代码:
JAVASCRIPT
wx.setNavigationBarTitle({
title: 'title',
success: (res) => { console.log('setNavigationBarTitle success', res)
},
fail: (err) => {
console.log('setNavigationBarTitle fail', err)
}
})

数据缓存接口

接口
说明
最低版本
wx.getStorage
从本地缓存中异步获取指定 key 的内容
1.0.0
wx.setStorage
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容
1.0.0
wx.removeStorage
从本地缓存中移除指定 key
1.0.0
wx.clearStorage
清理本地数据缓存
1.0.0
wx.getStorageInfo
异步获取当前 storage 的相关信息
1.0.0
注意:
JSSDK 数据缓存接口参数与 小程序数据缓存接口 一致。
示例代码:
JAVASCRIPT
wx.getStorage({ key: 'name',
success: (res) => { console.log('getStorage success', res) }, fail: (err) => { console.log('getStorage fail', err) } })

wx.setStorage({ key: 'name',
data: 'value',
success: (res) => { console.log('setStorage success', res) }, fail: (err) => { console.log('setStorage fail', err) } })

wx.removeStorage({ key: 'name',
success: (res) => { console.log('removeStorage success', res) }, fail: (err) => { console.log('removeStorage fail', err) } })

wx.clearStorage({
success: (res) => { console.log('clearStorage success', res) }, fail: (err) => { console.log('clearStorage fail', err) } })
wx.getStorageInfo({
success: (res) => {
console.log('getStorageInfo success', res)
},
fail: (err) => {
console.log('getStorageInfo fail', err)
}
})

媒体接口

分类
说明
接口
最低版本
图片接口
从本地相册选择图片或使用相机拍照
wx.chooseImage
1.0.0
在新页面中全屏预览图片
wx.previewImage
1.0.0
获取本地图片 base64
wx.getLocalImgData
iOS: 1.0.0
Android: 1.0.1
录音接口
开始录音
wx.startRecord
1.0.0
停止录音
wx.stopRecord
1.0.0
音频接口
开始播放音频
wx.playVoice
1.0.0
暂停正在播放的音频
wx.pauseVoice
1.0.0
结束播放音频
wx.stopVoice
1.0.0
注意:
JSSDK 媒体接口参数与 小程序媒体接口 一致。
示例代码:
JAVASCRIPT
wx.chooseImage({ count: 2, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'],
success: (res) => { console.log('chooseImage success', res)
const imagePaths = res.tempFilePaths
wx.previewImage({ urls: imagePaths,
success: (res) => { console.log('previewImage success', res) }, fail: (err) => { console.log('previewImage fail', err) } })
wx.getLocalImgData({ filePath: imagePaths[0],
success: (res) => { console.log('getLocalImgData success', res) }, fail: (err) => { console.log('getLocalImgData fail', err) } }) }, fail: (err) => { console.log('chooseImage fail', err) } })

wx.startRecord({
success: (res) => { console.log('startRecord success', res)
const recordFilePath = res.tempFilePath
wx.playVoice({
filePath: recordFilePath,
success: (res) => { console.log('playVoice success', res) }, fail: (err) => { console.log('playVoice fail', err) } }) }, fail: (err) => { console.log('startRecord fail', err) } })
wx.stopRecord({
success: (res) => { console.log('stopRecord success', res) }, fail: (err) => { console.log('stopRecord fail', err) } })

wx.pauseVoice({
success: (res) => { console.log('pauseVoice success', res) }, fail: (err) => { console.log('pauseVoice fail', err) } })
wx.stopVoice({
success: (res) => { console.log('stopVoice success', res) }, fail: (err) => { console.log('stopVoice fail', err) } })

位置接口

接口
说明
最低版本
wx.getLocation
获取当前地理位置信息
1.0.0
wx.openLocation
使用 App 内置地图查看位置
1.0.0
wx.chooseLocation
打开地图选择位置
1.0.0
注意:
JSSDK 位置接口参数与 小程序位置接口 一致。
示例代码:
JAVASCRIPT
wx.getLocation({
success: (res) => { console.log('getLocation success', res)
const latitude = res.latitude const longitude = res.longitude
wx.openLocation({ latitude, longitude,
success: (res) => { console.log('openLocation success', res) }, fail: (err) => { console.log('openLocation fail', err) } })
wx.chooseLocation({ latitude, longitude,
success: (res) => { console.log('chooseLocation success', res) }, fail: (err) => { console.log('chooseLocation fail', err) } }) fail: (err) => { console.log('getLocation fail', err) } })

文件接口

接口
说明
最低版本
wx.openDocument
打开文档(Android仅支持PDF,iOS支持的文件类型同系统的wkwebview)
1.0.0
注意:
JSSDK文件接口参数与 小程序文件接口 一致。
filePath仅支持本地文件路径,例如:通过 wx.downloadFile 获取。
示例代码:
JAVASCRIPT
wx.openDocument({
filePath: '/path/to/file',
success: (res) => { console.log('openDocument success', res)
}, fail: (err) => { console.log('openDocument fail', err) } })

开放接口

接口
说明
最低版本
wx.login
调用接口获取登录凭证,通过凭证进而换取用户登录态信息
1.0.1
wx.checkSession
检查登录态是否过期
1.0.1
wx.getPhoneNumber
获取用于换取用户手机号码的动态令牌 code
1.0.1
wx.getEmailAddress
获取用于换取用户邮箱地址的动态令牌 code
1.0.1
wx.chooseAvatar
显示用户头像面板,在用户操作后获取到头像 URL
1.0.1
wx.getNickname
显示用户昵称面板,在用户点击昵称面板后获取到用户昵称
1.0.1
wx.hideNicknameAccessory
隐藏用户昵称面板
1.0.1
wx.requestPayment
发起应用支付
1.0.1
示例代码:
JAVASCRIPT
wx.login({
success: (res) => {
console.log('login success', res.code)
},
fail: (err) => {
console.log('login fail', err)
}
})

wx.checkSession({
success: () => {
console.log('session_key has not expired')
},
fail: () => {
console.log('session_key has expired, please log in again')
}
})

wx.getPhoneNumber({
success: (res) => {
console.log('getPhoneNumber success', res.code)
},
fail: (err) => {
console.log('getPhoneNumber fail', err)
}
})

wx.getEmailAddress({
success: (res) => {
console.log('getEmailAddress success', res.code)
},
fail: (err) => {
console.log('getEmailAddress fail', err)
}
})

wx.chooseAvatar({
success: (res) => {
console.log('chooseAvatar success', res.avatarUrl)
const { avatarUrl } = res;
if (avatarUrl.includes('/tmp')) {
wx.getLocalImgData({
filePath: avatarUrl,
success: (res) => {
console.log('getLocalImgData success', res.localData)
},
fail: (err) => {
console.log('getLocalImgData fail', err)
}
})
}
},
fail: (err) => {
console.log('chooseAvatar fail', err)
}
})

// Recommended to be called when clicking on an input box
wx.getNickname({
success: (res) => {
console.log('getNickname success', res.nickName)
// Here you can populate the input box with the nickName
},
fail: (err) => {
console.log('getNickname fail', err)
}
})

// Recommended to be called when the input box is out of focus
wx.hideNicknameAccessory({
success: (res) => {
console.log('hideNicknameAccessory success', res)
},
fail: (err) => {
console.log('hideNicknameAccessory fail', err)
}
})

wx.requestPayment({
package,
nonceStr,
paySign,
signType,
timeStamp,
success: (res) => {
console.log('requestPayment success', res)
},
fail: (err) => {
console.log('requestPayment fail', err)
}
})

设备接口

接口
说明
最低版本
wx.scanCode
调起客户端扫码界面进行扫码
1.0.0
wx.getNetworkType
获取网络类型
1.0.0
注意:
JSSDK设备接口参数与 小程序设备接口 一致。
示例代码:
JAVASCRIPT
wx.scanCode({
success: (res) => { console.log('scanCode success', res) }, fail: (err) => { console.log('scanCode fail', err) } })

wx.getNetworkType({
success: (res) => { console.log('getNetworkType success', res) }, fail: (err) => { console.log('getNetworkType fail', err) } })

通信接口

接口
说明
最低版本
wx.miniProgram.postMessage
向小程序发送消息,会在以下特定时机触发 web-view 组件的message事件:小程序后退、组件销毁、分享等
1.0.0
wx.miniProgram.onWebviewEvent
H5监听小程序发送的消息事件
1.0.0
wx.miniProgram.offWebviewEvent
H5移除监听小程序发送的消息事件
1.0.0
wx.miniProgram.sendWebviewEvent
向小程序发送消息,触发 web-view 组件的event事件
1.0.0

H5发送消息事件给小程序

H5 JAVASCRIPT
WXML
JAVASCRIPT
// H5 javascript
wx.miniProgram.postMessage({ data: {name: 'hi data'} })

wx.miniProgram.sendWebviewEvent({ data: {message: 'hi data'} })
<!-- 小程序 /pages/index/index.wxml -->
<web-view src="https://xxx.xxx" bindmessage="onMessage" bindevent="onEvent"></web-view>
Page({
onMessage(e) {
console.log(e.detail.data) // [{"name":"hi data"}]
},
onEvent(e) {
console.log(e.detail.data) // {"message":"hi data"}
}
})

小程序发送消息事件给H5

JAVASCRIPT
H5 JAVASCRIPT
wx.sendWebviewEvent({
message: "I'm Miniprogram, I received"
})
function onEvent(e) {
console.log(e.message) // I'm Miniprogram, I received
}
// 注册监听
wx.miniProgram.onWebviewEvent(onEvent)
// 移除监听
wx.miniProgram.offWebviewEvent(onEvent)

其他接口

接口
说明
最低版本
wx.miniProgram.getEnv
获取当前环境
1.0.0
wx.canGoBack
当前 H5 页面是否可返回上一页
1.0.0
wx.checkJsApi
判断当前客户端版本是否支持指定JS接口
1.0.0
wx.invokeNativePlugin
H5调用客户端自定义 API
1.0.0
wx.showAppMenu
显示宿主 APP “更多”面板,等同于胶囊按钮中的"···"操作
1.0.1

获取当前环境

H5网页内可以通过以下三种方式判断是否在小程序web-view环境:
通过wx.miniProgram.getEnv 接口。
// H5 javascript
wx.miniProgram.getEnv((res) => {
console.log(res.miniprogram) // true
})
通过window.__wxjs_environment 变量判断,建议在 WeixinJSBridgeReady 事件的回调函数中使用。
示例代码:
// H5 javascript
function ready() {
console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
ready()
}
通过判断userAgent中是否包含miniProgram关键字来判断。
示例代码:
// H5 javascript
// "Mozilla/...... miniProgram TMA/mp6iu47n4rps6zwz": 携带了 miniProgram 关键字和小程序的 AppId
console.log(window.navigator.userAgent);

获取 web-view 的 URL

用户分享时可获取当前web-view的 URL,即在onShareAppMessage回调中返回webViewUrl参数。
示例代码:
// 小程序 javascript
Page({
onShareAppMessage(options) {
console.log(options.webViewUrl)
}
})

判断 H5是否可返回上一页

用于判断是否可以返回到 H5的上一个页面或状态的布尔值,即当前导航栈中是否有可以返回的页面。
示例代码:
// H5 javascript
wx.canGoBack({
success: (res) => { console.log('canGoBack success', res.canGoBack) // true/false }, fail: (err) => { console.log('canGoBack fail', err) } })

获取客户端接口支持情况

用于判断当前客户端版本是否支持指定 JS 接口。
示例代码:
// H5 javascript
wx.checkJsApi({
jsApiList: ['chooseImage'],
success: (res) => {
// 以键值对的形式返回,可用的api值为true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} console.log('checkJsApi success', res) }, fail: (err) => { console.log('checkJsApi fail', err) } })

调用客户端自定义 API

H5中调用客户端的自定义 API。
示例代码:
// H5 javascript
invokeNativePlugin() {
let opts = {
api_name: 'customApiName', // 自定义API名称
data: JSON.parse(this.apiData || '{}'), // API请求参数
success: (res) => {
console.log('invokeNativePlugin success', res)
},
fail: (err) => {
console.log('invokeNativePlugin fail', err)
}
}
wx.invokeNativePlugin(opts); // 调用自定义API
}

显示 superapp “更多”面板

显示 superapp “更多”面板,等同于胶囊按钮中的"···"操作。
示例代码:
// H5 javascript
wx.showAppMenu({
success: (res) => {
console.log('showAppMenu success', res)
},
fail: (err) => {
console.log('showAppMenu fail', err)
}
})


帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈