面試題（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——當前小程式
感謝
萬能的網路
以及勤勞的自己，個人博客，GitHub
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/193863.html
標籤：Java