面試常被問到的小程序問題

本文章同步發佈在個人博客：xueshiming.cn

Tips: 先來一些乾貨

wx：key 不只僅是惟一標識

列表數據發生改變從新出發頁面渲染的時候，列表中的項目能夠保持自身狀態 好比在input組件裏，輸入了內容以後 在頁面渲染以後，不但願input 內容發生改變，須要用此屬性 這個屬性，在頁面從新渲染的時候，確保帶有 key 的組件 會從新排序，而不是從新渲染，從而提升頁面渲染性能的效率

另外：如不提供 wx:key，會報一個 warning， 若是明確知道該列表是靜態，或者沒必要關注其順序，能夠選擇忽略。

Block是一個包裝元素，不是組件，渲染以後頁面看不出來

wx：if 和hidden 區別

wx:if在切換時有局部渲染的過程，從而保證條件塊渲染時，能夠銷燬並從新渲染，有更高的切換消耗 hidden始終渲染。能夠控制視圖上的顯示和隱藏，有更高的初始化渲染消耗, 因此元素頻繁切換的話，使用hidden

wxml支持文件引用

import： 只能引用咱們定義模板文件的模板內容塊

做用域的概念：只能引用目標文件定義的 template模板，若是目標文件內嵌套了其餘模板，是不會被引用的，避免了引用模板死循環的問題

include : 把目標 文件內除了模板代碼塊外的 全部代碼都引入，至關於拷貝到了 include位置這裏

Wxss和css對比

尺寸單位rpx

先了解幾個概念：

• 設備像素： 設備能控制的顯示的最小物理單位 這個最小物理單位是屏幕上一個個點，點是固定不變的
• CSS像素：外部編程的概念，css代碼中使用的邏輯像素
• PPI/DPI：每英寸擁有的像素數目

• DPR：手機的某一方向上設備像素和css像素之比

雖然wxss支持rem，可是咱們知道rem是根據html根元素的fontSize大小來適配的， wxss不能直接操做html的樣式屬性，因此rem適配方案就失效了。 rpx應運而生，規定屏幕寬度爲750rpx，從而咱們能夠根據屏幕寬度來自適應，rpx和rem實現方式是類似的，並且rpx最終轉換爲rem

樣式導入

• 外聯樣式引入：@import ‘./ss.wxss’

• 內連樣式引入：style 通常用來寫動態的樣式

選擇器

優先級

通常想要修改他人插件樣式的時候使用 !import

---

小程序運行機制

小程序兩種啓動方式：冷啓動，熱啓動

• 熱啓動：假如用戶已經打開了某個小程序，在必定時間內再次打開小程序的話，這個時候咱們就再也不須要從新啓動了，這須要把咱們的後臺打開的小程序切換到前臺來使用。
• 冷啓動：用戶首次打開小程序或被微信主動銷燬再次打開的狀況，此時小程序須要從新加載啓動。

小程序何時會主動銷燬？

1. 小程序在進入後臺以後，客戶端會幫咱們在必定時間內維持咱們的一個狀態，超過五分鐘後，會被微信主動銷燬
2. 當咱們在短期內連續兩次收到系統告警的時候，微信就會主動銷燬，短期間隔是5s

---

小程序更新機制：

小程序在冷啓動的時候遇到版本更新，小程序會異步加載，幫咱們下載最新版本的代碼包，並同時使用微信本地版本的代碼包啓動，也就是說最新的代碼包，將在小程序下次啓動纔去加載。若是偏要使用最新版本的代碼包，咱們可使用api來處理

wx.getUpdateManager

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 請求完新版本信息的回調
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已經準備好，是否重啓應用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已經下載好，調用 applyUpdate 應用新版本並重啓
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下載失敗
})
複製代碼

---

小程序加載機制：

小程序的啓動流程圖裏面：

左側的部分是在啓動的時候，微信客戶端裏面的視圖層和邏輯層一些交互邏輯以及數據緩存的存取操做，在小程序啓動的時候，會向 cdn請求最新代碼包，第一次啓動必須等到代碼包下載完畢，注入到 webView容器內執行以後，才能看到小程序頁面，因此在網絡很差的狀況下，咱們會感受到頁面打開比較慢，客戶端會幫咱們把代碼包緩存到本地，當咱們下一次啓動的時候，咱們會從 cdn 請求是否有最新版本的代碼包。

