小程式面試題

晴天~ ☀發表於2019-03-10

現在面試,都會問,你會不會小程式呀,你做沒做過小程式呀,其實小程式很簡單,只要嚴格按照小程式的官網來開發就行,一些常用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、事件分類

  1. 冒泡事件:當一個元件上的事件被觸發後,該事件會向父節點傳遞。
  2. 非冒泡事件:當一個元件上的事件被觸發後,該事件不會向父節點傳遞。

2、事件的繫結

事件繫結的寫法同元件的屬性,以 key、value 的形式。

  • key 以bindcatch開頭,然後跟上事件的型別,如bindtapcatchtouchstart
  • value 是一個字串,需要在對應的 Page 中定義同名的函式。不然當觸發事件的時候會報錯。
bind事件繫結不會阻止冒泡事件向上冒泡,catch事件繫結可以阻止冒泡事件向上冒泡。

3、如何實現下拉重新整理

監聽使用者下拉重新整理事件。

  • 需要在app.jsonwindow選項中或頁面配置中開啟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


相關文章