tencent cloud

All product documents
Tencent Cloud Super App as a Service
DocumentationTencent Cloud Super App as a ServiceGuildlines for Mini Program DevelopmentJS SDKAPI Description
API Description
Download PDF
Last updated: 2025-04-29 18:46:42
API Description
Last updated: 2025-04-29 18:46:42
Download PDF

JSSDK Compatibility Checklist

JSSDK
IDE
Base Library
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

Routes

API
Description
Minimum Version
wx.miniProgram.navigateTo
Retains the current page and navigates to a specific page within the app. However, it cannot navigate to a tabBar page.
1.0.0
wx.miniProgram.navigateBack
Closes the current page and returns to the previous page or a multi-level page.
1.0.0
wx.miniProgram.switchTab
Redirects to the tabBar page and closes all other non-tabBar pages.
1.0.0
wx.miniProgram.reLaunch
Closes all pages and opens a specified page in the app.
1.0.0
wx.miniProgram.redirectTo
Closes the current page and navigates to a specific page within the app. However, it cannot navigate to a tabBar page.
1.0.0
Notes:
JSSDK Routes APIs are consistent with the mini program Routes APIs.However, it cannot trigger the success/fail/complete callback functions.
Example:
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'})

Navigation

API
Description
Minimum Version
wx.navigateToMiniProgram
Opens another mini program.
1.0.0
wx.exitMiniProgram
Closes the current mini program.
1.0.0
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.
1.0.0
Notes:
JSSDK navigation APIs are consistent with the mini program navigation APIs.
Example:
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)
  }
})

Navigation bar

API
Description
Minimum Version
wx.setNavigationBarTitle
Dynamically sets the title of the navigation bar for the current page.
1.0.0
Notes:
JSSDK navigation bar APIs are consistent with the mini program navigation bar APIs.
Example:
JAVASCRIPT
wx.setNavigationBarTitle({
  title: 'title',
  success: (res) => {
    console.log('setNavigationBarTitle success', res)
  },
  fail: (err) => {
    console.log('setNavigationBarTitle fail', err)
  }
})

Data cache

API
Description
Minimum Version
wx.getStorage
Asynchronously gets the content of the specified key from the local cache.
1.0.0
wx.setStorage
Stores the data to the specified key in the local cache, which will overwrite the original content associated with that key.
1.0.0
wx.removeStorage
Removes the specified key from the local cache.
1.0.0
wx.clearStorage
Clears the local data cache.
1.0.0
wx.getStorageInfo
Asynchronously gets the information of the current storage.
1.0.0
Notes:
JSSDK data cache APIs are consistent with the mini program cache APIs.
Example:
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)
  }
})

Media

Category
Description
API
Minimum Version
Image APIs
Specifies to choose an image from the local album or take a photo.
wx.chooseImage
1.0.0
Previews an image in full screen mode on a new page.
wx.previewImage
1.0.0
Gets the Base64 local image.
wx.getLocalImgData
iOS: 1.0.0
Android: 1.0.1
Recording APIs.
Starts recording
wx.startRecord
1.0.0
Stops recording.
wx.stopRecord
1.0.0
Audio APIs
Starts audio playback.
wx.playVoice
1.0.0
Pauses audio playback.
wx.pauseVoice
1.0.0
Stops audio playback.
wx.stopVoice
1.0.0
Notes:
JSSDK media APIs are consistent with the mini program media APIs.
Example:
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)
  }
})

Location

API
Description
Minimum Version
wx.getLocation
Gets current location info.
1.0.0
wx.openLocation
Views location using the app's built-in map.
1.0.0
wx.chooseLocation
Opens the map and selects a location.
1.0.0
Notes:
JSSDK location APIs are consistent with the mini program location APIs.
Example:
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)
  }
})

Document

API
Description
Minimum Version
wx.openDocument
Opens the document (supports only PDF on Android, and supports the file types opened by the system's WKWebView on iOS).
1.0.0
Notes:
JSSDK document APIs are consistent with the Mini program document APIs.
filePath only supports local file paths, such as those obtained using wx.downloadFile.
Example:
JAVASCRIPT
wx.openDocument({
  filePath: '/path/to/file',
  success: (res) => {
    console.log('openDocument success', res)
  },
  fail: (err) => {
    console.log('openDocument fail', err)
  }
})

Open APIs

API
Description
Minimum Version
wx.login
This API is used to obtain a login credential. The credential can then be used to retrieve user login status information.
1.0.1
wx.checkSession
This API checks whether the login session has expired.
1.0.1
wx.getPhoneNumber
Get the dynamic token code for exchanging the user's cell phone number.
1.0.1
wx.getEmailAddress
Get the dynamic token code used to exchange for the user's email address.
1.0.1
wx.chooseAvatar
Show user avatar panel and get the avatar url after user action.
1.0.1
wx.getNickname
Display the user nickname panel and get the nickName when the user clicks on the nickname panel.
1.0.1
wx.hideNicknameAccessory
Hide User Nickname Panel.
1.0.1
wx.requestPayment
Bring up the application payment.
1.0.1
Example:
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)
  }
})