---

小程序應用和頁面的生命週期：

小程序應用生命週期：onLaunch，onShow，onHide，onError

首次進入小程序，從 cdn 或者小程序本地拿到代碼包注入到運行環境， 微信客戶端會給咱們邏輯層app.js的app實例來派發onLaunch事件， 在邏輯層，app.js的 app 構造器的參數裏面的onLaunch方法就會被調用。 當用戶使用home件或者點擊右上角小程序關閉按鈕，來關閉小程序時，小程序是沒有被直接銷燬的，這時app構造器的參數裏面的onHiede方法就會被調用，當咱們再次打開小程序時，微信喚起小程序，onShow方法就會被調用， 當小程序腳本發現錯誤時，或api調用失敗時，會調用onError。

小程序頁面的生命週期：onLoad，onShow，onReady，onHide，onUnload，

頁面未被銷燬以前，onLoad只會調用一次， 頁面顯示以後，會調用page實例裏面的onShow 當頁面初次渲染以後，onReady就會被調用，頁面未被銷燬以前，只會調用一次 onReady觸發以後，邏輯層和視圖層進行交互， 當咱們在當前頁面打開新的頁面以後，當前頁面會觸發onHide， 若是關閉當前頁，會觸發onUnload

負責頁面視圖的view線程和處理數據的服務以及服務的服務線程，AppService， 協同完成生命週期週期調用

---

小程序事件模型

1. 事件捕獲階段

綁定的事件從最外層節點向下傳遞到目標節點元素，依次檢查，所通過的節點是否綁定了同一事件類型的監聽回調函數，若是有則執行對應的事件回調函數

2. 事件處理階段

事件在到達目標節點以後，會觸發目標節點所綁定的監聽回調函數

3. 事件冒泡階段

事件從目標節點，向上冒泡到最外層節點，依次檢查通過的節點是否綁定了，一樣事件類型的監聽回調函數，若是有，會執行這個回調函數

target屬性： 觸發事件的當前組件 currentTarget屬性： 觸發事件的根源組件

eg: 若是有外層view還有個裏層view嵌套，都經過bind綁定了點擊事件，target爲外層view組件的事件對象,currentTarget爲底層view組件的事件對象

• type 觸發事件的觸發類型
• timestamp 觸發事件的時間戳
• target 觸發事件的根源組件，包括觸發事件根源組件的id自定義屬性的集合
• currenTarget 事件綁定額當前組件 ，包括當前組件的id，類型，data自定義屬性的集合
• touches 是一個數組，每個元素都是一個touch對象 ，標識當前停留在屏幕上的觸摸點和信息
• changedTouches 是一個數據，標識有變化的 觸摸點，即當前觸摸點從有到無或從無到有的變化
• detail 標識各個事件帶有的數據，點擊事件： ‘觸摸點距離文檔左上角的距離’ 媒體事件，觸發事件的時候播放狀態，以及時間戳

---

小程序運行環境：

在不一樣環境下的javascript腳本運行環境是不一樣的，微信小程序運行在三端：iOS（iPhone/iPad）、Android 和 用於調試的開發者工具。

三端的腳本執行環境以及用於渲染非原生組件的環境是各不相同的：

• 在 iOS 上，小程序邏輯層的 javascript 代碼運行在 JavaScriptCore 中，視圖層是由 WKWebView 來渲染的，環境有 iOS8、iOS9、iOS10；

• 在 Android 上，

  • 舊版本，小程序邏輯層的 javascript 代碼運行中 X5 JSCore 中，視圖層是由 X5 基於 Mobile Chrome 57 內核來渲染的
  • 新版本，小程序邏輯層的 javascript 代碼運行在 V8 中，視圖層是由自研 XWeb 引擎基於 Mobile Chrome 67 內核來渲染的；

• 在 開發工具上，小程序邏輯層的 javascript 代碼是運行在 NW.js 中，視圖層是由 Chromium 60 Webview 來渲染的。

結語：咱們在開發小程序的同時，也別忘記去理解一些原理性和細節性問題，由於這是提高的關鍵。to be an engineer,not a coder.