接口說明

路由接口

接口	說明
wx.miniProgram.navigateTo	保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到tabBar頁面
wx.miniProgram.navigateBack	關閉當前頁面，返回上一頁面或多級頁面
wx.miniProgram.switchTab	跳轉到tabBar頁面，並關閉其他所有非tabBar頁面
wx.miniProgram.reLaunch	關閉所有頁面，打開到應用內的某個頁面
wx.miniProgram.redirectTo	關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到tabBar頁面

TIP

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	打開另一個小程序
wx.exitMiniProgram	關閉當前小程序
wx.navigateBackMiniProgram	返回到上一個小程序，只有在當前小程序是被其他小程序打開時可以調用成功

TIP

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	動態設定當前頁面導航欄的標題

示例代碼：

TIP

JSSDK導航欄接口參數與小程序導航欄接口一致。

示例代碼：

JAVASCRIPT

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

小程序數據緩存接口

接口	說明
wx.getStorage	從本地緩存中非同步獲取指定key的內容
wx.setStorage	將資料存儲在本地緩存中指定的key中。會覆蓋掉原來該key對應的內容
wx.removeStorage	從本地緩存中移除指定key
wx.clearStorage	清理本地數據緩存
wx.getStorageInfo	非同步獲取當前storage的相關資訊

TIP

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

媒體接口

事件分類	說明	接口
圖片接口	從本地相册選擇圖片或使用相機拍照。	wx.chooseImage
	在新頁面中全屏預覽圖片	wx.previewImage
	獲取本地圖片base64（僅IOS支持）	wx.getLocalImgData
錄音接口	開始錄音	wx.startRecord
錄音接口	停止錄音	wx.stopRecord
音訊接口	開始播放音訊	wx.playVoice
	暫停正在播放的音訊	wx.pauseVoice
	結束播放音訊	wx.stopVoice

TIP

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	獲取當前地理位置資訊
wx.openLocation	使用App內寘地圖查看位置
wx.chooseLocation	打開地圖選擇位置

TIP

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）

TIP

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.scanCode	調起用戶端掃碼介面進行掃碼
wx.getNetworkType	獲取網絡類型

TIP

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事件：小程序後退、組件銷毀、分享等
wx.miniProgram.onWebviewEvent	H5監聽小程序發送的消息事件
wx.miniProgram.offWebviewEvent	H5移除監聽小程序發送的消息事件
wx.miniProgram.sendWebviewEvent	向小程序發送消息，觸發 web-view 組件的event事件

H5發送消息事件給小程序

H5 JAVASCRIPTWXMLJAVASCRIPT

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

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

html

&lt;!-- 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"}
  }
})

小程序發送消息事件給H5

JAVASCRIPTH5 JAVASCRIPT

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

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

其他接口

接口	說明
wx.miniProgram.getEnv	獲取當前環境
wx.canGoBack	當前H5頁面是否可返回上一頁
wx.checkJsApi	判斷當前用戶端版本是否支持指定JS接口
wx.invokeNativePlugin	H5調用用戶端自定義API

獲取當前環境

在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": Contains miniProgram and the AppID(Mini Program ID).
console.log(window.navigator.userAgent);

獲取web-view的URL

用戶分享時可獲取當前web-view的URL，即在onShareAppMessage回檔中返回webViewUrl參數。

示例代碼：

// Miniprogram 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) => {
    // 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)
  }
})

調用用戶端自定義API

H5中調用用戶端的自定義API。

示例代碼：

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

了解小程序

配置小程序

小程序框架

基礎能力

小程序配置

框架接口

wxml語法參考

wxs語法參考

界面

網絡

畫布

媒體

設備

遊戲引擎

運行時

基礎能力

渲染

設備

接口說明

路由接口

跳轉接口

導航欄接口

小程序數據緩存接口

媒體接口

位置接口

文件接口

設備接口

通信接口

H5發送消息事件給小程序

小程序發送消息事件給H5

其他接口

獲取當前環境

獲取web-view的URL

判斷H5是否可返回上一頁

獲取用戶端接口支持情况

調用用戶端自定義API

接口說明 ​

路由接口 ​

跳轉接口 ​

導航欄接口 ​

小程序數據緩存接口 ​

媒體接口 ​

位置接口 ​

文件接口 ​

設備接口 ​

通信接口 ​

H5發送消息事件給小程序 ​

小程序發送消息事件給H5 ​

其他接口 ​

獲取當前環境 ​

獲取web-view的URL ​

判斷H5是否可返回上一頁 ​

獲取用戶端接口支持情况 ​

調用用戶端自定義API ​

接口說明

路由接口

跳轉接口

導航欄接口

小程序數據緩存接口

媒體接口

位置接口

文件接口

設備接口

通信接口

H5發送消息事件給小程序

小程序發送消息事件給H5

其他接口

獲取當前環境

獲取web-view的URL

判斷H5是否可返回上一頁

獲取用戶端接口支持情况

調用用戶端自定義API