微信小程序api列表匯總包括網絡API,媒體API,文件API ,微信小程序支付流程,位置API,界面API等

1)網絡 API 列表:

wx.request 發起網絡請求
wx.uploadFile 上傳文件
wx.downloadFile 下載文件
wx.connectSocket 創建 WebSocket 連接
wx.onSocketOpen 監聽 WebSocket 打開
wx.onSocketError 監聽 WebSocket 錯誤
wx.sendSocketMessage 發送 WebSocket 消息
wx.onSocketMessage 接受 WebSocket 消息
wx.closeSocket 關閉 WebSocket 連接
wx.onSocketClose 監聽 WebSocket 關閉

2)媒體 API 列表:

wx.chooseImage 從相冊選擇圖片,或者拍照
wx.previewImage 預覽圖片
wx.startRecord 開始錄音
wx.stopRecord 結束錄音
wx.playVoice 播放語音
wx.pauseVoice 暫停播放語音
wx.stopVoice 結束播放語音
wx.getBackgroundAudioPlayerState 獲取音樂播放狀態
wx.playBackgroundAudio 播放音樂
wx.pauseBackgroundAudio 暫停播放音樂
wx.seekBackgroundAudio 控制音樂播放進度
wx.stopBackgroundAudio 停止播放音樂
wx.onBackgroundAudioPlay 監聽音樂開始播放
wx.onBackgroundAudioPause 監聽音樂暫停
wx.onBackgroundAudioStop 監聽音樂結束
wx.chooseVideo 從相冊選擇視頻,或者拍攝

3)文件 API 列表:

wx.saveFile 保存文件
wx.getSavedFileList 獲取已保存的文件列表
wx.getSavedFileInfo 獲取已保存的文件信息
wx.removeSavedFile 刪除已保存的文件信息
wx.openDocument 打開文件

4)數據 API 列表:

wx.getStorage 獲取本地數據緩存
wx.getStorageSync 獲取本地數據緩存
wx.setStorage 設置本地數據緩存
wx.setStorageSync 設置本地數據緩存
wx.getStorageInfo 獲取本地緩存的相關信息
wx.getStorageInfoSync 獲取本地緩存的相關信息
wx.removeStorage 刪除本地緩存內容
wx.removeStorageSync 刪除本地緩存內容
wx.clearStorage 清理本地數據緩存
wx.clearStorageSync 清理本地數據緩存

5)位置 API 列表:

wx.getLocation 獲取當前位置
wx.chooseLocation 打開地圖選擇位置
wx.openLocation 打開內置地圖
wx.createMapContext 地圖組件控制

6)設備 API 列表:

wx.getNetworkType 獲取網絡類型
wx.onNetworkStatusChange 監聽網絡狀態變化
wx.getSystemInfo 獲取系統信息
wx.getSystemInfoSync 獲取系統信息
wx.onAccelerometerChange 監聽加速度數據
wx.startAccelerometer 開始監聽加速度數據
wx.stopAccelerometer 停止監聽加速度數據
wx.onCompassChange 監聽羅盤數據
wx.startCompass 開始監聽羅盤數據
wx.stopCompass 停止監聽羅盤數據
wx.setClipboardData 設置剪貼板內容
wx.getClipboardData 獲取剪貼板內容
wx.makePhoneCall 撥打電話
wx.scanCode 掃碼

7)界面 API 列表:

wx.showToast 顯示提示框
wx.showLoading 顯示加載提示框
wx.hideToast 隱藏提示框
wx.hideLoading 隱藏提示框
wx.showModal 顯示模態彈窗
wx.showActionSheet 顯示菜單列表
wx.setNavigationBarTitle 設置當前頁面標題
wx.showNavigationBarLoading 顯示導航條加載動畫
wx.hideNavigationBarLoading 隱藏導航條加載動畫
wx.navigateTo 新窗口打開頁面
wx.redirectTo 原窗口打開頁面
wx.switchTab 切換到 tabbar 頁面
wx.navigateBack 退回上一個頁面
wx.createAnimation 動畫
wx.createContext 創建繪圖上下文
wx.drawCanvas 繪圖
wx.stopPullDownRefresh 停止下拉刷新動畫

8)WXML節點信息 API 列表:

