一、小程序基本概念
1、簡單描述下微信小程序的相關文件類型?
答:微信小程序項目結構主要有四個文件類型,如下:
WXML (WeiXin Markup Language)是框架設計的一套標簽語言,結合基礎組件、事件系統,可以構建出頁面的結構。內部主要是微信自己定義的一套組件。
WXSS (WeiXin Style Sheets)是一套樣式語言,用於描述 WXML 的組件樣式,
js 邏輯處理,網絡請求
json 小程序設置,如頁面注冊,頁面標題及tabBar。
app.json
必須要有這個文件,如果沒有這個文件,項目無法運行,因為微信框架把這個作為配置文件入口,整個小程序的全局配置。包括頁面注冊,網絡設置,以及小程序的window背景色,配置導航條樣式,配置默認標題。
app.js
必須要有這個文件,沒有也是會報錯!但是這個文件創建一下就行 什么都不需要寫以后我們可以在這個文件中監聽並處理小程序的生命周期函數、聲明全局變量。
app.wxss
小程序的公共樣式
2、小程序與原生App哪個好?
答: 小程序除了擁有公眾號的低開發成本、低獲客成本低以及無需下載等優勢,在服務請求延時與用戶使用體驗是都得到了較大幅度 的提升,使得其能夠承載跟復雜的服務功能以及使用戶獲得更好的用戶體驗。
區別
- 原生APP 需要下載,小程序則不需要,只需要短暫的加載時間。
- 原生APP 由於平台的不同,必須開發蘋果,安卓兩個版本或者采用混合開發。小程序則不需要,即時打開,即時關閉。安卓用戶還可以發送到桌面,某種程度上可以替代原生APP。
- 由於微信對小程序的限制在 2M,所以原生APP 實現的功能要比小程序多。
優點:
- 不用安裝,即開即用,用完就走。省流量,省安裝時間.
- 開發成本更低
- 服務更加快捷方便,用戶的使用門檻大大降低。方便推廣
缺點
- 對於大型應用來說,無法實現原生APP 所具有的全部功能。
- 你所能獲取的用戶數據將非常有限,微信給你開放的用戶數據基本就是頭像和昵稱還有一定的好友關系。數據對你自己的重要性一定要考慮清楚!
- 小而美,做垂直,功能復雜度有限制,如果想做成龐大的獨角獸, 必須是高頻剛需但復雜度又不是太高,就像支付寶一樣。
- 用完即走因為沒辦法多任務處理,你的產品如果不能在一定時間內完成特定場景的需求並且達成自己的目標,你就比較難做。
3、簡述微信小程序原理?
答:
小程序的頁面主要由四部分組成,分別是wxml、wxss、js、json。wxml用於構建用戶界面,wxss用於編寫界面的樣式,js用於編寫界面邏輯,json用於界面的配置。
微信的架構,是數據驅動的架構模式,它的 UI 和數據是分離的,所有的頁面更新,都需要通過對數據的更改來實現
小程序的渲染層和邏輯層分別由2個線程管理:渲染層的界面使用了WebView 進行渲染;邏輯層采用JsCore線程運行JS腳本。一個小程序存在多個界面,所以渲染層存在多個WebView線程,這兩個線程的通信會經由微信客戶端(下文中也會采用Native來代指微信客戶端)做中轉,邏輯層發送網絡請求也經由Native轉發。
4、分析下微信小程序的優劣勢?
答:
優勢:
- 入口眾多。在微信中,小程序擁有眾多入口,例如附近的小程序、小程序碼、分享、發現-小程序等五十多個的入口。這些入口有助於企業更好的獲取流量,從而進行轉化、變現。
- 使用便捷。用戶在使用小程序時,只需要輕輕點一下就可以使用,更加符合用戶對使用方便、快捷的需求,所以小程序的用戶數量不斷增加。
- 體驗良好,有接近原生app的體驗。在微信生態里,小程序在功能和體驗上是可以秒殺掉 H5 頁面的,H5 頁面經常出現卡頓、延時、加載慢、權限不足等原因,而這些問題在小程序里都不會出現。
- 微信助力,容易推廣。
- 成本更低,從開發成本到運營推廣成本,小程序的花費僅為APP的十分之一,無論是對創業者還是傳統商家來說都是一大優勢。
劣勢:
- 大小限制為2M,這導致無法開發大型的應用。
- 不能直接分享到朋友圈。
- 需要像app一樣審核上架,這點相對於H5的發布要麻煩一些
- 微信對小程序的開發也有限制
5、微信小程序與H5的區別?
答:
第一條是運行環境的不同
傳統的HTML5的運行環境是瀏覽器,包括webview,而微信小程序的運行環境並非完整的瀏覽器,是微信開發團隊基於瀏覽器內核完全重構的一個內置解析器,針對小程序專門做了優化,配合自己定義的開發語言標准,提升了小程序的性能。
第二條是開發成本的不同
只在微信中運行,所以不用再去顧慮瀏覽器兼容性,不用擔心生產環境中出現不可預料的奇妙BUG
第三條是獲取系統級權限的不同
系統級權限都可以和微信小程序無縫銜接
第四條便是應用在生產環境的運行流暢度
長久以來,當HTML5應用面對復雜的業務邏輯或者豐富的頁面交互時,它的體驗總是不盡人意,需要不斷的對項目優化來提升用戶體驗。但是由於微信小程序運行環境獨立
6、小程序的雙向綁定和vue哪里不一樣?
答:
小程序直接this.data的屬性是不可以同步到視圖的,必須調用setData
7、 bindtap和catchtap的區別是什么?
答:
bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡
8、wxss和css的異同?
- 都是用來描述頁面的樣子;
- WXSS 具有 CSS 大部分的特性,也做了一些擴充和修改;
- WXSS新增了尺寸單位,WXSS 在底層支持新的尺寸單位 rpx;
- WXSS 僅支持部分 CSS 選擇器;
- WXSS 提供全局樣式與局部樣式
9、請談談wxml與標准的html的異同?
- 都是用來描述頁面的結構;
- 都由標簽、屬性等構成;
- 標簽名字不一樣,且小程序標簽更少,單一標簽更多;
- 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式
- WXML僅能在微信小程序開發者工具中預覽,而HTML可以在瀏覽器內預覽
- 組件封裝不同, WXML對組件進行了重新封裝,
- 小程序運行在JS Core內,沒有DOM樹和window對象,小程序中無法使用window對象和document對象。
10、請談談小程序的生命周期函數?
app:
屬性 |
說明 |
生命周期回調——監聽小程序初始化。 |
|
生命周期回調——監聽小程序啟動或切前台。 |
|
生命周期回調——監聽小程序切后台。 |
頁面:
- onLoad() 頁面加載時觸發,只會調用一次,可獲取當前頁面路徑中的參數。
- onShow() 頁面顯示/切入前台時觸發,一般用來發送數據請求;
- onReady() 頁面初次渲染完成時觸發, 只會調用一次,代表頁面已可和視圖層進行交互。
- onHide() 頁面隱藏/切入后台時觸發, 如底部 tab 切換到其他頁面或小程序切入后台等。
- onUnload() 頁面卸載時觸發,如redirectTo或navigateBack到其他頁面時。
屬性 |
說明 |
生命周期回調—監聽頁面加載 |
|
生命周期回調—監聽頁面顯示 |
|
生命周期回調—監聽頁面初次渲染完成 |
|
生命周期回調—監聽頁面隱藏 |
|
生命周期回調—監聽頁面卸載 |
component:
定義段 |
描述 |
最低版本 |
created |
組件生命周期函數-在組件實例剛剛被創建時執行,注意此時不能調用 setData ) |
|
attached |
組件生命周期函數-在組件實例進入頁面節點樹時執行) |
|
ready |
組件生命周期函數-在組件布局完成后執行) |
|
moved |
組件生命周期函數-在組件實例被移動到節點樹另一個位置時執行) |
|
detached |
組件生命周期函數-在組件實例被從頁面節點樹移除時執行) |
|
lifetimes |
組件生命周期聲明對象,參見 組件生命周期 |
|
pageLifetimes |
組件所在頁面的生命周期聲明對象,參見 組件生命周期 |
二、小程序開發過程中的常見問題
1、怎么解決小程序的異步請求問題?
答:
- 在回掉函數中執行之后的操作
- 將這些方法封裝成promise
2、你使用過哪些方法,來提高微信小程序的應用速度?
答:
- 精簡代碼,降低WXML結構和JS代碼的復雜性;
- 合理使用setData調用,減少setData次數和數據量
- 必要時使用分包優化
三、小程序的具體操作
1、簡述一下小程序的開發流程
答:
- 申請注冊微信小程序賬號,注意:注冊賬號之后會有一個AppID,下載微信開發者工具,新建項目的時候需要填上,否則很多功能用不了,比如不能預覽、不能上傳代碼等問題。
- 通過微信開發工具新建項目。
- 根據業務需求配置小程序,並進行業務代碼的開發。
- 如果涉及到發送請求,需要在小程序后台管理頁面配置服務器合法域名,或者關閉域名校驗(部署則必須配置合法域名,域名必須是https協議的,並且已經備案了)(這里有可能問http和https的區別)
- 開發完成之后點擊上傳代碼可以將小程序發不到體驗版
- 體驗版確定無誤后提交審核,審核通過后就可以正式上線了。
2、你是怎么封裝微信小程序的數據請求的?
答:
- 將所有的接口放在統一的js文件中並導出
- 在app.js中創建封裝請求數據的方法, 並且添加統一的配置, 使用promise對象來封裝請求
- 在子頁面中調用封裝的方法請求數據
3、如何給方法傳值?
答:
通過設置標簽的data-*屬性,在方法中通過e.currentTarget.dataset獲取到數據
4、常見的路由跳轉有哪些,請簡述區別?
答:
打開新頁面:調用 API wx.navigateTo 或使用組件 < navigator open-type="navigateTo"/>
頁面重定向:調用 API wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/>
頁面返回:調用 API wx.navigateBack 或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕
Tab 切換:調用 API wx.switchTab 或使用組件 <navigator open-type="switchTab"/> 或用戶切換 Tab
重啟動:調用 API wx.reLaunch 或使用組件 <navigator open-type="reLaunch"/>
5、如何綁定事件?
答:
事件綁定的寫法和組件屬性一致,以key="value"的形式,其中:
- key以bind或者catch開頭,然后跟上事件的類型,如bindtap、catchtouchstart。自基礎庫版本1.5.0起,bind和catch后可以緊跟一個冒號,其含義不變,如bind:tap、catch:touchstart。同時bind和catch前還可以加上capture-來表示捕獲階段。
- value是一個字符串,需要在對應的頁面Page構造器中定義同名的函數,否則觸發事件時在控制台會有報錯信息。
bind和capture-bind的含義分別代表事件的冒泡階段和捕獲階段。
6、如何實現事件的下拉刷新?
答:
監聽用戶下拉刷新事件。
- 需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。
- 可以通過wx.startPullDownRefresh觸發下拉刷新,調用后觸發下拉刷新動畫,效果與用戶手動下拉刷新一致。
- 當處理完數據刷新后,wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。
- 用戶執行下拉刷新的時候會觸發onPullDownRefresh函數
7、小程序常用的接口請求
HTTPS 請求(wx.request)
上傳文件(wx.uploadFile)
下載文件(wx.downloadFile)
WebSocket 通信(wx.connectSocket)
8、小程序如何進行登錄
- 通過wx.login可以獲得code。
- 調用服務端提供的code2Session,可以拿到用戶的open_id(唯一id)。
- open_id可以和后端的賬號關聯,后端會根據open_id返回關聯的用戶信息。
9、小程序頁面跳轉如何傳遞參數
答:
- 跳轉的時候可以在鏈接后面加上?參數名=參數值
- 跳轉到的頁面可以在onLoad的生命周期函數中獲取到參數
onLoad(option){
// 通過這個參數可以獲取到地址參數
}
如果被問到taro框架傳遞參數,在taro組件的生命周期函數中都可以通過this.$router.params 獲取到參數
10、微信小程序使用npm的步驟(外部依賴)
答:
- 首先在項目根目錄執行npm init
- 根據需要安裝相應的組件,這里需要注意的加上--production參數減少安裝一些業務無關的包,從而減少整個小程序的大小。
- 在微信開發工具的本地設置中打開使用npm模塊
- 在微信開發工具的工具菜單欄點擊構建npm
11、微信小程序有哪些方式可以隱藏界面元素,有什么區別?
答:
- wx:if
- 組件的hidden屬性
區別:wx:if會把這個元素從dom樹中移除,hidden是設置display為none
12、小程序中如何使用組件
答:
- 在頁面的配置文件中配置usingComponents聲明組件,其中key就是這個組件的名字,value是這個組件的地址。
- 在頁面上通過引用組件的名字使用組件。
13、小程序中如何定義組件以及組件間的通信
答:
組件和頁面一樣包括js、wxss、wsml、json這個幾個文件,不同的是組件的構造器使用的是Component。
組件間的基本通信方式有以下幾種。
- WXML 數據綁定:用於父組件向子組件的指定屬性設置數據,僅能設置 JSON 兼容數據(自基礎庫版本 2.0.9 開始,還可以在數據中包含函數)。具體在 組件模板和樣式 章節中介紹。
- 事件:用於子組件向父組件傳遞數據,可以傳遞任意數據。
- 如果以上兩種方式不足以滿足需要,父組件還可以通過 this.selectComponent 方法獲取子組件實例對象,這樣就可以直接訪問組件的任意數據和方法。
14、組件的事件
自定義組件觸發事件時,需要使用 triggerEvent 方法,指定事件名、detail對象和事件選項:
var myEventDetail = {} // detail對象,提供給事件監聽函數
var myEventOption = {} // 觸發事件的選項
this.triggerEvent(事件名, myEventDetail, myEventOption)
觸發事件的選項
選項名 |
類型 |
是否必填 |
默認值 |
描述 |
bubbles |
Boolean |
否 |
false |
事件是否冒泡 |
composed |
Boolean |
否 |
false |
事件是否可以穿越組件邊界,為false時,事件將只能在引用組件的節點樹上觸發,不進入其他任何組件內部 |
capturePhase |
Boolean |
否 |
false |
事件是否擁有捕獲階段 |
15、組件的生命周期:
生命周期 |
參數 |
描述 |
最低版本 |
created |
無 |
在組件實例剛剛被創建時執行 |
|
attached |
無 |
在組件實例進入頁面節點樹時執行 |
|
ready |
無 |
在組件在視圖層布局完成后執行 |
|
moved |
無 |
在組件實例被移動到節點樹另一個位置時執行 |
|
detached |
無 |
在組件實例被從頁面節點樹移除時執行 |
|
error |
Object Error |
每當組件方法拋出錯誤時執行 |