# 微信小程序--API 目錄結構
[toc]
---
## API導讀
<table>
<tr>
<td>一級分類</td>
<td>二級分類</td>
<td>API</td>
<td>描述</td>
</tr>
<tr>
<td rowspan="27">基礎</td>
<td rowspan="3"></td>
<td>wx.canIUse</td>
<td>判斷小程序的API,回調,參數,組件等是否在當前版本可用</td>
</tr>
<tr>
<td>wx.base64ToArrayBuffer</td>
<td>將 Base64 字符串轉成 ArrayBuffer 對象</td>
</tr>
<tr>
<td>wx.arrayBufferToBase64</td>
<td>將 ArrayBuffer 對象轉成 Base64 字符串</td>
</tr>
<tr>
<td rowspan="2">系統</td>
<td>wx.getSystemInfo</td>
<td>獲取系統信息</td>
</tr>
<tr>
<td>wx.getSystemInfoSync</td>
<td>wx.getSystemInfo 的同步版本</td>
</tr>
<tr>
<td>更新</td>
<td>wx.getUpdateManager</td>
<td>獲取全局唯一的版本更新管理器,用于管理小程序更新</td>
</tr>
<tr>
<td>小程序-生命周期</td>
<td>wx.getLaunchOptionsSync</td>
<td>獲取小程序啟動時的參數</td>
</tr>
<tr>
<td rowspan="12">小程序-應用級事件</td>
<td>wx.onPageNotFound</td>
<td>監聽小程序要打開的頁面不存在事件</td>
</tr>
<tr>
<td>wx.onError</td>
<td>監聽小程序錯誤事件。如腳本錯誤或 API 調用報錯等</td>
</tr>
<tr>
<td>wx.onAudioInterruptionEnd</td>
<td>監聽音頻中斷結束事件</td>
</tr>
<tr>
<td>wx.onAudioInterruptionBegin</td>
<td>監聽音頻因為受到系統占用而被中斷開始事件</td>
</tr>
<tr>
<td>wx.onAppShow</td>
<td>監聽小程序切前臺事件</td>
</tr>
<tr>
<td>wx.onAppHide</td>
<td>監聽小程序切后臺事件</td>
</tr>
<tr>
<td>wx.offPageNotFound</td>
<td>取消監聽小程序要打開的頁面不存在事件</td>
</tr>
<tr>
<td>wx.offError</td>
<td>取消監聽小程序錯誤事件</td>
</tr>
<tr>
<td>wx.offAudioInterruptionEnd</td>
<td>取消監聽音頻中斷結束事件</td>
</tr>
<tr>
<td>wx.offAudioInterruptionBegin</td>
<td>取消監聽音頻因為受到系統占用而被中斷開始事件</td>
</tr>
<tr>
<td>wx.offAppShow</td>
<td>取消監聽小程序切前臺事件</td>
</tr>
<tr>
<td>wx.offAppHide</td>
<td>取消監聽小程序切后臺事件</td>
</tr>
<tr>
<td rowspan="4">調試</td>
<td>wx.setEnableDebug</td>
<td>設置是否打開調試開關。此開關對正式版也能生效</td>
</tr>
<tr>
<td>wx.getLogManager</td>
<td>獲取日志管理器對象</td>
</tr>
<tr>
<td>console</td>
<td>向調試面板中打印日志</td>
</tr>
<tr>
<td>LogManager</td>
<td>日志管理器實例</td>
</tr>
<tr>
<td rowspan="4">定時器</td>
<td>setInterval</td>
<td>設定一個定時器</td>
</tr>
<tr>
<td>clearInterval</td>
<td>取消由 setInterval 設置的定時器</td>
</tr>
<tr>
<td>setTimeout</td>
<td>設定一個定時器</td>
</tr>
<tr>
<td>clearTimeout</td>
<td>取消由 setTimeout 設置的定時器</td>
</tr>
<tr>
<td rowspan="5">路由</td>
<td></td>
<td>wx.switchTab</td>
<td>跳轉到 tabBar 頁面,并關閉其他所有非 tabBar 頁面</td>
</tr>
<tr>
<td></td>
<td>wx.reLaunch</td>
<td>關閉所有頁面,打開到應用內的某個頁面</td>
</tr>
<tr>
<td></td>
<td>wx.redirectTo</td>
<td>關閉當前頁面,跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面</td>
</tr>
<tr>
<td></td>
<td>wx.navigateTo</td>
<td>保留當前頁面,跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面</td>
</tr>
<tr>
<td></td>
<td>wx.navigateBack</td>
<td>關閉當前頁面,返回上一頁面或多級頁面</td>
</tr>
<tr>
<td rowspan="32">界面</td>
<td rowspan="6">交互</td>
<td>wx.showToast</td>
<td>顯示消息提示框</td>
</tr>
<tr>
<td>wx.hideToast</td>
<td>隱藏消息提示框</td>
</tr>
<tr>
<td>wx.showModal</td>
<td>顯示模態對話框</td>
</tr>
<tr>
<td>wx.showLoading</td>
<td>顯示 loading 提示框</td>
</tr>
<tr>
<td>wx.hideLoading</td>
<td>隱藏 loading 提示框</td>
</tr>
<tr>
<td>wx.hideLoading</td>
<td>隱藏 loading 提示框</td>
</tr>
<tr>
<td rowspan="4">導航欄</td>
<td>wx.showNavigationBarLoading</td>
<td>在當前頁面顯示導航條加載動畫</td>
</tr>
<tr>
<td>wx.setNavigationBarTitle</td>
<td>動態設置當前頁面的標題</td>
</tr>
<tr>
<td>wx.setNavigationBarColor</td>
<td>設置頁面導航條顏色</td>
</tr>
<tr>
<td>wx.hideNavigationBarLoading</td>
<td>在當前頁面隱藏導航條加載動畫</td>
</tr>
<tr>
<td rowspan="2">導航欄</td>
<td>wx.setBackgroundTextStyle</td>
<td>動態設置下拉背景字體、loading 圖的樣式</td>
</tr>
<tr>
<td>wx.setBackgroundColor</td>
<td>動態設置窗口的背景色</td>
</tr>
<tr>
<td rowspan="8">Tab Bar</td>
<td>wx.showTabBarRedDot</td>
<td>顯示 tabBar 某一項的右上角的紅點</td>
</tr>
<tr>
<td>wx.hideTabBarRedDot</td>
<td>隱藏 tabBar 某一項的右上角的紅點</td>
</tr>
<tr>
<td>wx.showTabBar</td>
<td>顯示 tabBar</td>
</tr>
<tr>
<td>wx.hideTabBar</td>
<td>隱藏 tabBar</td>
</tr>
<tr>
<td>wx.setTabBarStyle</td>
<td>動態設置 tabBar 的整體樣式</td>
</tr>
<tr>
<td>wx.setTabBarItem</td>
<td>動態設置 tabBar 某一項的內容</td>
</tr>
<tr>
<td>wx.setTabBarBadge</td>
<td>為 tabBar 某一項的右上角添加文本</td>
</tr>
<tr>
<td>wx.removeTabBarBadge</td>
<td>移除 tabBar 某一項右上角的文本</td>
</tr>
<tr>
<td>字體</td>
<td>wx.loadFontFace</td>
<td>動態加載網絡字體。文件地址需為下載類型。iOS 僅支持 https 格式文件地址</td>
</tr>
<tr>
<td rowspan="2">下拉刷新</td>
<td>wx.stopPullDownRefresh</td>
<td>停止當前頁面下拉刷新</td>
</tr>
<tr>
<td>wx.startPullDownRefresh</td>
<td>開始下拉刷新。調用后觸發下拉刷新動畫,效果與用戶手動下拉刷新一致</td>
</tr>
<tr>
<td>滾動</td>
<td>wx.pageScrollTo</td>
<td>將頁面滾動到目標位置,支持選擇器和滾動距離兩種方式定位</td>
</tr>
<tr>
<td>動畫</td>
<td>wx.createAnimation</td>
<td>創建一個動畫實例 animation。調用實例的方法來描述動畫</td>
</tr>
<tr>
<td>置頂</td>
<td>wx.setTopBarText</td>
<td>動態設置置頂欄文字內容</td>
</tr>
<tr>
<td>自定義組件</td>
<td>wx.nextTick</td>
<td>延遲一部分操作到下一個時間片再執行</td>
</tr>
<tr>
<td>菜單</td>
<td>wx.getMenuButtonBoundingClientRect</td>
<td>獲取菜單按鈕(右上角膠囊按鈕)的布局位置信息。坐標信息以屏幕左上角為原點</td>
</tr>
<tr>
<td rowspan="2">窗口</td>
<td>wx.onWindowResize</td>
<td>監聽窗口尺寸變化事件</td>
</tr>
<tr>
<td>wx.offWindowResize</td>
<td>取消監聽窗口尺寸變化事件</td>
</tr>
<tr>
<td rowspan="2">鍵盤</td>
<td>wx.onWindowResize</td>
<td>監聽鍵盤高度變化</td>
</tr>
<tr>
<td>wx.getSelectedTextRange</td>
<td>在input、textarea等focus之后,獲取輸入框的光標位置</td>
</tr>
<tr>
<td rowspan="21">網絡</td>
<td>發送請求</td>
<td>wx.request</td>
<td>發起 HTTPS 網絡請求</td>
</tr>
<tr>
<td>下載</td>
<td>wx.downloadFile</td>
<td>下載文件資源到本地</td>
</tr>
<tr>
<td>上傳</td>
<td>wx.uploadFile</td>
<td>將本地資源上傳到服務器</td>
</tr>
<tr>
<td rowspan="7">WebSocket</td>
<td>wx.sendSocketMessage</td>
<td>通過 WebSocket 連接發送數據</td>
</tr>
<tr>
<td>wx.onSocketOpen</td>
<td>監聽 WebSocket 連接打開事件</td>
</tr>
<tr>
<td>wx.onSocketMessage</td>
<td>監聽 WebSocket 接受到服務器的消息事件</td>
</tr>
<tr>
<td>wx.onSocketError</td>
<td>監聽 WebSocket 錯誤事件</td>
</tr>
<tr>
<td>wx.onSocketClose</td>
<td>監聽 WebSocket 連接關閉事件</td>
</tr>
<tr>
<td>wx.connectSocket</td>
<td>創建一個 WebSocket 連接</td>
</tr>
<tr>
<td>wx.closeSocket</td>
<td>關閉 WebSocket 連接</td>
</tr>
<tr>
<td rowspan="10">mDNS</td>
<td>wx.stopLocalServiceDiscovery</td>
<td>停止搜索 mDNS 服務</td>
</tr>
<tr>
<td>wx.startLocalServiceDiscovery</td>
<td>開始搜索局域網下的 mDNS 服務</td>
</tr>
<tr>
<td>wx.onLocalServiceResolveFail</td>
<td>監聽 mDNS 服務解析失敗的事件</td>
</tr>
<tr>
<td>wx.onLocalServiceLost</td>
<td>監聽 mDNS 服務離開的事件</td>
</tr>
<tr>
<td>wx.onLocalServiceFound</td>
<td>監聽 mDNS 服務發現的事件</td>
</tr>
<tr>
<td>wx.onLocalServiceDiscoveryStop</td>
<td>監聽 mDNS 服務停止搜索的事件</td>
</tr>
<tr>
<td>wx.offLocalServiceResolveFail</td>
<td>取消監聽 mDNS 服務解析失敗的事件</td>
</tr>
<tr>
<td>wx.offLocalServiceLost</td>
<td>取消監聽 mDNS 服務離開的事件</td>
</tr>
<tr>
<td>wx.offLocalServiceFound</td>
<td>取消監聽 mDNS 服務發現的事件</td>
</tr>
<tr>
<td>wx.offLocalServiceDiscoveryStop</td>
<td>取消監聽 mDNS 服務停止搜索的事件</td>
</tr>
<tr>
<td>UDP 通訊</td>
<td>wx.createUDPSocket</td>
<td>創建一個 UDP Socket 實例</td>
</tr>
<tr>
<td rowspan="10">數據緩存</td>
<td rowspan="10"></td>
<td>wx.setStorage</td>
<td>將數據存儲在本地緩存中指定的 key 中</td>
</tr>
<tr>
<td>wx.setStorageSync</td>
<td>wx.setStorage 的同步版本</td>
</tr>
<tr>
<td>wx.removeStorage</td>
<td>從本地緩存中移除指定 key</td>
</tr>
<tr>
<td>wx.removeStorageSync</td>
<td>wx.removeStorage 的同步版本</td>
</tr>
<tr>
<td>wx.getStorage</td>
<td>從本地緩存中異步獲取指定 key 的內容</td>
</tr>
<tr>
<td>wx.getStorageSync</td>
<td>wx.getStorage 的同步版本</td>
</tr>
<tr>
<td>wx.getStorageInfo</td>
<td>異步獲取當前storage的相關信息</td>
</tr>
<tr>
<td>wx.getStorageInfoSync</td>
<td>wx.getStorageInfo 的同步版本</td>
</tr>
<tr>
<td>wx.clearStorage</td>
<td>清理本地數據緩存</td>
</tr>
<tr>
<td>wx.clearStorageSync</td>
<td>wx.clearStorage 的同步版本</td>
</tr>
<tr>
<td rowspan="32">媒體</td>
<td>地圖</td>
<td>wx.createMapContext</td>
<td>創建 map 上下文 MapContext 對象</td>
</tr>
<tr>
<td rowspan="6">圖片</td>
<td>wx.saveImageToPhotosAlbum</td>
<td>保存圖片到系統相冊</td>
</tr>
<tr>
<td>wx.previewImage</td>
<td>在新頁面中全屏預覽圖片</td>
</tr>
<tr>
<td>wx.getImageInfo</td>
<td>獲取圖片信息</td>
</tr>
<tr>
<td>wx.compressImage</td>
<td>壓縮圖片接口,可選壓縮質量</td>
</tr>
<tr>
<td>wx.chooseMessageFile</td>
<td>從客戶端會話選擇文件</td>
</tr>
<tr>
<td>wx.chooseImage</td>
<td>從本地相冊選擇圖片或使用相機拍照</td>
</tr>
<tr>
<td rowspan="3">視頻</td>
<td>wx.saveVideoToPhotosAlbum</td>
<td>保存視頻到系統相冊</td>
</tr>
<tr>
<td>wx.createVideoContext</td>
<td>創建 video 上下文 VideoContext 對象</td>
</tr>
<tr>
<td>wx.chooseVideo</td>
<td>拍攝視頻或從手機相冊中選視頻</td>
</tr>
<tr>
<td rowspan="7">音頻</td>
<td>wx.stopVoice</td>
<td>結束播放語音</td>
</tr>
<tr>
<td>wx.setInnerAudioOption</td>
<td>設置 InnerAudioContext 的播放選項</td>
</tr>
<tr>
<td>wx.playVoice</td>
<td>開始播放語音</td>
</tr>
<tr>
<td>wx.pauseVoice</td>
<td>暫停正在播放的語音</td>
</tr>
<tr>
<td>wx.getAvailableAudioSources</td>
<td>獲取當前支持的音頻輸入源</td>
</tr>
<tr>
<td>wx.createInnerAudioContext</td>
<td>創建內部 audio 上下文 InnerAudioContext 對象</td>
</tr>
<tr>
<td>wx.createAudioContext</td>
<td>創建 audio 上下文 AudioContext 對象</td>
</tr>
<tr>
<td rowspan="9">背景音頻</td>
<td>wx.stopBackgroundAudio</td>
<td>停止播放音樂</td>
</tr>
<tr>
<td>wx.seekBackgroundAudio</td>
<td>控制音樂播放進度</td>
</tr>
<tr>
<td>wx.playBackgroundAudio</td>
<td>使用后臺播放器播放音樂</td>
</tr>
<tr>
<td>wx.pauseBackgroundAudio</td>
<td>暫停播放音樂</td>
</tr>
<tr>
<td>wx.onBackgroundAudioStop</td>
<td>監聽音樂停止事件</td>
</tr>
<tr>
<td>wx.onBackgroundAudioPlay</td>
<td>監聽音樂播放事件</td>
</tr>
<tr>
<td>wx.onBackgroundAudioPause</td>
<td>監聽音樂暫停事件</td>
</tr>
<tr>
<td>wx.getBackgroundAudioPlayerState</td>
<td>獲取后臺音樂播放狀態</td>
</tr>
<tr>
<td>wx.getBackgroundAudioManager</td>
<td>獲取全局唯一的背景音頻管理器</td>
</tr>
<tr>
<td rowspan="2">實時音視頻</td>
<td>wx.createLivePusherContext</td>
<td>創建 live-pusher 上下文 LivePusherContext 對象</td>
</tr>
<tr>
<td>wx.createLivePlayerContext</td>
<td>創建 live-player 上下文 LivePlayerContext 對象</td>
</tr>
<tr>
<td rowspan="3">錄音</td>
<td>wx.stopRecord</td>
<td>停止錄音</td>
</tr>
<tr>
<td>wx.startRecord</td>
<td>開始錄音</td>
</tr>
<tr>
<td>wx.getRecorderManager</td>
<td>獲取全局唯一的錄音管理器 RecorderManager</td>
</tr>
<tr>
<td>相機</td>
<td>wx.createCameraContext</td>
<td>創建 camera 上下文 CameraContext 對象</td>
</tr>
<tr>
<td rowspan="3">位置</td>
<td rowspan="3"></td>
<td>wx.openLocation</td>
<td>使用微信內置地圖查看位置</td>
</tr>
<tr>
<td>wx.getLocation</td>
<td>獲取當前的地理位置、速度。當用戶離開小程序后,此接口無法調用</td>
</tr>
<tr>
<td>wx.chooseLocation</td>
<td>打開地圖選擇位置</td>
</tr>
<tr>
<td rowspan="4">轉發</td>
<td rowspan="4"></td>
<td>wx.updateShareMenu</td>
<td>更新轉發屬性</td>
</tr>
<tr>
<td>wx.showShareMenu</td>
<td>顯示當前頁面的轉發按鈕</td>
</tr>
<tr>
<td>wx.hideShareMenu</td>
<td>隱藏轉發按鈕</td>
</tr>
<tr>
<td>wx.getShareInfo</td>
<td>獲取轉發詳細信息</td>
</tr>
<tr>
<td rowspan="13">開發接口</td>
<td rowspan="2">登陸</td>
<td>wx.login</td>
<td>調用接口獲取登錄憑證(code)</td>
</tr>
<tr>
<td>wx.checkSession</td>
<td>檢查登錄態是否過期</td>
</tr>
<tr>
<td rowspan="2">小程序跳轉</td>
<td>wx.navigateToMiniProgram</td>
<td>打開另一個小程序</td>
</tr>
<tr>
<td>wx.navigateBackMiniProgram</td>
<td>返回到上一個小程序</td>
</tr>
<tr>
<td>賬戶信息</td>
<td>wx.getAccountInfoSync</td>
<td>返回到上一個小程序</td>
</tr>
<tr>
<td>用戶信息</td>
<td>wx.getUserInfo</td>
<td>獲取用戶信息</td>
</tr>
<tr>
<td>數據上報</td>
<td>wx.reportMonitor</td>
<td>自定義業務數據監控上報接口</td>
</tr>
<tr>
<td>數據分析</td>
<td>wx.reportAnalytics</td>
<td>自定義分析數據上報接口</td>
</tr>
<tr>
<td>支付</td>
<td>wx.requestPayment</td>
<td>發起微信支付</td>
</tr>
<tr>
<td>授權</td>
<td>wx.authorize</td>
<td>提前向用戶發起授權請求</td>
</tr>
<tr>
<td rowspan="2">設置</td>
<td>wx.openSetting</td>
<td>調起客戶端小程序設置界面,返回用戶設置的操作結果</td>
</tr>
<tr>
<td>wx.getSetting</td>
<td>獲取用戶的當前設置</td>
</tr>
<tr>
<td>收貨地址</td>
<td>wx.chooseAddress</td>
<td>獲取用戶收貨地址</td>
</tr>
<tr>
<td rowspan="3">設備</td>
<td rowspan="2">剪貼板</td>
<td>wx.setClipboardData</td>
<td>設置系統剪貼板的內容</td>
</tr>
<tr>
<td>wx.getClipboardData</td>
<td>獲取系統剪貼板的內容</td>
</tr>
<tr>
<td>電話</td>
<td>wx.makePhoneCall</td>
<td>撥打電話</td>
</tr>
</table>
---
## 微信小程序--API
* 小程序開發框架提供豐富的微信原生 API
* 多數 API 的回調都是異步,你需要處理好代碼邏輯的異步問題
---
### 一、基礎api
```php
1. wx.getSystemInfoSync 獲取系統信息
2. console.debug 向調試面板中打印 debug 日志
3. console.log 向調試面板中打印 log 日志
4. console.info 向調試面板中打印 info 日志
5. LogManager.debug 寫 debug 日志
6. LogManager.log 寫 log 日志
7. LogManager.info 寫 info 日志
```
---
#### 1. `wx.getSystemInfoSync` 和 `wx.getSystemInfo` 獲取系統信息
**屬性**|**類型**|**描述**
---|---|---
success|function|接口調用成功的回調函數
fail|function|接口調用失敗的回調函數
complete|function|接口調用結束的回調函數(調用成功、失敗都會執行)
> 成功返回值:
**屬性**|**類型**|**描述**
---|---|---
brand|string|設備品牌
model|string|設備型號
pixelRatio|string|設備像素比
screenWidth|string|屏幕寬度,單位px
screenHeight|number|屏幕高度,單位px
windowWidth|number|可使用窗口寬度,單位px
windowHeight|number|可使用窗口高度,單位px
statusBarHeight|number|狀態欄的高度,單位px
language|string|微信設置的語言
version|string|微信版本號
system|string|操作系統及版本
platform|string|客戶端平臺
fontSizeSetting|number|用戶字體大小(單位px)
albumAuthorized|boolean|允許微信使用相冊的開關
cameraAuthorized|boolean|允許微信使用攝像頭的開關
locationAuthorized|boolean|允許微信使用定位的開關
microphoneAuthorized|boolean|允許微信使用麥克風的開關
notificationAuthorized|boolean|允許微信通知的開關
bluetoothEnabled|boolean|藍牙的系統開關
locationEnabled|boolean|地理位置的系統開關
wifiEnabled|boolean|Wi-Fi 的系統開關
> js示例:
```js
Page({
onLoad: function (options) {
wx.getSystemInfo({
success(){
console.log(res);
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 2. `console.debug` 向調試面板中打印 debug 日志
> js示例:
```js
Page({
onLoad: function (options) {
console.debug('歐陽克');
}
})
```
---
#### 3. `console.log` 向調試面板中打印 log 日志
> js示例:
```js
Page({
onLoad: function (options) {
console.log('歐陽克');
}
})
```
---
#### 4. `console.info` 向調試面板中打印 info 日志
> js示例:
```js
Page({
onLoad: function (options) {
console.info('歐陽克');
}
})
```
---
#### 5. `LogManager.debug` 寫 debug 日志
> js示例:
```js
Page({
onLoad: function (options) {
LogManager.debug('歐陽克');
}
})
```
---
#### 6. `LogManager.log` 寫 log 日志
> js示例:
```js
Page({
onLoad: function (options) {
LogManager.log('歐陽克');
}
})
```
---
#### 7. `LogManager.info` 寫 info 日志
> js示例:
```js
Page({
onLoad: function (options) {
LogManager.info('歐陽克');
}
})
```
---
### 二、路由api
```php
1. wx.switchTab 跳轉到 tabBar 頁面,并關閉其他所有非 tabBar 頁面
2. wx.reLaunch 關閉所有頁面,打開到應用內的某個頁面
3. wx.redirectTo 關閉當前頁面,跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面
4. wx.navigateTo 保留當前頁面,跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面
5. wx.navigateBack 關閉當前頁面,返回上一頁面或多級頁面
```
---
#### 1. `wx.switchTab` 跳轉到 tabBar 頁面,并關閉其他所有非 tabBar 頁面
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
url|string|是|需要跳轉的 tabBar 頁面的路徑,路徑后不能帶參數。
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.switchTab({
url: 'a',
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
> app.json示例:
```json
{
"tabBar": {
"list": [
{
"pagePath": "index",
"text": "首頁"
},
{
"pagePath": "a",
"text": "A頁面"
}
]
}
}
```
---
#### 2. `wx.reLaunch` 關閉所有頁面,打開到應用內的某個頁面
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
url|string|是|需要跳轉的應用內頁面路徑,路徑后可以帶參數。
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.reLaunch({
url: 'a?id=1',
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 3. `wx.redirectTo` 關閉當前頁面,跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
url|string|是|需要跳轉的應用內非 tabBar 的頁面的路徑, 路徑后可以帶參數。
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.redirectTo({
url: 'a?id=1',
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 4. `wx.navigateTo` 保留當前頁面,跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
url|string|是|需要跳轉的應用內非 tabBar 的頁面的路徑, 路徑后可以帶參數。
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.navigateTo({
url: 'a?id=1',
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 5. `wx.navigateBack` 關閉當前頁面,返回上一頁面或多級頁面
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
delta|string|是|返回的頁面數,如果 delta 大于現有頁面數,則返回到首頁,最多10層
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.navigateBack({
delta: 10,
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
### 三、界面api
```php
1. wx.showToast 顯示消息提示框
2. wx.hideToast 隱藏消息提示框
3. wx.showLoading 顯示 loading 提示框。需主動調用 wx.hideLoading 才能關閉提示框
4. wx.hideLoading 隱藏 loading 提示框
5. wx.showModal 顯示模態對話框
6. wx.showActionSheet 顯示操作菜單
7. wx.showTabBarRedDot 顯示 tabBar 某一項的右上角的紅點
```
---
#### 1. `wx.showToast` 顯示消息提示框
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
title|string|是|提示的內容
icon|string|否|圖標
image|string|否|自定義圖標的本地路徑,image 的優先級高于 icon
duration|number|否|提示的延遲時間
mask|boolean|否|是否顯示透明蒙層,防止觸摸穿透
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> icon合法值:
**屬性**|**描述**
---|---
success|顯示成功圖標,此時 title 文本最多顯示 7 個漢字長度
loading|顯示加載圖標,此時 title 文本最多顯示 7 個漢字長度
none|不顯示圖標,此時 title 文本最多可顯示兩行
> js示例:
```js
Page({
onLoad: function (options) {
wx.showToast({
title: '成功',
icon: 'success',
image: 'img/1.png', // 放在小程序根目錄,icon就不會顯示了
duration : 1000,
mask : true,
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 2. `wx.hideToast` 隱藏消息提示框
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.hideToast({
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 3. `wx.showLoading` 顯示 loading 提示框。需主動調用 wx.hideLoading 才能關閉提示框
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
title|string|是|提示的內容
mask|boolean|否|是否顯示透明蒙層,防止觸摸穿透
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.showLoading({
title: '加載中',
mask : true,
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 4. `wx.hideLoading` 隱藏 loading 提示框
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.hideLoading({
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 5. `wx.showModal` 顯示模態對話框
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
title|string|是|提示的標題
content|string|是|提示的內容
showCancel|boolean|否|是否顯示取消按鈕
cancelText|string|否|取消按鈕的文字,最多 4 個字符
cancelColor|string|否|取消按鈕的文字顏色,必須是 16 進制格式的顏色字符串
confirmText|string|否|確認按鈕的文字,最多 4 個字符
confirmColor|string|否|確認按鈕的文字顏色,必須是 16 進制格式的顏色字符串
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.showModal({
title: '提示',
content: '這是一個模態彈窗',
showCancel : true,
cancelText : '取消按鈕',
cancelColor : '#333',
confirmText : '確定按鈕',
confirmColor : 'red',
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 6. `wx.showActionSheet` 顯示模態對話框
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
itemList|Array|是|按鈕的文字數組,數組長度最大為 6
itemColor|string|否|按鈕的文字顏色
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.showActionSheet({
itemList: [
'歐陽克',
'黃蓉',
'郭靖',
'楊康',
'穆念慈'
],
itemColor: '#333',
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 7. `wx.showTabBarRedDot` 顯示 tabBar 某一項的右上角的紅點
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
index|number|是|tabBar 的哪一項,從左邊算起,0開始
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.showTabBarRedDot({
index: 1,
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
### 四、網絡api
```php
1. wx.request 發起 HTTPS 網絡請求
```
---
#### 1. `wx.request` 發起 HTTPS 網絡請求
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
url|number|是|開發者服務器接口地址
data|string/object/ArrayBuffer|否|請求的參數
header|Object|否|設置請求的 header,header 中不能設置 Referer
method|string|否|HTTP 請求方法
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.request({
url: 'http://apis.juhe.cn/mobile/get',
data : {
key : '4d6cce531387deeedf359687fb04c163',
phone : '13429667914'
},
header: {
'content-type': 'application/json'
},
method : 'POST',
success(e){
console.log(e);
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
> 接口返回的json數據不能使用,請看這里:
>> 對于 POST 方法且 header['content-type'] 為 application/json 的數據,會對數據進行 JSON 序列化
>> 對于 POST 方法且 header['content-type'] 為 application/x-www-form-urlencoded 的數據,會將數據轉換成 query string
---
### 五、媒體api
```php
1. wx.previewImage 在新頁面中全屏預覽圖片。預覽的過程中用戶可以進行保存圖片、發送給朋友等操作。
```
---
#### 1. `wx.previewImage` 在新頁面中全屏預覽圖片。
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
urls|Array|是|需要預覽的圖片鏈接列表
current|string|否|當前顯示圖片的鏈接
success|function|否|接口調用成功的回調函數
fail|function|否|接口調用失敗的回調函數
complete|function|否|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.previewImage({
current: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558711326985&di=3386e412418b6826b3b1fcbf55f72165&imgtype=0&src=http%3A%2F%2Fk.zol-img.com.cn%2Fsjbbs%2F7692%2Fa7691515_s.jpg',
urls: [
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558711326985&di=3386e412418b6826b3b1fcbf55f72165&imgtype=0&src=http%3A%2F%2Fk.zol-img.com.cn%2Fsjbbs%2F7692%2Fa7691515_s.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558711326983&di=37ac9ac0c2c7dccaa914d5ebae940325&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140110%2F17563091_221827492154_2.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558711326983&di=e32936aa5551a260c99cb4deaaf6c141&imgtype=0&src=http%3A%2F%2Fpic35.nipic.com%2F20131115%2F13972544_160943053001_2.jpg'
]
success(){
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
### 六、開放接口api
```php
1. wx.authorize 提前向用戶發起授權請求
2. wx.chooseAddress 獲取用戶收貨地址
3. wx.chooseInvoiceTitle 選擇用戶的發票抬頭
4. wx.chooseInvoice 選擇用戶已有的發票
5. wx.getUserInfo 獲取用戶信息
```
---
#### 1. `wx.authorize` 提前向用戶發起授權請求
**屬性**|**類型**|**描述**
---|---|---
scope|string|需要獲取權限的 scope
success|function|接口調用成功的回調函數
fail|function|接口調用失敗的回調函數
complete|function|接口調用結束的回調函數(調用成功、失敗都會執行)
> scope合法值:
**屬性**|**對應接口**|**描述**
---|---|---
scope.address|wx.chooseAddress|通訊地址
scope.invoiceTitle|wx.chooseInvoiceTitle|發票抬頭
scope.invoice|wx.chooseInvoice|獲取發票
scope.userInfo|wx.getUserInfo|用戶信息
> js示例:
```js
Page({
onLoad: function (options) {
wx.authorize({
scope: 'scope.address',
success(e) {
console.log(e);
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 2. `wx.chooseAddress` 獲取用戶收貨地址
**屬性**|**類型**|**描述**
---|---|---
success|function|接口調用成功的回調函數
fail|function|接口調用失敗的回調函數
complete|function|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例1:
```js
Page({
onLoad: function (options) {
wx.chooseAddress({
success(e) {
console.log(e);
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
});
}
})
```
> js示例2:
```js
Page({
onLoad: function (options) {
wx.authorize({
scope: 'scope.address',
success(e) {
wx.chooseAddress({
success(e) {
console.log(e);
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
});
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 5. `wx.getUserInfo` 獲取用戶信息
**屬性**|**類型**|**描述**
---|---|---
withCredentials|function|是否帶上登錄態信息
lang|string|顯示用戶信息的語言,en、zh_CN、zh_TW
success|function|接口調用成功的回調函數
fail|function|接口調用失敗的回調函數
complete|function|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例1:
```js
Page({
onLoad: function (options) {
// 這樣調用,會失敗
wx.getUserInfo({
success(e) {
console.log(e);
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
});
}
})
```
> js示例2:
```js
Page({
onLoad: function (options) {
// 授權成功后,還是失敗
// 因為微信已經禁止直接調用微信用戶信息,需要用戶主動請求
wx.authorize({
scope: 'scope.userInfo',
success(e) {
wx.getUserInfo({
success(e) {
console.log(e);
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
});
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
#### `button` 按鈕
**屬性**|**類型**|**描述**
---|---|---|---
open-type|string|微信開放能力
bindgetuserinfo|eventhandle|用戶點擊該按鈕時,會返回獲取到的用戶信息,open-type="getUserInfo"時有效
bindcontact|eventhandle|客服消息回調,open-type="contact"時有效
bindgetphonenumber|eventhandle|獲取用戶手機號回調,open-type=getPhoneNumber時有效
> js示例3:
```js
Page({
onLoad: function (options) {
a(e){
console.log(e);
}
}
})
```
```html
<button open-type="getUserInfo" bindgetuserinfo='a'>登錄</button>
```
---
### 七、設備api
```php
1. wx.setClipboardData 設置系統剪貼板的內容
2. wx.getClipboardData 獲取系統剪貼板的內容
3. wx.getNetworkType 獲取網絡類型
4. wx.makePhoneCall 撥打電話
5. wx.scanCode 調起客戶端掃碼界面進行掃碼
```
---
#### 1. `wx.setClipboardData` 設置系統剪貼板的內容
**屬性**|**類型**|**描述**
---|---|---
data|string|剪貼板的內容
success|function|接口調用成功的回調函數
fail|function|接口調用失敗的回調函數
complete|function|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.setClipboardData({
data: '我是歐陽克',
success(e) {
console.log(e);
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 2. `wx.getClipboardData` 獲取系統剪貼板的內容
**屬性**|**類型**|**描述**
---|---|---
success|function|接口調用成功的回調函數
fail|function|接口調用失敗的回調函數
complete|function|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.getClipboardData({
success(e) {
console.log(e);
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 3. `wx.getNetworkType` 獲取網絡類型
**屬性**|**類型**|**描述**
---|---|---
success|function|接口調用成功的回調函數
fail|function|接口調用失敗的回調函數
complete|function|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.getNetworkType({
success(e) {
console.log(e);
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 4. `wx.makePhoneCall` 撥打電話
**屬性**|**類型**|**描述**
---|---|---
phoneNumber|string|需要撥打的電話號碼
success|function|接口調用成功的回調函數
fail|function|接口調用失敗的回調函數
complete|function|接口調用結束的回調函數(調用成功、失敗都會執行)
> js示例:
```js
Page({
onLoad: function (options) {
wx.makePhoneCall({
phoneNumber : '13843843843',
success(e) {
console.log(e);
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
---
#### 5. `wx.scanCode` 調起客戶端掃碼界面進行掃碼
**屬性**|**類型**|**描述**
---|---|---
onlyFromCamera|boolean|是否只能從相機掃碼,不允許從相冊選擇圖片
scanType|Array|掃碼類型
success|function|接口調用成功的回調函數
fail|function|接口調用失敗的回調函數
complete|function|接口調用結束的回調函數(調用成功、失敗都會執行)
> scanType合法值
**屬性**|**描述**
---|---
barCode|一維碼
qrCode|二維碼
datamatrix|Data Matrix 碼
pdf417|PDF417 條碼
> js示例:
```js
Page({
onLoad: function (options) {
wx.scanCode({
onlyFromCamera : true,
scanType : ['qrCode'],
success(e) {
console.log(e);
console.log('成功');
},
fail(){
console.log('失敗');
},
complete(){
console.log('成功或失敗');
}
})
}
})
```
- 序言
- PHP基礎
- 認識PHP
- 環境安裝
- PHP語法
- 流程控制
- PHP數組
- PHP函數
- PHP類與對象
- PHP命名空間
- PHP7新特性
- PHP方法庫
- PHP交互
- 前后端交互
- 項目常規開發流程
- MySQL數據庫
- 會話控制
- Ajax分頁技術
- 細說函數
- 類與對象
- 對象進階
- 類與對象進階
- OOP面向對象
- 設計模式
- 路由與模板引擎
- 異常類
- PHP爬蟲
- PHP抓取函數
- PHP匹配函數
- 正則表達式
- PHP字符串函數
- 抓取實戰
- PHP接口
- 了解接口
- PHP插件
- PHPSpreadsheet
- ThinkPHP6
- 安裝
- 架構
- 數據庫
- 數據庫操作
- 視圖
- 模版
- 模型
- 雜項
- 命令行
- 交互
- 微信小程序
- 介紹
- 配置
- 組件
- 交互
- API
- 其他知識
- 百度小程序
- 介紹
- 配置
- 組件
- 交互
- API
- 其他知識
- Linux
- 服務器上線流程
- 安裝svn
- MySQL
- 認識MySQL
- MySQL函數
- 雜項
- composer依賴管理工具