微信小程序常見面試題
小程序的登錄需要請求幾次?
- 請求wx.login,返回code
- 發送code,返回openid+sessionKey
- 請求getuserinfo(用戶信息)
小程序怎樣使用自定義組件?
首先需要在 json 文件中進行自定義組件聲明
{
"component":true
}
然後在自定義組件的 js 文件中,需要使用 Component()來註冊組件;
使用時在頁面的 json文件中進行引用聲明。此時需要提供每個自定義組件的標籤名和對應的自定義組件文件路徑:
{
"usingComponents":{
"component-tag-name":"path/to/the/custom/component"
}
}
小程序的生命週期
小程序是雙向數據綁定嗎?怎麼更新data
不是, 用setData()更新
小程序本地存儲有哪些常用api?
wx.navigateTo和 wx.redirectTo 有什麼區別,分別適用於哪些場景
- 使用wx.navigateTo每新開一個頁面,頁面棧大小加1,使用wx.navigateTo重複打頁面也會增加頁面棧
- 使用wx.redirectTo會關閉當前頁面打開新頁面,頁面棧大小不變
- 對於可逆操作,使用wx.navigateTo,比如從首頁跳轉到二級頁面,從二級頁面返回是不需要重新渲染首頁
- 對於不可逆操作,使用wx.redirectTo,比如用戶登錄成功後,關閉登錄頁面,不能返回到登錄界面。
- 不要在首頁使用wx.redirectTo,這樣會導致應用無法返回首頁
簡單描述下微信小程序的相關文件類型?
微信小程序項目結構主要有四個文件類型,如下:
- WXML (WeiXin Markup Language)是框架設計的一套標籤語言,結合基礎組件、事件系統,可以構建出頁面的結構。內部主要是微信自己定義的一套組件。
- WXSS (WeiXin Style Sheets)是一套樣式語言,用於描述 WXML 的組件樣式
- js 邏輯處理,網絡請求
- json 小程序設置,如頁面註冊,頁面標題及tabBar。
- app.json 必須要有這個文件,如果沒有這個文件,項目無法運行,因爲微信框架把這個作爲配置文件入口,整個小程序的全局配置。包括頁面註冊,網絡設置,以及小程序的window背景色,配置導航條樣式,配置默認標題。
- app.js 必須要有這個文件,沒有也是會報錯!但是這個文件創建一下就行 什麼都不需要寫以後我們可以在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。
- app.wxss 全局樣式
你使用過哪些方法,來提高微信小程序的應用速度?
- 提高頁面加載速度
- 用戶行爲預測
- 減少默認data的大小
- 組件化方案
小程序與原生App哪個好?
小程序除了擁有公衆號的低開發成本、低獲客成本低以及無需下載等優勢,在服務請求延時與用戶使用體驗是都得到了較大幅度 的提升,使得其能夠承載跟複雜的服務功能以及使用戶獲得更好的用戶體驗。
分析下微信小程序的優劣勢?
優勢
- 無需下載,通過搜索和掃一掃就可以打開。
- 良好的用戶體驗:打開速度快。
- 開發成本要比App要低。
- 安卓上可以添加到桌面,與原生App差不多。
- 爲用戶提供良好的安全保障。小程序的發佈,微信擁有一套嚴格的審查流程, 不能通過審查的小程序是無法發佈到線上的。
劣勢
- 限制較多。頁面大小不能超過1M。不能打開超過5個層級的頁面。
- 樣式單一。小程序的部分組件已經是成型的了,樣式不可以修改。例如:幻燈片、導航。
- 推廣面窄,不能分享朋友圈,只能通過分享給朋友,附近小程序推廣。其中附近小程序也受到微信的限制。
- 依託於微信,無法開發後臺管理功能。
微信小程序與H5的區別?
- 運行環境不同;傳統的HTML5的運行環境是瀏覽器,包括webview,而微信小程序的運行環境並非完整的瀏覽器,是微信開發團隊基於瀏覽器內核完全重構的一個內置解析器,針對小程序專門做了優化,配合自己定義的開發語言標準,提升了小程序的性能。
- 開發成本不同;只在微信中運行,所以不用再去顧慮瀏覽器兼容性,不用擔心生產環境中出現不可預料的奇妙BUG
- 獲取系統級權限不同;系統級權限都可以和微信小程序無縫銜接
- 應用在生產環境運行的流暢度;長久以來,當HTML5應用面對複雜的業務邏輯或者豐富的頁面交互時,它的體驗總是不盡人意,需要不斷的對項目優化來提升用戶體驗。但是由於微信小程序運行環境獨立
怎麼解決小程序的異步請求問題?
在回調函數中調用下一個組件的函數:
app.js
success: function (info) {
that.apirtnCallback(info)
}
index.js
onLoad: function () {
app.apirtnCallback = res => {
console.log(res)
}
}