面試題（2020）微信小程序常見面試題
博客說明
文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！
1、微信的小程序的主要文件
- WXML——模板文件
- JSON——配置/設置文件，如標題,tabbar,頁面注冊
- WXSS——樣式文件，樣式可直接用import導入
- JS——腳本邏輯文件，邏輯處理，網絡請求
- app.json——配置文件入口，整個小程序的全局配置，網絡超時時間、底部tab、頁面路徑，window字段是小程序所有頁面的頂部背景顏色、文字顏色
- app.js——可以沒有內容，可以在里邊監聽生命周期函數、聲明全局變量
- app.wxss——全局配置樣式文件
2、數據請求怎么封裝
- 將所有的接口放在統一的js文件中並導出（或者將請求地址、頭、方法在一個js文件里統一定義為一個常量並導出）
- 在app.js創建封裝請求數據的方法
- 在子頁面中調用封裝的方法請求數據
3、參數傳遞
- 給HTML元素中添加data-*屬性來傳遞需要的值，之后通過e.currentTarget.dataset或onload的param參數獲取。注意不能有大寫字母，不可以存放對象
- 跳轉頁面時通過navigator傳遞需要的參數值
- 設置id的方法標識，通過e.currentTarget.id獲取設置的id值，然后通過設置全局變量的方法來傳遞數值
4、生命周期函數
- onLoad——頁面加載，調一次
- onShow——頁面顯示，每次打開頁面都調用
- onReady——初次渲染完成，調一次
- onHide——頁面隱藏，當navigateTo或底部tab切換時調用
- onUnload——頁面卸載，當redirectTo或navigateBack時調用
5、小程序的雙向綁定和vue哪里不一樣
- 小程序直接this.data的屬性是不可以同步到視圖的，必須調用this.setData({})
6、1px = 2rpx
7、如何自定義組件（彈窗）
- 先創建一個components文件夾，用來存放所有自定義組件的，目錄結構依然是js,wxml,json,wxss
基本配置：
- .json——進行自定義組件聲明
{
"component": true
}
使用組件：
- 假如在index.wxml中使用這個自定義的組件，首先在index.json中進行聲明
{
"usingComponents": {
"toastdemo": "/components/toastdemo/toastdemo"
}
}
- 接着在index.wxml中引用
- 然后在index.js進行配置
- 使用時直接執行this.toastdemo.showToast('彈框組件調用成功',2000)就可以了
8、小程序內的頁面跳轉
- wx.navigateTo——保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面（參數必須為字符串）
- wx.redirectTo——關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面
- wx.switchTab——跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面，路徑后不能帶參數
- wx.navigateBack——關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層
- wx.reLaunch——關閉所有頁面，打開到應用內的某個頁面
9、小程序和Vue寫法的區別
- 循環遍歷：小程序是wx:for="list"，vue是v-for="inforin list"
- 調用data模型：小程序是this.data.unifo，vue是this.unifo
- 給模型賦值：小程序是this.setData({unifo:1})，vue是直接this.unifo=1
10、小程序的雙向綁定和vue哪里不一樣
- 小程序直接this.data的屬性是不可以同步到視圖的，必須調用this.setData({})
11、小程序的優點和缺點
小程序的優點
- 無需下載
- 打開速度快
- 開發成本低
- 為用戶提供良好的安全保障。發布有一套嚴格的審查流程，不能通過審查的程序無法發布上線
- 服務請求快
小程序的缺點
- 依托微信，不能開發后台管理功能
- 大小限制不能超過2M，不能打開超過5個層級的頁面
12、簡述小程序原理
- 小程序分為兩個部分webview和appService，webview用來展現UI，appService用來處理業務邏輯、數據及接口調用，它們在兩個進程中運行，通過系統層JSBridge實現通信，完成UI渲染、事件處理。
13、提高小程序的應用速度的方法
- 減少默認data的大小
- 組件化方案，公用的如彈框等寫個自定義的組件，然后調用
14、簡述小程序原理
- 小程序分為兩個部分webview和appService，webview用來展現UI，appService用來處理業務邏輯、數據及接口調用，它們在兩個進程中運行，通過系統層JSBridge實現通信，完成UI渲染、事件處理
15、setData的回調函數
微信小程序的setData實現是和react的setData實現類似的，所以它也是一個異步函數，並且有回調函數的參數，當然平時小量數據我們可能並沒有感覺到它的異步，但是為了確保邏輯的正確執行，在需要用到setData后 data里的數據的步驟，請寫入setData的回調函數中，如下示例：
this.setData({
a: this.data.a++
},()=>{
})
16、如何實現下拉刷新
- 先在app.json或page.json中配置enablePullDownRefresh:true
- page里用onPullDownRefresh函數，在下拉刷新時執行
- 在下拉函數執行時發起數據請求，請求返回后，調用wx.stopPullDownRefresh停止下拉刷新的狀態
17、bindtap和catchtap的區別是什么
- bindtap不會阻止冒泡事件，catchtap阻止冒泡
18、微信小程序與H5的區別？
①運行環境不同（小程序在微信運行，h5在瀏覽器運行）；
②開發成本不同（h5需要兼容不同的瀏覽器）；
③獲取系統權限不同（系統級權限可以和小程序無縫銜接）；
④應用在生產環境的運行流暢度（h5需不斷對項目優化來提高用戶體驗）；
19、小程序關聯微信公眾號如何確定用戶的唯一性？
使用wx.getUserInfo方法 withCredentials為true時，可獲取encryptedData，里面有union_id.后端需要進行對稱解密。
20、webview中的頁面怎么跳回小程序中
- 先在管理后台配置域名白名單，
- 然后引入jweixin-1.3.2.js（https://res.wx.qq.com/open/js/jweixin-1.3.0.js）
wx.miniProgram.navigateTo({url: '/pages/login/login'+'$params'})
wx.miniProgram.navigateTo({url: '/path/to/page'})
21、webview的頁面怎么跳轉到小程序導航的頁面？
小程序導航的頁面可以通過switchTab，但默認情況是不會重新加載數據的。若需加載新數據，則在success屬性中加入以下代碼即可：
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
//webview的頁面，則通過
wx.miniProgram.switchTab({
url: '/pages/index/index'
})
22、小程序和小程序之間的跳轉
- 在同一主體公眾號上關聯2個小程序appid，
- 用navigator，對應設置一些屬性即可
- target：miniProgram——其他小程序
- target：self——當前小程序
感謝
萬能的網絡
