微信小程序api列表匯總包括網(wǎng)絡API,媒體API,文件API ,微信小程序支付流程,位置API,界面API等
更新時間：2022年12月10日 16:03:30 作者：shine001
這篇文章主要介紹了微信小程序api列表匯總包括網(wǎng)絡API,媒體API,文件API ,數(shù)據(jù)API,位置API,界面API,微信小程序支付流程,微信小程序登錄流程等,需要的朋友可以參考下
1）網(wǎng)絡 API 列表：
wx.request 發(fā)起網(wǎng)絡請求 wx.uploadFile 上傳文件 wx.downloadFile 下載文件 wx.connectSocket 創(chuàng)建 WebSocket 連接 wx.onSocketOpen 監(jiān)聽 WebSocket 打開 wx.onSocketError 監(jiān)聽 WebSocket 錯誤 wx.sendSocketMessage 發(fā)送 WebSocket 消息 wx.onSocketMessage 接受 WebSocket 消息 wx.closeSocket 關(guān)閉 WebSocket 連接 wx.onSocketClose 監(jiān)聽 WebSocket 關(guān)閉
2）媒體 API 列表：
wx.chooseImage 從相冊選擇圖片，或者拍照 wx.previewImage 預覽圖片 wx.startRecord 開始錄音 wx.stopRecord 結(jié)束錄音 wx.playVoice 播放語音 wx.pauseVoice 暫停播放語音 wx.stopVoice 結(jié)束播放語音 wx.getBackgroundAudioPlayerState 獲取音樂播放狀態(tài) wx.playBackgroundAudio 播放音樂 wx.pauseBackgroundAudio 暫停播放音樂 wx.seekBackgroundAudio 控制音樂播放進度 wx.stopBackgroundAudio 停止播放音樂 wx.onBackgroundAudioPlay 監(jiān)聽音樂開始播放 wx.onBackgroundAudioPause 監(jiān)聽音樂暫停 wx.onBackgroundAudioStop 監(jiān)聽音樂結(jié)束 wx.chooseVideo 從相冊選擇視頻，或者拍攝
3）文件 API 列表：
wx.saveFile 保存文件 wx.getSavedFileList 獲取已保存的文件列表 wx.getSavedFileInfo 獲取已保存的文件信息 wx.removeSavedFile 刪除已保存的文件信息 wx.openDocument 打開文件
4）數(shù)據(jù) API 列表：
wx.getStorage 獲取本地數(shù)據(jù)緩存 wx.getStorageSync 獲取本地數(shù)據(jù)緩存 wx.setStorage 設(shè)置本地數(shù)據(jù)緩存 wx.setStorageSync 設(shè)置本地數(shù)據(jù)緩存 wx.getStorageInfo 獲取本地緩存的相關(guān)信息 wx.getStorageInfoSync 獲取本地緩存的相關(guān)信息 wx.removeStorage 刪除本地緩存內(nèi)容 wx.removeStorageSync 刪除本地緩存內(nèi)容 wx.clearStorage 清理本地數(shù)據(jù)緩存 wx.clearStorageSync 清理本地數(shù)據(jù)緩存
5）位置 API 列表：
wx.getLocation 獲取當前位置 wx.chooseLocation 打開地圖選擇位置 wx.openLocation 打開內(nèi)置地圖 wx.createMapContext 地圖組件控制
6）設(shè)備 API 列表：
wx.getNetworkType 獲取網(wǎng)絡類型 wx.onNetworkStatusChange 監(jiān)聽網(wǎng)絡狀態(tài)變化 wx.getSystemInfo 獲取系統(tǒng)信息 wx.getSystemInfoSync 獲取系統(tǒng)信息 wx.onAccelerometerChange 監(jiān)聽加速度數(shù)據(jù) wx.startAccelerometer 開始監(jiān)聽加速度數(shù)據(jù) wx.stopAccelerometer 停止監(jiān)聽加速度數(shù)據(jù) wx.onCompassChange 監(jiān)聽羅盤數(shù)據(jù) wx.startCompass 開始監(jiān)聽羅盤數(shù)據(jù) wx.stopCompass 停止監(jiān)聽羅盤數(shù)據(jù) wx.setClipboardData 設(shè)置剪貼板內(nèi)容 wx.getClipboardData 獲取剪貼板內(nèi)容 wx.makePhoneCall 撥打電話 wx.scanCode 掃碼
7）界面 API 列表：
wx.showToast 顯示提示框 wx.showLoading 顯示加載提示框 wx.hideToast 隱藏提示框 wx.hideLoading 隱藏提示框 wx.showModal 顯示模態(tài)彈窗 wx.showActionSheet 顯示菜單列表 wx.setNavigationBarTitle 設(shè)置當前頁面標題 wx.showNavigationBarLoading 顯示導航條加載動畫 wx.hideNavigationBarLoading 隱藏導航條加載動畫 wx.navigateTo 新窗口打開頁面 wx.redirectTo 原窗口打開頁面 wx.switchTab 切換到 tabbar 頁面 wx.navigateBack 退回上一個頁面 wx.createAnimation 動畫 wx.createContext 創(chuàng)建繪圖上下文 wx.drawCanvas 繪圖 wx.stopPullDownRefresh 停止下拉刷新動畫
8）WXML節(jié)點信息 API 列表：
wx.createSelectorQuery 創(chuàng)建查詢請求 selectorQuery.select 根據(jù)選擇器選擇單個節(jié)點 selectorQuery.selectAll 根據(jù)選擇器選擇全部節(jié)點 selectorQuery.selectViewport 選擇顯示區(qū)域 nodesRef.boundingClientRect 獲取布局位置和尺寸 nodesRef.scrollOffset 獲取滾動位置 nodesRef.fields 獲取任意字段 selectorQuery.exec 執(zhí)行查詢請求
9）開放接口：
wx.login 登錄 wx.getUserInfo 獲取用戶信息 wx.chooseAddress 獲取用戶收貨地址 wx.requestPayment 發(fā)起微信支付 wx.addCard 添加卡券 wx.openCard 打開卡券
二、簡單描述微信小程序的相關(guān)文件類型？
1. .wxml
---是框架設(shè)計的一套標簽語言，結(jié)合基礎(chǔ)組件，事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)，內(nèi)部主要是微信自己定義的一套組件。
2. .wxss
---是一套樣式語言，用于描述wxml的組件樣式
3. .js
---是邏輯處理，網(wǎng)絡請求
4. .json
--- 而文件會報錯小恒旭設(shè)置，如頁面注冊，頁面標題及tabBar
5. app.json
---必須要有這個文件，因為微信框架把這個文件作為配置文件入口，整個小程序的全局配置，包括頁面注冊，網(wǎng)絡配置，以及小程序的window背景色，配置導航條樣式，配置默認標題。
pages字段 —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。
window字段 —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這里的
tab字段—小程序全局頂部或底部tab
6. app.js---可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)，聲明全局變量
三、你是怎么封裝微信小程序的數(shù)據(jù)請求的？
1.將所有的接口放在統(tǒng)一的js文件中并導出 2.在app.js中創(chuàng)建封裝請求數(shù)據(jù)的方法 3.在子頁面中調(diào)用封裝的方法請求數(shù)據(jù) 1.在根目錄下創(chuàng)建utils目錄及api.js文件和apiConfig.js文件； 2.在apiConfig.js 封裝基礎(chǔ)的get, post 和 put， upload等請求方法，設(shè)置請求體，帶上token和異常處理等； 3.在api中引入apiConfig.js封裝好的請求方法，根據(jù)頁面數(shù)據(jù)請求的urls, 設(shè)置對應的方法并導出； 4.在具體的頁面中導入；
四、有哪些參數(shù)傳值的方法？
1.給html元素添加data-*屬性來傳遞我們需要的值，然后通過e.currentTarget.dataset或者是onload的param參數(shù)獲取，但data-名稱 不能有大寫字母和不可存放對象 2.設(shè)置id的方法標識來傳值，通過e.currentTarget.id獲取設(shè)置的id的值，然后通過設(shè)置全局對象的方式傳遞數(shù)值 3.在navigator中添加參數(shù)傳值
五、你使用過哪些方法，來提高微信小程序的應用速度？
1.提高頁面加載速度 2.用戶行為預測 3.減少默認data的大小 4.組件化方案
六、小程序和原生app哪個好？
小程序除了擁有公眾號的地開發(fā)成本，無需下載等優(yōu)勢，在服務請求延時與用戶使用體驗是都得到了較大幅度的提升，使其能夠承載跟復雜的服務功能以及用戶獲得更好的體驗。
七、簡述微信小程序的原理？
小程序本質(zhì)就是一個單頁面應用，所有的頁面渲染和事件處理，都在一個頁面內(nèi)進行，但又可以通過微信客戶端調(diào)用原生的各種接口； 它的架構(gòu)，是數(shù)據(jù)驅(qū)動的架構(gòu)模式，它的UI和數(shù)據(jù)是分離的，所有的頁面更新，都需要通過對數(shù)據(jù)的更改來實現(xiàn)； 它從技術(shù)講和現(xiàn)有的前端開發(fā)差不多，采用JavaScript、WXML、WXSS三種技術(shù)進行開發(fā)； 功能可分為webview和appService兩個部分； webview用來展現(xiàn)UI，appService有來處理業(yè)務邏輯、數(shù)據(jù)及接口調(diào)用； 兩個部分在兩個進程中運行，通過系統(tǒng)層JSBridge實現(xiàn)通信，實現(xiàn)UI的渲染、事件的處理等。
八、分析微信小程序的優(yōu)劣勢？
優(yōu)勢： 1.無需下載，通過搜索或者掃一掃就可以打開；2.良好的用戶體驗，打開速度快 3.開發(fā)成本比app低；4.安卓上可以添加到桌面，與原生app差不多；5.為用戶提供良好的安全保障 劣勢： 1.限制較多，頁面大小不能超過1M,不能打開超過五個層級的頁面； 2.樣式單一；3.推廣面窄，不能分享到朋友圈，只能分享給朋友； 4.依托于微信，無法開發(fā)后臺管理功能
九、微信小程序與h5的區(qū)別？
1.運行環(huán)境的不同---h5的運行環(huán)境是瀏覽器，而微信小程序的運行環(huán)境是微信開發(fā)團隊基于瀏覽器內(nèi)核完全重構(gòu)的一個內(nèi)置解析器，針對小程序?qū)ｉT做了優(yōu)化，配合自己定義的開發(fā)語言標準 2.開發(fā)成本的不同---微信小程序只在微信中運行，所以不用去顧慮瀏覽器兼容性問題 3.獲取系統(tǒng)權(quán)限的不同---系統(tǒng)級權(quán)限都可以和微信小程序無縫銜接 4.生產(chǎn)環(huán)境的運行流暢度
十、怎么解決小程序的異步請求問題?
app.js:
success:function(info){
that.apirtnCallback(info)
}
index.js:
onLoad:function(){
app.apirtnCallback=res=>{
console.log(res)
}
}
小程序支持大部分 ES6 語法
在返回成功的回調(diào)里面處理邏輯
Promise 異步
十一、小程序的雙向綁定和vue哪里不一樣？
小程序必須用this.setData({msg:'111'})方法來將數(shù)據(jù)同步到視圖
十二、小程序的wxss和css的異同？
都是用來描述頁面的樣子； WXSS 具有 CSS 大部分的特性，也做了一些擴充和修改； WXSS新增了尺寸單位，WXSS 在底層支持新的尺寸單位 rpx； WXSS 僅支持部分 CSS 選擇器； WXSS 提供全局樣式與局部樣式1.wxss的圖片引入需要使用外鏈地址；2.沒有body,樣式可直接使用import導入
十三、小程序關(guān)聯(lián)微信公眾號如何確定用戶的唯一性？
使用ax.getUserInfo方法的withCredential為true時，可獲取encryptedData,里面有union_id, 如果開發(fā)者擁有多個移動應用、網(wǎng)站應用、和公眾帳號（包括小程序），可通過 unionid 來區(qū)分用戶的唯一性，因為只要是同一個微信開放平臺帳號下的移動應用、網(wǎng)站應用和公眾帳號（包括小程序），用戶的 unionid 是唯一的。換句話說，同一用戶，對同一個微信開放平臺下的不同應用，unionid 是相同的
十四、如何實現(xiàn)下拉刷新？
用view代替scroll-view，設(shè)置onPullDownRefresh函數(shù)實現(xiàn)
十五、小程序調(diào)用后臺接口遇到哪些問題？
1.數(shù)據(jù)的大小有限制，超過范圍會直接導致整個小程序崩潰，除非重啟； 2.小程序不可以直接渲染文章內(nèi)容頁這類型的html文本內(nèi)容，若需顯示要借住插件，但插件渲染會導致頁面加載變慢
十六、小程序和Vue寫法的區(qū)別
1.循環(huán)遍歷的時候：小程序是wx:for="list",而Vue是v-for="info in list"
2.調(diào)用data模型的時候：小程序是this.data.uinfo,而vue是this.unifo,給模型賦值也不一樣，小程序是this.setData({unifo:1}),而Vue是直接this.unifo=1
十七、 為什么要對小程序進行組件模塊化設(shè)計
1、微信小程序有代碼大小限制，微信小程序最大為2M 2、提高代碼的復用率
十八、 如何進行組件化模塊化設(shè)計
通過WXML的import和include來使用文件模版 使用WXSS的@import引用WXSS文件 使用JS的require來引用JS文件
十九、wx:if與hidden的區(qū)別
wx:if是遇到true的時候顯示，hidden是遇到false的時候顯示 wx:if在隱藏的時候不渲染，而hidden在隱藏的時候仍然渲染，只是不顯示 頻繁切換的話，用wx:if將會消耗更多的資源，因為每次呈現(xiàn)的時候他都會渲染，每次隱藏的時候，他都會銷毀。 如果切換并不頻繁的話，用 wx:if 相對來說較好些，因為它會避免初始就一下渲染那么多。
二十、rpx
微信小程序新定義了一個尺寸單位，可以適配不同分辨率的屏幕，它規(guī)定屏幕寬為750rpx，如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px =750物理像素，1rpx = 0.5px = 1物理像素。
二十一、生命周期函數(shù)
onLoad() 頁面加載時觸發(fā)，只會調(diào)用一次，可獲取當前頁面路徑中的參數(shù)。 onShow() 頁面顯示/切入前臺時觸發(fā)，一般用來發(fā)送數(shù)據(jù)請求； onReady() 頁面初次渲染完成時觸發(fā), 只會調(diào)用一次，代表頁面已可和視圖層進行交互。 onHide() 頁面隱藏/切入后臺時觸發(fā), 如底部 tab 切換到其他頁面或小程序切入后臺等。 onUnload() 頁面卸載時觸發(fā)，如redirectTo或navigateBack到其他頁面時。
二十二、wx.navigateTo無法打開頁面
一個應用同時只能打開5個頁面，當已經(jīng)打開了5個頁面之后，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式，或者使用wx.redirectTo
二十三、 本地資源無法通過 css 獲取
background-image：可以使用網(wǎng)絡圖片，或者 base64，或者使用<image/>標簽
二十四、bindtap和catchtap有什么區(qū)別？`
相同點：首先他們都是作為點擊事件，就是點擊時觸發(fā) 不同點：主要是bindtap不會阻止冒泡事件，而catchtap會阻止冒泡
二十五、簡述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的區(qū)別
wx.navigateTo()：保留當前頁面，跳轉(zhuǎn)到應用內(nèi)的某個頁面。但是不能跳到 tabbar 頁面 wx.redirectTo()：關(guān)閉當前頁面，跳轉(zhuǎn)到應用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面 wx.switchTab()：跳轉(zhuǎn)到 abBar 頁面，并關(guān)閉其他所有非 tabBar 頁面 wx.navigateBack()關(guān)閉當前頁面，返回上一頁面或多級頁面?？赏ㄟ^ getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層 wx.reLaunch()：關(guān)閉所有頁面，打開到應用內(nèi)的某個頁面
二十六、請談談原生開發(fā)小程序、wepy、mpvue 的對比
個人認為，如果是新項目，且沒有舊的 h5 項目遷移，則考慮用小程序原生開發(fā)，好處是相比于第三方框架，坑少。 而如果有 老的 h5 項目是 vue 開發(fā) 或者 也有 h5 項目也需要小程序開發(fā)，則比較適合 wepy 或者 mpvue 來做遷移或者開發(fā)，近期看wepy幾乎不更新了，所以推薦美團的mpvue。 而如果如果團隊前端強大，自己做一套框架也沒問題。
二十七、談談wxml與標準html的異同
都是用來描述頁面的結(jié)構(gòu)；
都由標簽、屬性等構(gòu)成；
標簽名字不一樣，且小程序標簽更少，單一標簽更多；
多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式
WXML僅能在微信小程序開發(fā)者工具中預覽，而HTML可以在瀏覽器內(nèi)預覽
組件封裝不同， WXML對組件進行了重新封裝，
小程序運行在JS Core內(nèi)，沒有DOM樹和window對象，小程序中無法使用window對象和document對象。
二十八、微信小程序常見bug
1.域名必須是HTTPS 2. input組件placeholder字體顏色 3. wx.navigateTo無法跳轉(zhuǎn)到帶tabbar的頁面 4. tabbar在切換時頁面數(shù)據(jù)無法刷新 5.如何去掉自定義button灰色的圓角邊框 6.input textarea是APP的原生組件，z-index層級最高 7.一段文字如何換行 8.設(shè)置最外層標簽的margin-bottom在IOS下不生效 9.小程序中canvas的圖片不支持base64格式 10.回到頁面頂部 11.wx.setStorageSync和wx.getStorageSync報錯問題 12.如何獲取微信群名稱？ 13.new Date跨平臺兼容性問題 14.wx.getSystemInfoSync獲取windowHeight不準確 15.圖片本地資源名稱，盡量使用小寫命名
二十九、 小程序獲取場景值的方法？
let options=wx.getLanchOptionsSync()
三十、小程序onPageScroll方法的使用注意什么？
由于此方法調(diào)用頻繁，不需要時，可以去掉，不要保留空方法，并且使用onPageScroll時，盡量避免使用setData()，盡量減少setData()的使用頻次。
三十一、小程序視圖渲染結(jié)束回調(diào)？
使用setData(data, callback)，在callback回調(diào)方法中添加后續(xù)操作代碼
三十二、小程序同步API和異步API使用時注意事項
像wx.setStorageSync這種以Sync結(jié)尾的API為同步API，使用時使用try-catch來查看異常，如果判定API為異步，可以在其回調(diào)方法success、fail、complete中進行下一步操作。
三十四、簡述微信小程序登錄流程
1.判斷用戶是否登陸過，如果已經(jīng)登陸過，則直接獲取個人信息進入主頁
2.未登錄則引導登錄，直接跳轉(zhuǎn)到登錄頁面，封裝方法獲取code值，調(diào)用wx.login()方法,獲取到用戶信息登陸成功就跳轉(zhuǎn)到個人主頁
//獲取code
wx.login({
success:function(result){
console.log(result)
wx.request({
url:'/login',
data:{
code:result.code
},
success:function(myres){
if(myres.state==='登錄成功'){
wx.setStorageSync('isLogin',true)
wx.navigateBack()
}else{
wx.showToast({
title:''
})
}
}
})
}
})
三十五、微信小程序支付流程
1.小程序調(diào)用登錄接口獲取code，傳遞給商戶服務器用來獲取用戶的openId
小程序調(diào)用wx.login()獲取臨時憑證code,并回轉(zhuǎn)到開發(fā)者服務器，開發(fā)者服務器以code換取用戶唯一表示openid和會話密鑰session_key
getToken:function(){
wx.login({
success:function(res){
var code=res.code
wx.request({
url:商戶服務器接口地址，
data:{
code:code
},
method:'POST',
success:function(res){
wx.setStorageSync('token',res.data)
},
fail:function(res){
conso.sole.log(res.data)
}
})
}
})
}
2.token的生成以及緩存
3.調(diào)用統(tǒng)一下單接口，獲取prepay_id再次簽名
4.小程序獲取五個參數(shù)后，鑒權(quán)調(diào)起支付
1).下載微信JS-SDK：2).調(diào)用統(tǒng)一下單api3).再次簽名
5.支付回調(diào),實際上我們需要重寫WxPayNotify類的Not本文主要講解了微信小程序,網(wǎng)絡API,媒體API,文件API,微信小程序支付流程,位置API,界面API,微信小程序登錄流程等，更多關(guān)于微信小程序相關(guān)知識請查看下面的相關(guān)鏈接
相關(guān)文章
javascript輕松實現(xiàn)當鼠標移開時已彈出子菜單自動消失
本文為大家詳細介紹下使用javascript實現(xiàn)當鼠標移開時已彈出子菜單自動消失，具體如下，感興趣的朋友不要錯過2013-12-12
本文詳細介紹了在前端項目中插入圖片的不同方法,包括HTML標簽、CSS樣式、JavaScript動態(tài)加載以及圖片的性能優(yōu)化,其中涉及到的技術(shù)包括響應式圖片設(shè)計、圖片懶加載技術(shù)和圖片格式選擇等,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-10-10
通過JAVAScript實現(xiàn)頁面自適應...2007-01-01
Bootstrap 提供了一些輔助類，以便更快地實現(xiàn)對移動設(shè)備友好的開發(fā)。這些可以通過媒體查詢結(jié)合大型、小型和中型設(shè)備，實現(xiàn)內(nèi)容對設(shè)備的顯示和隱藏。下面通過本文給大家分享Bootstrap 響應式實用工具，一起看看吧2017-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)input密碼框顯示和隱藏功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章介紹了Javascript 遮罩層和加載效果代碼，有需要的朋友可以參考一下2013-08-08
詳解Javascript百度地圖接口開發(fā)文檔中的類和方法
最近在工作中在用laravel框架仿寫?zhàn)I了么外賣商城,于是學習了一下有關(guān)地圖接口相關(guān)的知識,以下是百步地圖接口開發(fā)文檔的一些類和方法的使用，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-02-02
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單日歷特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)文字無限輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
uniapp官方雖然提供了uni-data-checkbox,含括了單選和多選框功能,但是它功能是在不能滿足需求,下面這篇文章主要給大家介紹了關(guān)于uniapp中單選按鈕的實現(xiàn)代碼,需要的朋友可以參考下2023-01-01