wx.createSelectorQuery 創建查詢請求
selectorQuery.select 根據選擇器選擇單個節點
selectorQuery.selectAll 根據選擇器選擇全部節點
selectorQuery.selectViewport 選擇顯示區域
nodesRef.boundingClientRect 獲取佈局位置和尺寸
nodesRef.scrollOffset 獲取滾動位置
nodesRef.fields 獲取任意字段
selectorQuery.exec 執行查詢請求

9)開放接口:

wx.login 登錄
wx.getUserInfo 獲取用戶信息
wx.chooseAddress 獲取用戶收貨地址
wx.requestPayment 發起微信支付
wx.addCard 添加卡券
wx.openCard 打開卡券

二、簡單描述微信小程序的相關文件類型?

1. .wxml
    ---是框架設計的一套標簽語言,結合基礎組件,事件系統,可以構建出頁面的結構,內部主要是微信自己定義的一套組件。
2. .wxss
    ---是一套樣式語言,用於描述wxml的組件樣式
3. .js
    ---是邏輯處理,網絡請求
4. .json
    --- 而文件會報錯小恒旭設置,如頁面註冊,頁面標題及tabBar
5. app.json
    ---必須要有這個文件,因為微信框架把這個文件作為配置文件入口,整個小程序的全局配置,包括頁面註冊,網絡配置,以及小程序的window背景色,配置導航條樣式,配置默認標題。
    pages字段 —— 用於描述當前小程序所有頁面路徑,這是為瞭讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。
    window字段 —— 小程序所有頁面的頂部背景顏色,文字顏色定義在這裡的
    tab字段—小程序全局頂部或底部tab
6. app.js---可以在這個文件中監聽並處理小程序的生命周期函數,聲明全局變量

三、你是怎麼封裝微信小程序的數據請求的?

1.將所有的接口放在統一的js文件中並導出
2.在app.js中創建封裝請求數據的方法
3.在子頁面中調用封裝的方法請求數據

1.在根目錄下創建utils目錄及api.js文件和apiConfig.js文件;
2.在apiConfig.js 封裝基礎的get, post 和 put, upload等請求方法,設置請求體,帶上token和異常處理等;
3.在api中引入apiConfig.js封裝好的請求方法,根據頁面數據請求的urls, 設置對應的方法並導出;
4.在具體的頁面中導入;

四、有哪些參數傳值的方法?

1.給html元素添加data-*屬性來傳遞我們需要的值,然後通過e.currentTarget.dataset或者是onload的param參數獲取,但data-名稱 不能有大寫字母和不可存放對象
2.設置id的方法標識來傳值,通過e.currentTarget.id獲取設置的id的值,然後通過設置全局對象的方式傳遞數值
3.在navigator中添加參數傳值

五、你使用過哪些方法,來提高微信小程序的應用速度?

1.提高頁面加載速度
2.用戶行為預測
3.減少默認data的大小
4.組件化方案

六、小程序和原生app哪個好?

小程序除瞭擁有公眾號的地開發成本,無需下載等優勢,在服務請求延時與用戶使用體驗是都得到瞭較大幅度的提升,使其能夠承載跟復雜的服務功能以及用戶獲得更好的體驗。

七、簡述微信小程序的原理?

小程序本質就是一個單頁面應用,所有的頁面渲染和事件處理,都在一個頁面內進行,但又可以通過微信客戶端調用原生的各種接口;
它的架構,是數據驅動的架構模式,它的UI和數據是分離的,所有的頁面更新,都需要通過對數據的更改來實現;
它從技術講和現有的前端開發差不多,采用JavaScript、WXML、WXSS三種技術進行開發;
功能可分為webview和appService兩個部分;
webview用來展現UI,appService有來處理業務邏輯、數據及接口調用;
兩個部分在兩個進程中運行,通過系統層JSBridge實現通信,實現UI的渲染、事件的處理等。

八、分析微信小程序的優劣勢?

優勢:
1.無需下載,通過搜索或者掃一掃就可以打開;2.良好的用戶體驗,打開速度快
3.開發成本比app低;4.安卓上可以添加到桌面,與原生app差不多;5.為用戶提供良好的安全保障

