API · 程序員講師課件

# 百度小程序--API * 小程序開發框架提供豐富的原生 API * 多數 API 的回調都是異步，你需要處理好代碼邏輯的異步問題 ## 目錄結構 [toc] --- ## `API` 導讀 <table> <tr> <td>一級分類</td> <td>二級分類</td> <td>API</td> <td>描述</td> </tr> <tr> <td rowspan="8">基礎</td> <td rowspan="8">應用級事件</td> <td>swan.onPageNotFound</td> <td>監聽小程序要打開的頁面不存在事件。該事件與 App.onPageNotFound 的回調時機一致</td> </tr> <tr> <td>swan.onError</td> <td>監聽小程序錯誤事件。如腳本錯誤或API調用報錯等</td> </tr> <tr> <td>swan.onAppShow</td> <td>監聽小程序錯誤事件。如腳本錯誤或API調用報錯等。該事件與 App.onError 的回調時機與參數一致</td> </tr> <tr> <td>swan.onAppHide</td> <td>監聽小程序切后臺事件。該事件與 App.onHide 的回調時機一致</td> </tr> <tr> <td>swan.offPageNotFound</td> <td>取消監聽小程序要打開的頁面不存在事件</td> </tr> <tr> <td>swan.offError</td> <td>取消監聽小程序錯誤事件</td> </tr> <tr> <td>swan.offAppShow</td> <td>取消監聽小程序切前臺事件</td> </tr> <tr> <td>swan.offAppHide</td> <td>取消監聽小程序切后臺事件</td> </tr> <tr> <td rowspan="10">網絡</td> <td>請求</td> <td>swan.request</td> <td>發起網絡請求</td> </tr> <tr> <td rowspan="2">上傳、下載</td> <td>swan.uploadFile</td> <td>將本地資源上傳到開發者服務器</td> </tr> <tr> <td>swan.downloadFile</td> <td>下載文件資源到本地</td> </tr> <tr> <td rowspan="7">WebSocket</td> <td>swan.connectSocket</td> <td>創建一個 WebSocket 連接</td> </tr> <tr> <td>swan.onSocketOpen</td> <td>監聽 WebSocket 連接打開事件</td> </tr> <tr> <td>swan.onSocketError</td> <td>監聽 WebSocket 錯誤</td> </tr> <tr> <td>swan.sendSocketMessage</td> <td>通過 WebSocket 連接發送數據</td> </tr> <tr> <td>swan.onSocketMessage</td> <td>監聽 WebSocket 接受到服務器的消息事件</td> </tr> <tr> <td>swan.closeSocket</td> <td>關閉 WebSocket 連接</td> </tr> <tr> <td>swan.onSocketClose</td> <td>監聽 WebSocket 關閉</td> </tr> <tr> <td rowspan="24">AI</td> <td rowspan="4">文字識別</td> <td>swan.ai.ocrIdCard</td> <td>用戶向服務請求識別身份證，身份證識別包括正面和背面</td> </tr> <tr> <td>swan.ai.ocrBankCard</td> <td>識別銀行卡并返回卡號、發卡行和卡片類型</td> </tr> <tr> <td>swan.ai.ocrDrivingLicense</td> <td>對機動車駕駛證所有關鍵字段進行識別</td> </tr> <tr> <td>swan.ai.ocrVehicleLicense</td> <td>對機動車行駛證正本所有關鍵字段進行識別</td> </tr> <tr> <td>文本審核</td> <td>swan.ai.textReview</td> <td>運用業界領先的深度學習技術，判斷一段文本內容是否符合網絡發文規范，實現自動化、智能化的文本審核</td> </tr> <tr> <td>語音合成</td> <td>swan.ai.textToAudio</td> <td>將文本轉換為可以播放的 mp3 文件</td> </tr> <tr> <td>圖像審核</td> <td>swan.ai.imageAudit</td> <td>自定義圖像審核</td> </tr> <tr> <td rowspan="7">圖像識別</td> <td>swan.ai.advancedGeneralIdentify</td> <td>通用物體及場景識別，即對于輸入的一張圖片（可正常解碼，且長寬比適宜），輸出圖片中的多個物體及場景標簽</td> </tr> <tr> <td>swan.ai.objectDetectIdentify</td> <td>用戶向服務請求檢測圖像中的主體位置</td> </tr> <tr> <td>swan.ai.carClassify</td> <td>用于檢測一張車輛圖片的具體車型，即對于輸入的一張圖片（可正常解碼，且長寬比適宜），輸出圖片的車輛品牌及型號、顏色及年份、位置信息</td> </tr> <tr> <td>swan.ai.dishClassify</td> <td>用于菜品識別，即對于輸入的一張圖片（可正常解碼，且長寬比適宜），輸出圖片的菜品名稱、卡路里信息、置信度</td> </tr> <tr> <td>swan.ai.logoClassify</td> <td>用于檢測和識別圖片中的品牌 LOGO 信息</td> </tr> <tr> <td>swan.ai.animalClassify</td> <td>該請求用于識別一張圖片，即對于輸入的一張圖片（可正常解碼，且長寬比較合適），輸出動物識別結果</td> </tr> <tr> <td>swan.ai.plantClassify</td> <td>該請求用于識別一張圖片，即對于輸入的一張圖片（可正常解碼，且長寬比較合適），輸出植物識別結果</td> </tr> <tr> <td>語音識別</td> <td>swan.ai.getVoiceRecognizer</td> <td>獲取全局唯一的語音識別器 voiceRecognizer</td> </tr> <tr> <td rowspan="8">人臉識別</td> <td>swan.ai.faceDetect</td> <td>人臉檢測，檢測圖片中的人臉并標記出相應的信息位置，同時可以展示出人臉的關鍵信息和屬性信息，比如年齡，性別等</td> </tr> <tr> <td>swan.ai.faceMatch</td> <td>人臉對比，支持兩張人臉圖片的相似度對比，圖片類型可以為：生活照，證件照，身份證芯片照或者帶網紋照</td> </tr> <tr> <td>swan.ai.faceSearch</td> <td>人臉搜索，傳入人臉圖片，支持在指定人臉圖片集合中，找到與傳入圖片中人臉最為相似的圖片</td> </tr> <tr> <td>swan.ai.facePersonVerify</td> <td>公安驗證，基于姓名和身份證號，調取公民身份證小圖（源自公安系統），將當前獲取的人臉圖片，與此證件小圖進行對比，得出比對分數</td> </tr> <tr> <td>swan.ai.facePersonIdmatch</td> <td>身份證和名字對比，驗證用戶輸入的身份證號碼和姓名是否匹配，用于判斷用戶信息是否真實</td> </tr> <tr> <td>swan.ai.faceVerify</td> <td>在線活體檢測，基于單張圖片，判斷圖片中的人臉是否為二次翻拍</td> </tr> <tr> <td>swan.ai.faceLivenessSessioncode</td> <td>H5活體檢測-語音校驗碼，為防止用戶提交非當前操作的視頻，在錄制視頻時，隨機分配一個數字，用戶需要讀出這個數字，在后續識別時校驗，以判斷視頻是否為現場錄制</td> </tr> <tr> <td>swan.ai.faceLivenessVerify</td> <td>H5活體檢測-視頻活體檢測，錄制并上傳的視頻，會在云端進行隨機抽幀分析，并得出最終的活體檢測分數</td> </tr> <tr> <td>詞法分析</td> <td>swan.ai.nlpLexerCustom</td> <td>詞法分析，提供分詞、詞性標注、專名識別三大功能</td> </tr> <tr> <td rowspan="15">媒體</td> <td rowspan="5">圖片</td> <td>swan.chooseImage</td> <td>從本地相冊選擇圖片或使用相機拍照</td> </tr> <tr> <td>swan.previewImage</td> <td>預覽圖片</td> </tr> <tr> <td>swan.getImageInfo</td> <td>獲取圖片信息</td> </tr> <tr> <td>swan.saveImageToPhotosAlbum</td> <td>保存圖片到系統相冊，需要用戶授權</td> </tr> <tr> <td>swan.chooseAlbum</td> <td>打開本地相冊，相冊內可以同時包含圖片和視頻</td> </tr> <tr> <td>錄音管理</td> <td>swan.getRecorderManager</td> <td>獲取全局唯一的錄音管理器 recorderManager</td> </tr> <tr> <td>背景音頻</td> <td>swan.getBackgroundAudioManager</td> <td>獲取全局唯一的背景音頻管理器 backgroundAudioManager</td> </tr> <tr> <td rowspan="2">音頻組件</td> <td>swan.createInnerAudioContext</td> <td>創建并返回內部 audio 上下文 innerAudioContext 對象</td> </tr> <tr> <td>swan.setInnerAudioOption</td> <td>對innerAudioContext進行小程序內部的全局設置</td> </tr> <tr> <td rowspan="2">視頻</td> <td>swan.chooseVideo</td> <td>拍攝視頻或從手機相冊中選視頻，返回視頻的臨時文件路徑</td> </tr> <tr> <td>swan.saveVideoToPhotosAlbum</td> <td>保存視頻到系統相冊。需要用戶授權</td> </tr> <tr> <td rowspan="1">視頻組件</td> <td>swan.createVideoContext</td> <td>創建并返回 video 上下文 videoContext 對象</td> </tr> <tr> <td rowspan="1">直播組件</td> <td>swan.createLivePlayerContext</td> <td>操作對應的 < live-player/> 組件</td> </tr> <tr> <td rowspan="1">相機組件</td> <td>swan.createCameraContext</td> <td>創建并返回 camera 上下文 cameraContext對象</td> </tr> <tr> <td rowspan="1">AR相機</td> <td>swan.createARCameraContext</td> <td>創建并返回 ar-camera 上下文 ARCameraContext對象</td> </tr> <tr> <td rowspan="6">文件</td> <td rowspan="4">保存、獲取文件</td> <td>swan.saveFile</td> <td>保存文件到本地</td> </tr> <tr> <td>swan.getFileInfo</td> <td>獲取文件信息</td> </tr> <tr> <td>swan.getSavedFileList</td> <td>獲取本地已保存的文件列表</td> </tr> <tr> <td>swan.getSavedFileInfo</td> <td>獲取本地文件的文件信息</td> </tr> <tr> <td rowspan="1">刪除文件</td> <td>swan.removeSavedFile</td> <td>刪除本地存儲的文件</td> </tr> <tr> <td rowspan="1">新文件</td> <td>swan.openDocument</td> <td>新開頁面打開文檔，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx</td> </tr> <tr> <td rowspan="10">數據存儲</td> <td rowspan="6">存儲數據</td> <td>swan.setStorage</td> <td>將數據存儲在本地緩存中指定的 key 中</td> </tr> <tr> <td>swan.setStorageSync</td> <td>將數據存儲在本地緩存中指定的 key 中</td> </tr> <tr> <td>swan.getStorage</td> <td>從本地緩存中異步獲取指定 key 對應的內容</td> </tr> <tr> <td>swan.getStorageSync</td> <td>從本地緩存中同步獲取指定 key 對應的內容</td> </tr> <tr> <td>swan.getStorageInfo</td> <td>異步獲取當前 storage 的相關信息</td> </tr> <tr> <td>swan.getStorageInfoSync</td> <td>同步獲取當前 storage 的相關信息</td> </tr> <tr> <td rowspan="4">存儲清理</td> <td>swan.removeStorage</td> <td>從本地緩存中異步移除指定 key</td> </tr> <tr> <td>swan.removeStorageSync</td> <td>從本地緩存中同步移除指定 key</td> </tr> <tr> <td>swan.clearStorage</td> <td>清理本地數據緩存</td> </tr> <tr> <td>swan.clearStorageSync</td> <td>同步清理本地數據緩存</td> </tr> <tr> <td rowspan="4">位置</td> <td rowspan="2">獲取位置</td> <td>swan.getLocation</td> <td>獲取當前的地理位置、速度</td> </tr> <tr> <td>swan.chooseLocation</td> <td>打開地圖選擇位置</td> </tr> <tr> <td rowspan="1">查看位置</td> <td>swan.openLocation</td> <td>使用宿主 App 內置地圖查看位置</td> </tr> <tr> <td rowspan="1">地圖組件</td> <td>swan.createMapContext</td> <td>創建并返回 map 上下文 mapContext 對象</td> </tr> <tr> <td rowspan="38">界面</td> <td rowspan="4">繪圖</td> <td>swan.createCanvasContext</td> <td>繪圖上下文的創建</td> </tr> <tr> <td>swan.canvasGetImageData</td> <td>用來描述 canvas 區域隱含的像素數據</td> </tr> <tr> <td>swan.canvasPutImageData</td> <td>將像素數據繪制到畫布的方法</td> </tr> <tr> <td>swan.canvasToTempFilePath</td> <td>把當前畫布指定區域的內容導出生成指定大小的圖片，并返回文件路徑</td> </tr> <tr> <td rowspan="6">交互反饋</td> <td>swan.showToast</td> <td>顯示消息提示框</td> </tr> <tr> <td>swan.showLoading</td> <td>顯示 loading 提示框, 需主動調用 hideLoading 才能關閉提示框</td> </tr> <tr> <td>swan.hideToast</td> <td>隱藏消息提示框</td> </tr> <tr> <td>swan.hideLoading</td> <td>隱藏 loading 提示框</td> </tr> <tr> <td>swan.showModal</td> <td>顯示模態彈窗</td> </tr> <tr> <td>swan.showActionSheet</td> <td>顯示操作菜單</td> </tr> <tr> <td rowspan="4">導航欄</td> <td>swan.setNavigationBarTitle</td> <td>動態設置當前頁面的標題</td> </tr> <tr> <td>swan.showNavigationBarLoading</td> <td>該方法在當前頁面顯示導航條加載動畫</td> </tr> <tr> <td>swan.hideNavigationBarLoading</td> <td>隱藏導航條加載動畫</td> </tr> <tr> <td>swan.setNavigationBarColor</td> <td>動態設置當前頁面導航條的顏色</td> </tr> <tr> <td rowspan="8">設置tabBar</td> <td>swan.setTabBarBadge</td> <td>為 tabBar 某一項的右上角添加文本</td> </tr> <tr> <td>swan.removeTabBarBadge</td> <td>移除tabBar某一項右上角的文本</td> </tr> <tr> <td>swan.showTabBarRedDot</td> <td>顯示 tabBar 某一項的右上角的紅點</td> </tr> <tr> <td>swan.hideTabBarRedDot</td> <td>隱藏 tabBar 某一項的右上角的紅點</td> </tr> <tr> <td>swan.setTabBarStyle</td> <td>動態設置 tabBar 的整體樣式</td> </tr> <tr> <td>swan.setTabBarItem</td> <td>動態設置 tabBar 某一項的內容</td> </tr> <tr> <td>swan.showTabBar</td> <td>顯示 tabBar</td> </tr> <tr> <td>swan.hideTabBar</td> <td>隱藏 tabBar</td> </tr> <tr> <td rowspan="5">導航</td> <td>swan.navigateTo</td> <td>保留當前頁面，跳轉到應用內的某個頁面</td> </tr> <tr> <td>swan.redirectTo</td> <td>關閉當前頁面，跳轉到應用內的某個頁面</td> </tr> <tr> <td>swan.switchTab</td> <td>跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面</td> </tr> <tr> <td>swan.navigateBack</td> <td>關閉當前頁面，跳轉到應用內的某個頁面</td> </tr> <tr> <td>swan.reLaunch</td> <td>關閉所有頁面，打開到應用內的某個頁面</td> </tr> <tr> <td rowspan="1">動畫</td> <td>swan.createAnimation</td> <td>創建一個動畫實例 animation</td> </tr> <tr> <td rowspan="1">位置</td> <td>swan.pageScrollTo</td> <td>將頁面滾動到目標位置</td> </tr> <tr> <td rowspan="2">背景</td> <td>swan.setBackgroundColor</td> <td>設置窗口的背景顏色</td> </tr> <tr> <td>swan.setBackgroundTextStyle</td> <td>設置窗口下拉背景loading樣式</td> </tr> <tr> <td rowspan="2">下拉刷新</td> <td>swan.startPullDownRefresh</td> <td>開始下拉刷新，調用后觸發下拉刷新動畫</td> </tr> <tr> <td>swan.stopPullDownRefresh</td> <td>停止當前頁面下拉刷新</td> </tr> <tr> <td rowspan="1">自定義組件</td> <td>swan.nextTick</td> <td>延遲一部分操作到下一個時間片再執行</td> </tr> <tr> <td rowspan="1">菜單</td> <td>swan.getMenuButtonBoundingClientRect</td> <td>獲取菜單按鈕（右上角膠囊按鈕）的布局位置信息</td> </tr> <tr> <td rowspan="2">節點信息</td> <td>swan.createIntersectionObserver</td> <td>創建并返回一個 IntersectionObserver 對象實例</td> </tr> <tr> <td>swan.createSelectorQuery</td> <td>返回一個 SelectorQuery 對象實例</td> </tr> <tr> <td rowspan="1">小程序引導</td> <td>swan.showFavoriteGuide</td> <td>支持在小程序內調起添加到我的小程序引導組件，引導用戶添加到我的小程序</td> </tr> <tr> <td rowspan="29">設備</td> <td rowspan="4">系統信息</td> <td>swan.getSystemInfo</td> <td>獲取系統信息</td> </tr> <tr> <td>swan.getSystemInfoSync</td> <td>獲取系統信息同步接口</td> </tr> <tr> <td>swan.getEnvInfoSync</td> <td>獲取運行環境信息同步接口</td> </tr> <tr> <td>swan.canIUse</td> <td>判斷智能小程序的API，回調，參數，組件等是否在當前版本可用</td> </tr> <tr> <td rowspan="1">內存</td> <td>swan.onMemoryWarning</td> <td>監聽內存不足的告警事件</td> </tr> <tr> <td rowspan="2">內存</td> <td>swan.getNetworkType</td> <td>獲取網絡類型</td> </tr> <tr> <td>swan.onNetworkStatusChange</td> <td>監聽網絡狀態變化</td> </tr> <tr> <td rowspan="3">加速度計</td> <td>swan.onAccelerometerChange</td> <td>監聽加速度數據</td> </tr> <tr> <td>swan.startAccelerometer</td> <td>開始監聽加速度數據</td> </tr> <tr> <td>swan.stopAccelerometer</td> <td>停止監聽加速度數據</td> </tr> <tr> <td rowspan="3">羅盤</td> <td>swan.onCompassChange</td> <td>監聽羅盤數據</td> </tr> <tr> <td>swan.startCompass</td> <td>開始監聽羅盤數據</td> </tr> <tr> <td>swan.stopCompass</td> <td>停止監聽羅盤數據</td> </tr> <tr> <td rowspan="3">設備方向</td> <td>swan.onDeviceMotionChange</td> <td>監聽設備方向變化事件</td> </tr> <tr> <td>swan.startDeviceMotionListening</td> <td>開始監聽設備方向的變化</td> </tr> <tr> <td>swan.stopDeviceMotionListening</td> <td>停止監聽設備方向的變化</td> </tr> <tr> <td rowspan="2">獲取電量</td> <td>swan.getBatteryInfo</td> <td>支持在小程序內獲取當前設備電量</td> </tr> <tr> <td>swan.getBatteryInfoSync</td> <td>獲取當前設備電量同步接口，ios系統不可用</td> </tr> <tr> <td rowspan="1">掃碼</td> <td>swan.scanCode</td> <td>調起客戶端掃碼界面，掃碼成功后返回對應的結果</td> </tr> <tr> <td rowspan="3">屏幕亮度</td> <td>swan.setScreenBrightness</td> <td>設置屏幕亮度</td> </tr> <tr> <td>swan.getScreenBrightness</td> <td>獲取屏幕亮度</td> </tr> <tr> <td>swan.setKeepScreenOn</td> <td>設置是否保持常亮狀態</td> </tr> <tr> <td rowspan="1">用戶截屏</td> <td>swan.onUserCaptureScreen</td> <td>監聽用戶主動截屏事件，用戶使用系統截屏按鍵截屏時觸發此事件</td> </tr> <tr> <td rowspan="2">振動</td> <td>swan.vibrateLong</td> <td>使手機發生較長時間的振動</td> </tr> <tr> <td>swan.vibrateShort</td> <td>使手機發生較短時間的振動</td> </tr> <tr> <td rowspan="1">手機聯系人</td> <td>swan.addPhoneContact</td> <td>寫入手機系統通訊錄</td> </tr> <tr> <td rowspan="1">撥打電話</td> <td>swan.makePhoneCall</td> <td>撥打電話</td> </tr> <tr> <td rowspan="2">剪貼板</td> <td>swan.setClipboardData</td> <td>設置系統剪貼板的內容</td> </tr> <tr> <td>swan.getClipboardData</td> <td>獲取系統剪貼板內容</td> </tr> <tr> <td rowspan="2">第三方平臺</td> <td rowspan="2">第三方數據</td> <td>swan.getExtConfig</td> <td>獲取第三方平臺自定義的數據字段</td> </tr> <tr> <td>swan.getExtConfigSync</td> <td>swan.getExtConfig的同步版本</td> </tr> <tr> <td rowspan="28">開放接口</td> <td rowspan="3">登陸</td> <td>swan.login</td> <td>獲取用戶登錄憑證</td> </tr> <tr> <td>swan.checkSession</td> <td>檢測當前用戶登錄態是否有效</td> </tr> <tr> <td>swan.isLoginSync</td> <td>獲取宿主 App登錄狀態</td> </tr> <tr> <td rowspan="1">授權</td> <td>swan.authorize</td> <td>提前向用戶發起授權請求</td> </tr> <tr> <td rowspan="2">授權</td> <td>swan.getSwanId</td> <td>獲取 swanid</td> </tr> <tr> <td>swan.getUserInfo</td> <td>獲取用戶信息</td> </tr> <tr> <td rowspan="2">設置</td> <td>swan.openSetting</td> <td>調起客戶端智能小程序設置界面，返回用戶設置的操作結果</td> </tr> <tr> <td>swan.getSetting</td> <td>獲取用戶的當前設置</td> </tr> <tr> <td rowspan="2">分享</td> <td>swan.openShare</td> <td>調起分享面板</td> </tr> <tr> <td>swan.shareFile</td> <td>支持調起系統分享面板將文件分享到其他App</td> </tr> <tr> <td rowspan="1">收貨地址</td> <td>swan.chooseAddress</td> <td>調起用戶編輯收貨地址原生界面</td> </tr> <tr> <td rowspan="1">百度支付</td> <td>swan.requestPolymerPayment</td> <td>百度收銀臺，聚合了主流的百度錢包、微信、支付寶、網銀等多種支付方式</td> </tr> <tr> <td rowspan="1">獲取發票</td> <td>swan.chooseInvoiceTitle</td> <td>選擇用戶的發票抬頭</td> </tr> <tr> <td rowspan="2">打開小程序</td> <td>swan.navigateToSmartProgram</td> <td>打開另一個小程序</td> </tr> <tr> <td>swan.navigateBackSmartProgram</td> <td>返回到上一個小程序</td> </tr> <tr> <td rowspan="4">頁面基礎信息</td> <td>swan.setPageInfo</td> <td>設置各類頁面基礎信息</td> </tr> <tr> <td>swan.setMetaDescription</td> <td>設置 web 版小程序 description meta 信息</td> </tr> <tr> <td>swan.setMetaKeywords</td> <td>設置 web 版小程序 keywords meta 信息</td> </tr> <tr> <td>swan.setDocumentTitle</td> <td>動態設置當前頁面的標題</td> </tr> <tr> <td rowspan="1">分包預下載</td> <td>swan.loadSubPackage</td> <td>提前下載好子包的資源</td> </tr> <tr> <td rowspan="1">更新</td> <td>swan.getUpdateManager</td> <td>獲取全局唯一的版本更新管理器，用于管理小程序更新</td> </tr> <tr> <td rowspan="1">調試</td> <td>swan.setEnableDebug</td> <td>設置是否打開調試開關，此開關對正式版也能生效</td> </tr> <tr> <td rowspan="1">數據分析</td> <td>swan.reportAnalytics</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="1">風控</td> <td>swan.getSystemRiskInfo</td> <td>獲取用于得到風控信息的加密信息對象</td> </tr> </table> --- ## 一、界面--交互反饋api ```php 1. swan.showToast 顯示消息提示框 2. swan.hideToast 隱藏消息提示框 3. swan.showLoading 顯示 loading 提示框。需主動調用 swan.hideLoading 才能關閉提示框 4. swan.hideLoading 隱藏 loading 提示框 5. swan.showModal 顯示模態對話框 6. swan.showActionSheet 顯示操作菜單 ``` --- ### 1. `swan.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) { swan.showToast({ title: '成功', icon: 'success', image: 'img/1.png', // 放在小程序根目錄，icon就不會顯示了 duration : 1000, mask : true, success(){ console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 2. `swan.hideToast` 隱藏消息提示框 **屬性**|**類型**|**必填**|**描述** ---|---|---|--- success|function|否|接口調用成功的回調函數 fail|function|否|接口調用失敗的回調函數 complete|function|否|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.hideToast({ success(){ console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 3. `swan.showLoading` 顯示 loading 提示框。需主動調用 `swan.hideLoading` 才能關閉提示框 **屬性**|**類型**|**必填**|**描述** ---|---|---|--- title|string|是|提示的內容 mask|boolean|否|是否顯示透明蒙層，防止觸摸穿透 success|function|否|接口調用成功的回調函數 fail|function|否|接口調用失敗的回調函數 complete|function|否|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.showLoading({ title: '加載中', mask : true, success(){ console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 4. `swan.hideLoading` 隱藏 loading 提示框 **屬性**|**類型**|**必填**|**描述** ---|---|---|--- success|function|否|接口調用成功的回調函數 fail|function|否|接口調用失敗的回調函數 complete|function|否|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.hideLoading({ success(){ console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 5. `swan.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) { swan.showModal({ title: '提示', content: '這是一個模態彈窗', showCancel : true, cancelText : '取消按鈕', cancelColor : '#333', confirmText : '確定按鈕', confirmColor : 'red', success(){ console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 6. `swan.showActionSheet` 顯示模態對話框 **屬性**|**類型**|**必填**|**描述** ---|---|---|--- itemList|Array|是|按鈕的文字數組，數組長度最大為 6 itemColor|string|否|按鈕的文字顏色 success|function|否|接口調用成功的回調函數 fail|function|否|接口調用失敗的回調函數 complete|function|否|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.showActionSheet({ itemList: [ '歐陽克', '黃蓉', '郭靖', '楊康', '穆念慈' ], itemColor: '#333', success(){ console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ## 二、界面--導航api ```php 1. swan.switchTab 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面 2. swan.reLaunch 關閉所有頁面，打開到應用內的某個頁面 3. swan.redirectTo 關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面 4. swan.navigateTo 保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面 5. swan.navigateBack 關閉當前頁面，返回上一頁面或多級頁面 ``` --- ### 1. `swan.switchTab` 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面 **屬性**|**類型**|**必填**|**描述** ---|---|---|--- url|string|是|需要跳轉的 tabBar 頁面的路徑，路徑后不能帶參數。 success|function|否|接口調用成功的回調函數 fail|function|否|接口調用失敗的回調函數 complete|function|否|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.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. `swan.reLaunch` 關閉所有頁面，打開到應用內的某個頁面 **屬性**|**類型**|**必填**|**描述** ---|---|---|--- url|string|是|需要跳轉的應用內頁面路徑，路徑后可以帶參數。 success|function|否|接口調用成功的回調函數 fail|function|否|接口調用失敗的回調函數 complete|function|否|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.reLaunch({ url: 'a?id=1', success(){ console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 3. `swan.redirectTo` 關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面 **屬性**|**類型**|**必填**|**描述** ---|---|---|--- url|string|是|需要跳轉的應用內非 tabBar 的頁面的路徑, 路徑后可以帶參數。 success|function|否|接口調用成功的回調函數 fail|function|否|接口調用失敗的回調函數 complete|function|否|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.redirectTo({ url: 'a?id=1', success(){ console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 4. `swan.navigateTo` 保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面 **屬性**|**類型**|**必填**|**描述** ---|---|---|--- url|string|是|需要跳轉的應用內非 tabBar 的頁面的路徑, 路徑后可以帶參數。 success|function|否|接口調用成功的回調函數 fail|function|否|接口調用失敗的回調函數 complete|function|否|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.navigateTo({ url: 'a?id=1', success(){ console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 5. `swan.navigateBack` 關閉當前頁面，返回上一頁面或多級頁面 **屬性**|**類型**|**必填**|**描述** ---|---|---|--- delta|string|是|返回的頁面數，如果 delta 大于現有頁面數，則返回到首頁，最多10層 success|function|否|接口調用成功的回調函數 fail|function|否|接口調用失敗的回調函數 complete|function|否|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.navigateBack({ delta: 10, success(){ console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ## 三、網絡--請求api ```php 1. swan.request 發起 HTTPS 網絡請求 ``` --- ### 1. `swan.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) { swan.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. swan.previewImage 在新頁面中全屏預覽圖片。預覽的過程中用戶可以進行保存圖片、發送給朋友等操作。 ``` --- ### 1. `swan.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. swan.authorize 提前向用戶發起授權請求 2. swan.chooseAddress 獲取用戶收貨地址 3. swan.chooseInvoiceTitle 選擇用戶的發票抬頭 4. swan.chooseInvoice 選擇用戶已有的發票 5. swan.getUserInfo 獲取用戶信息 ``` --- ### 1. `swan.authorize` 提前向用戶發起授權請求 **屬性**|**類型**|**描述** ---|---|--- scope|string|需要獲取權限的 scope success|function|接口調用成功的回調函數 fail|function|接口調用失敗的回調函數 complete|function|接口調用結束的回調函數（調用成功、失敗都會執行） > scope合法值： **屬性**|**對應接口**|**描述** ---|---|--- scope.address|swan.chooseAddress|通訊地址 scope.invoiceTitle|swan.chooseInvoiceTitle|發票抬頭 scope.invoice|swan.chooseInvoice|獲取發票 scope.userInfo|swan.getUserInfo|用戶信息 > js示例： ```js Page({ onLoad: function (options) { swan.authorize({ scope: 'scope.address', success(e) { console.log(e); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 2. `swan.chooseAddress` 獲取用戶收貨地址 **屬性**|**類型**|**描述** ---|---|--- success|function|接口調用成功的回調函數 fail|function|接口調用失敗的回調函數 complete|function|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例1： ```js Page({ onLoad: function (options) { swan.chooseAddress({ success(e) { console.log(e); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }); } }) ``` > js示例2： ```js Page({ onLoad: function (options) { swan.authorize({ scope: 'scope.address', success(e) { swan.chooseAddress({ success(e) { console.log(e); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 5. `swan.getUserInfo` 獲取用戶信息 **屬性**|**類型**|**描述** ---|---|--- success|function|接口調用成功的回調函數 fail|function|接口調用失敗的回調函數 complete|function|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例1： ```js Page({ onLoad: function (options) { // 這樣調用，會失敗 swan.getUserInfo({ success(e) { console.log(e); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }); } }) ``` > js示例2： ```js Page({ onLoad: function (options) { // 授權成功后，還是失敗 // 因為微信已經禁止直接調用微信用戶信息，需要用戶主動請求 swan.authorize({ scope: 'scope.userInfo', success(e) { swan.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. swan.setClipboardData 設置系統剪貼板的內容 2. swan.getClipboardData 獲取系統剪貼板的內容 3. swan.getNetworkType 獲取網絡類型 4. swan.makePhoneCall 撥打電話 5. swan.scanCode 調起客戶端掃碼界面進行掃碼 6. swan.getSystemInfo 獲取系統信息 ``` --- ### 1、`swan.setClipboardData` 設置系統剪貼板的內容 **屬性**|**類型**|**描述** ---|---|--- data|string|剪貼板的內容 success|function|接口調用成功的回調函數 fail|function|接口調用失敗的回調函數 complete|function|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.setClipboardData({ data: '我是歐陽克', success(e) { console.log(e); console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 2、`swan.getClipboardData` 獲取系統剪貼板的內容 **屬性**|**類型**|**描述** ---|---|--- success|function|接口調用成功的回調函數 fail|function|接口調用失敗的回調函數 complete|function|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.getClipboardData({ success(e) { console.log(e); console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 3、`swan.getNetworkType` 獲取網絡類型 **屬性**|**類型**|**描述** ---|---|--- success|function|接口調用成功的回調函數 fail|function|接口調用失敗的回調函數 complete|function|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.getNetworkType({ success(e) { console.log(e); console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 4、`swan.makePhoneCall` 撥打電話 **屬性**|**類型**|**描述** ---|---|--- phoneNumber|string|需要撥打的電話號碼 success|function|接口調用成功的回調函數 fail|function|接口調用失敗的回調函數 complete|function|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.makePhoneCall({ phoneNumber : '13843843843', success(e) { console.log(e); console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 5、`swan.scanCode` 調起客戶端掃碼界面進行掃碼 **屬性**|**類型**|**描述** ---|---|--- success|function|接口調用成功的回調函數 fail|function|接口調用失敗的回調函數 complete|function|接口調用結束的回調函數（調用成功、失敗都會執行） > js示例： ```js Page({ onLoad: function (options) { swan.scanCode({ success(e) { console.log(e); console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ``` --- ### 6、`swan.getSystemInfoSync` 和 `swan.getSystemInfo` 獲取系統信息 **屬性**|**類型**|**描述** ---|---|--- success|function|接口調用成功的回調函數 fail|function|接口調用失敗的回調函數 complete|function|接口調用結束的回調函數（調用成功、失敗都會執行） > 成功返回值： **屬性**|**類型**|**描述** ---|---|--- brand|string|設備品牌 model|string|設備型號 pixelRatio|string|設備像素比 screenWidth|string|屏幕寬度 screenHeight|number|屏幕高度 windowWidth|number|可使用窗口寬度 windowHeight|number|可使用窗口高度 statusBarHeight|number|狀態欄的高度 navigationBarHeight|number|導航欄的高度 language|string|宿主 App 設置的語言 version|string|宿主 App 版本號 system|string|操作系統及版本 platform|string|客戶端平臺 fontSizeSetting|number|用戶字體大小設置 > js示例： ```js Page({ onLoad: function (options) { swan.getSystemInfo({ success(){ console.log(res); console.log('成功'); }, fail(){ console.log('失敗'); }, complete(){ console.log('成功或失敗'); } }) } }) ```