API | Description |
wx.miniProgram.navigateTo | Retains the current page and navigates to a specific page within the app. However, it cannot navigate to a tabBar page. |
wx.miniProgram.navigateBack | Closes the current page and returns to the previous page or a multi-level page. |
wx.miniProgram.switchTab | Redirects to the tabBar page and closes all other non-tabBar pages. |
wx.miniProgram.reLaunch | Closes all pages and opens a specified page in the app. |
wx.miniProgram.redirectTo | Closes the current page and navigates to a specific page within the app. However, it cannot navigate to a tabBar page. |
success
/fail
/complete
callback functions.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'})
API | Description |
wx.navigateToMiniProgram | Opens another mini program. |
wx.exitMiniProgram | Closes the current mini program. |
wx.navigateBackMiniProgram | Returns to the previous mini program. This can only be called successfully when the current mini program is opened by another mini program. |
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)}})
API | Description |
wx.setNavigationBarTitle | Dynamically sets the title of the navigation bar for the current page. |
wx.setNavigationBarTitle({title: 'TCMPP',success: (res) => {console.log('setNavigationBarTitle success', res)},fail: (err) => {console.log('setNavigationBarTitle fail', err)}})
API | Description |
wx.getStorage | Asynchronously gets the content of the specified key from the local cache. |
wx.setStorage | Stores the data to the specified key in the local cache, which will overwrite the original content associated with that key. |
wx.removeStorage | Removes the specified key from the local cache. |
wx.clearStorage | Clears the local data cache. |
wx.getStorageInfo | Asynchronously gets the information of the current storage. |
wx.getStorage({key: 'name',success: (res) => {console.log('getStorage success', res)},fail: (err) => {console.log('getStorage fail', err)}})wx.setStorage({key: 'name',data: 'TCMPP',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)}})
Category | Description | API |
Image APIs | Specifies to choose an image from the local album or take a photo. | wx.chooseImage |
| Previews an image in full screen mode on a new page. | wx.previewImage |
| Gets the Base64 local image (only supported on iOS). | wx.getLocalImgData |
Recording APIs. | Starts recording | wx.startRecord |
| Stops recording. | wx.stopRecord |
Audio APIs | Starts audio playback. | wx.playVoice |
| Pauses audio playback. | wx.pauseVoice |
| Stops audio playback. | wx.stopVoice |
wx.chooseImage({count: 2,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: (res) => {console.log('chooseImage success', res)const imagePaths = res.tempFilePathswx.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.tempFilePathwx.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)}})
API | Description |
wx.getLocation | Gets current location info. |
wx.openLocation | Views location using the app's built-in map. |
wx.chooseLocation | Opens the map and selects a location. |
wx.getLocation({success: (res) => {console.log('getLocation success', res)const latitude = res.latitudeconst longitude = res.longitudewx.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)}})
API | Description |
wx.openDocument | Opens the document (supports only PDF on Android, and supports the file types opened by the system's WKWebView on iOS). |
filePath
only supports local file paths, such as those obtained using wx.downloadFile.wx.openDocument({filePath: '/path/to/file',success: (res) => {console.log('openDocument success', res)},fail: (err) => {console.log('openDocument fail', err)}})
API | Description |
wx.scanCode | Opens the client's image that has the QR code for scanning. |
wx.getNetworkType | Gets the network type. |
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)}})
API | Description |
wx.miniProgram.postMessage | Sends a message to the mini program. This will trigger the web-view component's message event during back navigation, component destruction, or sharing. |
wx.miniProgram.onWebviewEvent | Registers a listener to receive message events sent from the mini program to the H5 page. |
wx.miniProgram.offWebviewEvent | Removes the listener to stop receiving message events sent from the mini program to the H5 page. |
wx.miniProgram.sendWebviewEvent |
// H5 javascriptwx.miniProgram.postMessage({ data: {name: 'TCMPP'} })wx.miniProgram.sendWebviewEvent({ data: {message: 'Hi TCMPP'} })
<!-- Mini program /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":"TCMPP"}]},onEvent(e) {console.log(e.detail.data) // {"message":"Hi TCMPP"}}})
wx.sendWebviewEvent({message: "I'm Miniprogram, I received"})
function onEvent(e) {console.log(e.message) // I'm Miniprogram, I received}// Register a listenerwx.miniProgram.onWebviewEvent(onEvent)// Remove the listenerwx.miniProgram.offWebviewEvent(onEvent)
API | Description |
wx.miniProgram.getEnv | Gets the current environment. |
wx.canGoBack | Checks if the current H5 page can navigate back to the previous page. |
wx.checkJsApi | Determines if the current client version supports a specified JS API. |
wx.invokeNativePlugin | Calls custom APIs within an H5 page. |
H5
page is embedded within the mini program's web-view
component:wx.miniProgram.getEnv
// H5 javascriptwx.miniProgram.getEnv((res) => {console.log(res.miniprogram) // true})
window.__wxjs_environment
Invoke it within the callback of WeixinJSBridgeReady
event.// H5 javascriptfunction ready() {console.log(window.__wxjs_environment === 'miniprogram') // true}if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {document.addEventListener('WeixinJSBridgeReady', ready, false)} else {ready()}
userAgent
string contains the keyword miniProgram
.// H5 javascript// "Mozilla/...... miniProgram TMA/mp6iu47n4rps6zwz": Contains miniProgram and the AppID(Mini Program ID).console.log(window.navigator.userAgent);
web-view
URL when users share. This can be done by returning the webViewUrl parameter in the onShareAppMessage
call back.webViewUrl
// Mini program javascriptPage({onShareAppMessage(options) {console.log(options.webViewUrl)}})
// H5 javascriptwx.canGoBack({success: (res) => {console.log('canGoBack success', res.canGoBack) // true/false},fail: (err) => {console.log('canGoBack fail', err)}})
// H5 javascriptwx.checkJsApi({jsApiList: ['chooseImage'],success: (res) => {// Return as a key-value pair, true for available APIs and false for unavailable APIs.// For example: {"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}console.log('checkJsApi success', res)},fail: (err) => {console.log('checkJsApi fail', err)}})
// H5 javascriptinvokeNativePlugin() {let opts = {api_name: 'customApiName', // Custom API namedata: JSON.parse(this.apiData || '{}'), // API request parameterssuccess: (res) => {console.log('invokeNativePlugin success', res)},fail: (err) => {console.log('invokeNativePlugin fail', err)}}wx.invokeNativePlugin(opts); // Call custom APIs}
Was this page helpful?