微信小程式必知必會面試題

1 請談談微信小程式主要目錄和檔案的作用？

• project.config.json 專案設定文件，用得最多的就是設定是否開啟https校驗；

• App.js 設定一些全域的基礎資料等；

• App.json 底部tab, 標題列與路由等設定；

• App.wxss 公共樣式，引入iconfont等；

• pages 裡麵包含一個個具體的頁面；

• index.json (配置目前頁面標題和引入元件等)；

• index.wxml (頁面結構);

• index.wxss (頁面樣式表);

• index.js (頁面的邏輯，請求與資料處理等);

2 請談談wxml與標準的html的異同？

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

3 請談談WXSS和CSS的異同？

• 都是用來描述頁面的樣子；

• WXSS 具有CSS 大部分的特性，也做了一些擴充和修改；

• WXSS新增了尺寸單位，WXSS 在底層支援新的尺寸單位rpx;

• WXSS 僅支援部分CSS 選擇器；

• WXSS 提供全域樣式與局部樣式

4 你是怎麼封裝微信小程式的資料請求的？

• 在根目錄下建立utils目錄及api.js檔案與apiConfig.js檔案;

• 在apiConfig.js 封裝基礎的get , post 和put，upload等請求方法，設定請求體，帶上token和異常處理等；

• 在api中引入apiConfig.js封裝好的請求方法，根據頁面數據請求的urls, 設定對應的方法並匯出；

• ##在特定的頁面中匯入；

• 使用全域變數實作資料傳遞

• 當頁面跳轉或重定向時，使用url帶參數傳遞資料

• #使用元件模板template傳遞參數

• 使用快取傳遞參數

• 使用資料庫傳遞資料

• onLoad() 頁面載入時觸發，只會呼叫一次，可取得目前頁面路徑中的參數。

• onShow() 頁面顯示/切入前台時觸發，一般用來傳送資料請求；

• onReady() 頁面初次渲染完成時觸發, 只會呼叫一次，代表頁面已可和視圖層進行互動。

• onHide() 頁面隱藏/切入後台時觸發, 如底部 tab 切換到其他頁面或小程式切入後台等。

• onUnload() 頁面卸載時觸發，如redirectTo或navigateBack到其他頁面時。

• 小程式本質就是一個單一頁面應用，所有的頁面渲染和事件處理，都在一個頁面內進行，但又可以透過微信客戶端呼叫原生的各種介面；

• 它的架構，是資料驅動的架構模式，它的UI和資料是分開的，所有的頁面更新，都需要透過資料的變更來實現；

• 它從技術講和現有的前端開發差不多，採用JavaScript、WXML、WXSS三種技術進行開發；

• 功能可分為webview和appService兩個部分；

• webview用來展現UI，appService有來處理業務邏輯、資料及介面呼叫；

##兩個部分在兩個行程中運行，透過系統層JSBridge實現通信，實現UI的渲染、事件的處理等。
9 請談談原生開發小程式、wepy、mpvue 的比較？

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

10 小程式和原生app哪個好？

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

11 簡述微信小程式原理

微信小程式採用JavaScript、WXML、WXSS三種技術進行開發，從技術講和現有的前端開發差不多，但深入挖掘的話卻又有所不同。

JavaScript：首先JavaScript的程式碼是運行在微信App中的，並不是運行在瀏覽器中，因此一些H5技術的應用，需要微信App提供對應的API支持，而這限制住了H5技術的應用，且其不能稱為嚴格的H5，可以稱其為偽H5，同理，微信提供的獨有的某些API，H5也不支持或支持的不是特別好。

WXML：WXML微信自己是基於XML語法開發的，因此在開發時，只能使用微信提供的現有標籤，HTML的標籤是無法使用的。

WXSS：WXSS具有CSS的大部分特性，但並不是所有的都支持，而且支持哪些，不支持哪些並沒有詳細的文檔。

微信的架構，是資料驅動的架構模式，它的UI和資料是分開的，所有的頁面更新，都需要透過資料的變更來實現。

小程式分為兩個部分webview和appService。其中webview主要用來展現UI，appService有來處理業務邏輯、資料及介面呼叫。它們在兩個進程中運行，透過系統層JSBridge實現通信，實現UI的渲染、事件的處理

12 微信小程序的雙向綁定和vue哪裡不一樣

小程序直接this.data的屬性是不可以同步到視圖的，必須呼叫：this.setData({})

推薦教程：《微信小程式》

以上是微信小程式必知必會面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！