Interface Description

Routing interface

Interface	Description
wx.miniProgram.navigateTo	Keep the current page and jump to a page in the app. But you cannot jump to the tabBar page
wx.miniProgram.navigateBack	Close the current page and return to the previous page or multi-level pages
wx.miniProgram.switchTab	Jump to the tabBar page and close all other non-tabBar pages
wx.miniProgram.reLaunch	Close all pages and open to a page in the app
wx.miniProgram.redirectTo	Close the current page and jump to a page in the app. But jumping to the tabBar page is not allowed

TIP

JSSDK routing interface parameters are consistent with Mini program routing interface , but the success/fail/complete callback function cannot be triggered.

Sample code:

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'})

Jump interface

Interface	Description
wx.navigateToMiniProgram	Open another applet
wx.exitMiniProgram	Close the current mini program
wx.navigateBackMiniProgram	Return to the previous mini program, which can only be called successfully when the current mini program is opened by other mini programs

TIP

JSSDK jump interface parameters are the same as Mini program jump interface same.

Sample code:

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 interface

Interface	Description
wx.setNavigationBarTitle	Dynamically set the title of the navigation bar of the current page

Sample code:

TIP

JSSDK navigation bar interface parameters are the same as Mini program navigation bar interface same.

Sample code:

JAVASCRIPT

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

Mini program data cache interface

Interface	Description
wx.getStorage	Asynchronously obtain the content of the specified key from the local cache
wx.setStorage	Store data in the specified key in the local cache. Will overwrite the original content corresponding to the key
wx.removeStorage	Remove the specified key from the local cache
wx.clearStorage	Clean up the local data cache
wx.getStorageInfo	Asynchronously obtain the relevant information of the current storage

TIP

JSSDK data cache interface parameters and Mini program data cache interface same.

Sample code:

JAVASCRIPT

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)
  }
})

Media interface

Event classification	Description	Interface
Image interface	Select an image from the local album or take a photo with the camera.	wx.chooseImage
	Preview the image in full screen on a new page	wx.previewImage
	Get local image base64 (only supported by IOS)	wx.getLocalImgData
Recording interface	Start recording	wx.startRecord
	Stop recording	wx.stopRecord
Audio interface	Start playing audio	wx.playVoice
	Pause the audio being played	wx.pauseVoice
	End audio playback	wx.stopVoice

TIP

JSSDK media interface parameters and Mini program media interface same.

Sample code:

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 interface

Interface	Description
wx.getLocation	Get current geographic location information
wx.openLocation	Use the built-in map of the App to view the location
wx.chooseLocation	Open the map to select the location

TIP

JSSDK location interface parameters and Mini program location interface same.

Sample code:

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)
  }
})

File interface

Interface	Description
wx.openDocument	Open document (Android only supports PDF, iOS supports the same file types as the system's wkwebview)

TIP

• JSSDK file interface parameters and Mini program file interface same.
• filePath only supports local file paths, for example: through wx.downloadFile

Sample code:

JAVASCRIPT

wx.openDocument({
  filePath: '/path/to/file',
  success: (res) => {
    console.log('openDocument success', res)
  },
  fail: (err) => {
    console.log('openDocument fail', err)
  }
})

Device interface

Interface	Description
wx.scanCode	Call up the client code scanning interface to scan
wx.getNetworkType	Get network type

TIP

JSSDK device interface parameters and Mini program device interface same.

Sample code:

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 interface

Interface	Description
wx.miniProgram.postMessage	Sending a message to the mini program will trigger the following specific timesweb-viewComponent message events: mini program back, component destruction, sharing, etc.
wx.miniProgram.onWebviewEvent	H5 listens to the message event sent by the mini program
wx.miniProgram.offWebviewEvent	H5 removes the message event sent by the mini program
wx.miniProgram.sendWebviewEvent	Sending a message to the mini program triggers web-view Component event

H5 sends a message event to the mini program

H5 JAVASCRIPT

// H5 javascript
wx.miniProgram.postMessage({ data: {name: 'TCMPP'} })

wx.miniProgram.sendWebviewEvent({ data: {message: 'Hi TCMPP'} })

WXML

<!-- Mini program /pages/index/index.wxml -->
<web-view src="https://xxx.xxx" bindmessage="onMessage" bindevent="onEvent"></web-view>

JAVASCRIPT

Page({
  onMessage(e) {
    console.log(e.detail.data) // [{"name":"TCMPP"}]
  },
  onEvent(e) {
    console.log(e.detail.data) // {"message":"Hi TCMPP"}
  }
})

Mini program sends a message event to H9

JAVASCRIPT

wx.sendWebviewEvent({
  message: "I'm Miniprogram, I received"
})

H5 JAVASCRIPT

// H5 javascript
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)

Other interfaces

Interface	Description
wx.miniProgram.getEnv	Get the current environment
wx.canGoBack	Current H5 Whether the page can return to the previous page
wx.checkJsApi	Determine whether the current client version supports the specified JS interface
wx.invokeNativePlugin	H5 calls the client custom API

Get the current environment

In the H5 web page, you can determine whether it is in the mini-program web-view environment in the following three ways:

• Use the wx.miniProgram.getEnv interface.

// H5 javascript
wx.miniProgram.getEnv((res) => {
  console.log(res.miniprogram) // true
})

• Use the window.__wxjs_environment variable to determine. It is recommended to use it in the callback function of the WeixinJSBridgeReady event.

Sample code:

// H5 javascript
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}

• Determine whether the userAgent contains the miniProgram keyword.

Sample code:

// H5 javascript
// "Mozilla/...... miniProgram TMA/mp6iu47n4rps6zwz": Contains miniProgram and the AppID(Mini Program ID).
console.log(window.navigator.userAgent);

Get the URL of the web-view

When the user shares, you can get the URL of the current web-view, that is, return the webViewUrl parameter in the onShareAppMessage callback.

Sample code:

// Miniprogram javascript
Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})

Determine whether H5 can return to the previous page

A Boolean value used to determine whether you can return to the previous page or state of H5, that is, whether there is a page that can be returned in the current navigation stack.

Sample code:

// H5 javascript
wx.canGoBack({
  success: (res) => {
    console.log('canGoBack success', res.canGoBack) // true/false
  },
  fail: (err) => {
    console.log('canGoBack fail', err)
  }
})

Get client interface support

Used to determine whether the current client version supports the specified JS interface.

Sample code:

// 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)
  }
})

Call the client custom API

Call the client's custom API in H5.

Sample code:

// 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
}