Device

API
Description
Minimum Version
wx.scanCode
Opens the client's image that has the QR code for scanning.
1.0.0
wx.getNetworkType
Gets the network type.
1.0.0
Notes:
JSSDK device APIs are consistent with the mini program device APIs.
Example:
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)
  }
})

Communication

API
Description
Minimum Version
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.
1.0.0
wx.miniProgram.onWebviewEvent
Registers a listener to receive message events sent from the mini program to the H5 page.
1.0.0
wx.miniProgram.offWebviewEvent
Removes the listener to stop receiving message events sent from the mini program to the H5 page.
1.0.0
wx.miniProgram.sendWebviewEvent
Sends a message to the mini program, triggering the web-view component's event.
1.0.0

H5 page sends a message event to the mini program

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

wx.miniProgram.sendWebviewEvent({ data: {message: 'hi data'} })
<!-- 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":"hi data"}]
  },
  onEvent(e) {
    console.log(e.detail.data) // {"message":"hi data"}
  }
}

Mini program sends message event to H5 page

JAVASCRIPT
H5 JAVASCRIPT
wx.sendWebviewEvent({
  message: "I'm Miniprogram, I received"
})
function onEvent(e) {
  console.log(e.message) // I'm Miniprogram, I received
}
// Register a listener
wx.miniProgram.onWebviewEvent(onEvent)
// Remove the listener
wx.miniProgram.offWebviewEvent(onEvent)

Others

API
Description
Minimum Version
wx.miniProgram.getEnv
Gets the current environment.
1.0.0
wx.canGoBack
Checks if the current H5 page can navigate back to the previous page.
1.0.0
wx.checkJsApi
Determines if the current client version supports a specified JS API.
1.0.0
wx.invokeNativePlugin
Calls custom APIs within an H5 page.
1.0.0
wx.showAppMenu
Display the "More" panel of the host app, which is the same as the "···" operation in the capsule button.
1.0.1

Gets the current environment

There are three methods to determine if the H5 page is embedded within the mini program's web-view component:
Use wx.miniProgram.getEnv 
// H5 javascript
wx.miniProgram.getEnv((res) => {
  console.log(res.miniprogram) // true
})
Use window.__wxjs_environment Invoke it within the callback of WeixinJSBridgeReady event.
Example:
// H5 javascript
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else  {
  ready()
}
Check if the userAgent string contains the keyword miniProgram.
Example:
// H5 javascript
// "Mozilla/...... miniProgram TMA/mp6iu47n4rps6zwz": Contains miniProgram and the AppID(Mini Program ID).
console.log(window.navigator.userAgent);

Gets the web-view URL

Gets the current web-view URL when users share. This can be done by returning the webViewUrl parameter in the onShareAppMessage call back.webViewUrl
Example:
// Mini program javascript
Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})

Determines if the H5 page can navigate back

This involves checking for a boolean value that indicates whether there is a previous page or state in the current navigation stack that can be returned to.
Example:
// H5 javascript
wx.canGoBack({
  success: (res) => {
    console.log('canGoBack success', res.canGoBack) // true/false
  },
  fail: (err) => {
    console.log('canGoBack fail', err)
  }
})

Gets client version info about the JS API support

Determines if the current client version supports a specified JS API.
Example:
// H5 javascript
wx.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)
  }
})

Calls custom APIs

Calls custom APIs within an H5 page.
Example:
// H5 javascript
invokeNativePlugin() {
  let opts = {
    api_name: 'customApiName', // Custom API name
    data: JSON.parse(this.apiData || '{}'), // API request parameters
    success: (res) => {
      console.log('invokeNativePlugin success', res)
    },
    fail: (err) => {
      console.log('invokeNativePlugin fail', err)
    }
  }
  wx.invokeNativePlugin(opts); // Call custom APIs
}

Display the "More" panel of the superapp

Display the "More" panel of the superapp, which is the same as the "···" operation in the capsule button.
Example：
// H5 javascript
wx.showAppMenu({
  success: (res) => {
    console.log('showAppMenu success', res)
  },
  fail: (err) => {
    console.log('showAppMenu fail', err)
  }
})

Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 available.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon