現在面試,都會問,你會不會小程式呀,你做沒做過小程式呀,其實小程式很簡單,只要嚴格按照小程式的官網來開發就行,一些常用api呀,元件呀,小程式都幫你做好了,你只需要負責用就行了。今天我們來說一下小程式面試中可能遇到的問題。
一、簡述一下小程式的檔案型別
我們可以看到在專案的根目錄有一個 app.json、app.js
和 project.config.json
我們依次來說明一下它們的用途。
首先我們看一下小程式的目錄結構,下面是小程式目錄結構的截圖;
1、小程式配置 app.json
必須要有這個檔案,如果沒有這個檔案,專案無法執行,因為微信小程式把這個作為配置檔案入口,是當前小程式的全域性配置,包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。
2、全域性app.js
必須要有這個檔案,沒有也會報錯!這個檔案建立一下就行,可以什麼都不寫,以後我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。
3、工具配置 project.config.json
小程式工具的個性化配置,例如介面顏色、編譯配置等等。
4、pages裡面的檔案,分為四種型別,下面來簡單介紹一下這四程型別
WXML模板:和HTML非常像,WXML由標籤屬性等構成,但是和HTML也有很多不一樣的地方,例如:
- 標籤名字不一樣,寫 HTML 的時候,經常會用到的標籤是
div
,p
,span
,而小程式的WXML
用的標籤是view
,button
,text
等等 - 多了一些
wx:if
這樣的屬性以及{{ }}
這樣的表示式
WXSS 樣式:WXSS 具有 CSS 大部分的特性,小程式在 WXSS 也做了一些擴充和修改。
- 新增了尺寸單位rpx。1rpx=0.5px=1物理畫素
- 提供了全域性的樣式和區域性樣式。你可以寫一個
app.wxss
作為全域性樣式,會作用於當前小程式的所有頁面,區域性頁面樣式page.wxss
僅對當前頁面生效。 - 此外
WXSS
僅支援部分CSS
選擇器
JS 互動邏輯:一個服務僅僅只有介面展示是不夠的,還需要和使用者做互動:響應使用者的點選、獲取使用者的位置等等。在小程式裡邊,我們就通過編寫 JS
指令碼檔案來處理使用者的操作。
頁面配置page.json:獨立定義每個頁面的一些屬性,例如頂部顏色、是否允許下拉重新整理等等。
二、小程式的事件
1、事件分類
- 冒泡事件:當一個元件上的事件被觸發後,該事件會向父節點傳遞。
- 非冒泡事件:當一個元件上的事件被觸發後,該事件不會向父節點傳遞。
2、事件的繫結
事件繫結的寫法同元件的屬性,以 key、value 的形式。
- key 以
bind
或catch
開頭,然後跟上事件的型別,如bindtap
、catchtouchstart
。 - value 是一個字串,需要在對應的 Page 中定義同名的函式。不然當觸發事件的時候會報錯。
bind
事件繫結不會阻止冒泡事件向上冒泡,catch
事件繫結可以阻止冒泡事件向上冒泡。3、如何實現下拉重新整理
監聽使用者下拉重新整理事件。
- 需要在
app.json
的window
選項中或頁面配置中開啟enablePullDownRefresh
。 - 可以通過
wx.startPullDownRefresh
觸發下拉重新整理,呼叫後觸發下拉重新整理動畫,效果與使用者手動下拉重新整理一致。 - 當處理完資料重新整理後,
wx.stopPullDownRefresh
可以停止當前頁面的下拉重新整理。
三、小程式更新頁面的值
函式用於將資料從邏輯層傳送到檢視層(非同步)
this.setData(Object data, Function callback)複製程式碼
引數說明:
data:傳一個object,是這次要改變的資料
callback:傳一個function,是setData引起的介面更新渲染完畢後的回撥函式
四、小程式的路由方式
開啟新頁面:呼叫 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"/>
五、常用的小程式請求介面的方式
HTTPS 請求(wx.request
)、上傳檔案(wx.uploadFile
)、下載檔案(wx.downloadFile
) 和 WebSocket 通訊(wx.connectSocket
)