劣勢:
1.限制較多,頁面大小不能超過1M,不能打開超過五個層級的頁面;
2.樣式單一;3.推廣面窄,不能分享到朋友圈,隻能分享給朋友;
4.依托於微信,無法開發後臺管理功能

九、微信小程序與h5的區別?

1.運行環境的不同---h5的運行環境是瀏覽器,而微信小程序的運行環境是微信開發團隊基於瀏覽器內核完全重構的一個內置解析器,針對小程序專門做瞭優化,配合自己定義的開發語言標準
2.開發成本的不同---微信小程序隻在微信中運行,所以不用去顧慮瀏覽器兼容性問題
3.獲取系統權限的不同---系統級權限都可以和微信小程序無縫銜接
4.生產環境的運行流暢度

十、怎麼解決小程序的異步請求問題?

app.js:
    success:function(info){
        that.apirtnCallback(info)
    }
index.js:
    onLoad:function(){
        app.apirtnCallback=res=>{
            console.log(res)
        }
    }

小程序支持大部分 ES6 語法
在返回成功的回調裡面處理邏輯

Promise 異步

十一、小程序的雙向綁定和vue哪裡不一樣?

小程序必須用this.setData({msg:'111'})方法來將數據同步到視圖

十二、小程序的wxss和css的異同?

都是用來描述頁面的樣子;
WXSS 具有 CSS 大部分的特性,也做瞭一些擴充和修改;
WXSS新增瞭尺寸單位,WXSS 在底層支持新的尺寸單位 rpx;
WXSS 僅支持部分 CSS 選擇器;
WXSS 提供全局樣式與局部樣式1.wxss的圖片引入需要使用外鏈地址;2.沒有body,樣式可直接使用import導入

十三、小程序關聯微信公眾號如何確定用戶的唯一性?

使用ax.getUserInfo方法的withCredential為true時,可獲取encryptedData,裡面有union_id,
如果開發者擁有多個移動應用、網站應用、和公眾帳號(包括小程序),可通過 unionid 來區分用戶的唯一性,因為隻要是同一個微信開放平臺帳號下的移動應用、網站應用和公眾帳號(包括小程序),用戶的 unionid 是唯一的。換句話說,同一用戶,對同一個微信開放平臺下的不同應用,unionid 是相同的

十四、如何實現下拉刷新?

用view代替scroll-view,設置onPullDownRefresh函數實現

十五、小程序調用後臺接口遇到哪些問題?

1.數據的大小有限制,超過范圍會直接導致整個小程序崩潰,除非重啟;
2.小程序不可以直接渲染文章內容頁這類型的html文本內容,若需顯示要借住插件,但插件渲染會導致頁面加載變慢

十六、小程序和Vue寫法的區別

1.循環遍歷的時候:小程序是wx:for="list",而Vue是v-for="info in list"
2.調用data模型的時候:小程序是this.data.uinfo,而vue是this.unifo,給模型賦值也不一樣,小程序是this.setData({unifo:1}),而Vue是直接this.unifo=1

十七、 為什麼要對小程序進行組件模塊化設計

1、微信小程序有代碼大小限制,微信小程序最大為2M
2、提高代碼的復用率

十八、 如何進行組件化模塊化設計

通過WXML的import和include來使用文件模版
使用WXSS的@import引用WXSS文件
使用JS的require來引用JS文件

十九、wx:if與hidden的區別

wx:if是遇到true的時候顯示,hidden是遇到false的時候顯示
wx:if在隱藏的時候不渲染,而hidden在隱藏的時候仍然渲染,隻是不顯示
頻繁切換的話,用wx:if將會消耗更多的資源,因為每次呈現的時候他都會渲染,每次隱藏的時候,他都會銷毀。
如果切換並不頻繁的話,用 wx:if 相對來說較好些,因為它會避免初始就一下渲染那麼多。

二十、rpx

微信小程序新定義瞭一個尺寸單位,可以適配不同分辨率的屏幕,它規定屏幕寬為750rpx,如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px =750物理像素,1rpx = 0.5px = 1物理像素。

二十一、生命周期函數

onLoad() 頁面加載時觸發,隻會調用一次,可獲取當前頁面路徑中的參數。
onShow() 頁面顯示/切入前臺時觸發,一般用來發送數據請求;
onReady() 頁面初次渲染完成時觸發, 隻會調用一次,代表頁面已可和視圖層進行交互。
onHide() 頁面隱藏/切入後臺時觸發, 如底部 tab 切換到其他頁面或小程序切入後臺等。
onUnload() 頁面卸載時觸發,如redirectTo或navigateBack到其他頁面時。

二十二、wx.navigateTo無法打開頁面

一個應用同時隻能打開5個頁面,當已經打開瞭5個頁面之後,wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式,或者使用wx.redirectTo

二十三、 本地資源無法通過 css 獲取

background-image:可以使用網絡圖片,或者 base64,或者使用<image/>標簽

二十四、bindtap和catchtap有什麼區別?`

相同點:首先他們都是作為點擊事件,就是點擊時觸發
不同點:主要是bindtap不會阻止冒泡事件,而catchtap會阻止冒泡

二十五、簡述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的區別

wx.navigateTo():保留當前頁面,跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面
wx.redirectTo():關閉當前頁面,跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面
wx.switchTab():跳轉到 abBar 頁面,並關閉其他所有非 tabBar 頁面
wx.navigateBack()關閉當前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧,決定需要返回幾層
wx.reLaunch():關閉所有頁面,打開到應用內的某個頁面

二十六、請談談原生開發小程序、wepy、mpvue 的對比

個人認為,如果是新項目,且沒有舊的 h5 項目遷移,則考慮用小程序原生開發,好處是相比於第三方框架,坑少。
而如果有 老的 h5 項目是 vue 開發 或者 也有 h5 項目也需要小程序開發,則比較適合 wepy 或者 mpvue 來做遷移或者開發,近期看wepy幾乎不更新瞭,所以推薦美團的mpvue。
而如果如果團隊前端強大,自己做一套框架也沒問題。

二十七、談談wxml與標準html的異同

都是用來描述頁面的結構;
都由標簽、屬性等構成;
標簽名字不一樣,且小程序標簽更少,單一標簽更多;
多瞭一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式
WXML僅能在微信小程序開發者工具中預覽,而HTML可以在瀏覽器內預覽
組件封裝不同, WXML對組件進行瞭重新封裝,
小程序運行在JS Core內,沒有DOM樹和window對象,小程序中無法使用window對象和document對象。

二十八、微信小程序常見bug

1.域名必須是HTTPS
2. input組件placeholder字體顏色
3. wx.navigateTo無法跳轉到帶tabbar的頁面
4. tabbar在切換時頁面數據無法刷新
5.如何去掉自定義button灰色的圓角邊框
6.input textarea是APP的原生組件,z-index層級最高
7.一段文字如何換行
8.設置最外層標簽的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方法的使用註意什麼?

由於此方法調用頻繁,不需要時,可以去掉,不要保留空方法,並且使用onPageScroll時,盡量避免使用setData(),盡量減少setData()的使用頻次。

三十一、小程序視圖渲染結束回調?

使用setData(data, callback),在callback回調方法中添加後續操作代碼

三十二、小程序同步API和異步API使用時註意事項

像wx.setStorageSync這種以Sync結尾的API為同步API,使用時使用try-catch來查看異常,如果判定API為異步,可以在其回調方法success、fail、complete中進行下一步操作。

三十四、簡述微信小程序登錄流程

1.判斷用戶是否登陸過,如果已經登陸過,則直接獲取個人信息進入主頁
2.未登錄則引導登錄,直接跳轉到登錄頁面,封裝方法獲取code值,調用wx.login()方法,獲取到用戶信息登陸成功就跳轉到個人主頁
//獲取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.小程序調用登錄接口獲取code,傳遞給商戶服務器用來獲取用戶的openId
  小程序調用wx.login()獲取臨時憑證code,並回轉到開發者服務器,開發者服務器以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.調用統一下單接口,獲取prepay_id再次簽名
4.小程序獲取五個參數後,鑒權調起支付
1).下載微信JS-SDK:2).調用統一下單api3).再次簽名
5.支付回調,實際上我們需要重寫WxPayNotify類的Not

本文主要講解瞭微信小程序,網絡API,媒體API,文件API,微信小程序支付流程,位置API,界面API,微信小程序登錄流程等,更多關於微信小程序相關知識請查看下面的相關鏈接

推薦閱讀: