全棧工程師之路-中級篇之小程式開發-第一章第三節閱讀官方demo
在網上好多人,喜歡找別人寫好的一些線上的專案原始碼,比較完整的。想著學習的更加實用和全面一點。
這無可厚非,但是,我發現有好多人並不是很在意官方提供的demo。
比如ionic的tabs demo就沒有什麼人看。
我個人覺得既然官方把這樣的demo推到了入門的地位,那必然是有它的道理的。
所以我很喜歡從官方的demo開始學習,因為它足夠簡單,又足夠讓我明白它的用法和邏輯。
上一節課,我們已經講解了如何新建一個專案,並且講解了工具裡面的一部分功能。
剩下的在專案開發中比較常用的,不容易被忽略的,上一節就沒詳細講解。會在之後的開發中介紹。
一、目錄結構
小程式規定一個頁面對應四個檔案。(其中有的必須有的非必需,太麻煩了,反正記下來四個檔案就好)
*.js 小程式的邏輯檔案
*.json 小程式的配置檔案
*.wxss 小程式的樣式檔案--相當於css
*.wxml 小程式的頁面結構--相當於html
每一個子頁面都對應四個上述的檔案。
在根目錄下還有三個檔案,可以理解為存放公共配置、公共邏輯、公共樣式的地方。
這麼理解吧,小程式會首先使用這外面的三個檔案。如果子頁面自己的相應檔案做了修改,則會使用子頁面的配置和樣式。
接下來我們開啟app.json檔案
看第一個page屬性,是一個字串陣列,用於配製子頁面的檔案路徑。
注意陣列的第一項就是開啟小程式時的主頁面。
還有這裡有一個新建頁面的技巧,最開始我新建一個頁面是先新建一個資料夾,然後在資料夾裡面新建四個檔案,最後再在配置表裡面新增路徑。
有一次由於拼寫錯誤,發現,工具自動新建裡一個資料夾和頁面所需的檔案,並且檔案裡面還寫了必要的內容。
如:在page裡面寫上"pages/test/test". 按ctrl+s儲存(Mac用command+s),工具就自動建立了四個檔案了。
接著看app.json裡面的window屬性。
window屬性用來配置小程式的狀態列、導航欄、標題和視窗的背景色。注意每個子頁面都可以在自己的json檔案裡面,單獨對上述這四個屬性做單獨的配置。
除了圖中四種屬性,還有enablePullDownRefresh 是否開啟下拉重新整理。
接下來我們開啟app.wxss
這個屬於公共的樣式表,只要在這個檔案中定義的樣式檔案,可以在任何子頁面中呼叫。
而在子頁面中定義的獨立樣式,則只能在自己的結構檔案中呼叫,子頁面之間不能相互呼叫。
/util/util.js
工具檔案,編輯一些常用工具方法,用的比較多的就是用來配置伺服器請求路徑。
這應該是用來做公用方法的,但是公用方法又可以寫在app.js中,所以我也不是太清楚,這個檔案的意義是什麼。
接下來我們來看一下,我們剛剛新建的test.js檔案。
// pages/test/test.js
Page({
/**
* 頁面的初始資料
*/
data: {
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
}
})
這個新建的檔案,比demo現有的程式碼能讓我們更清楚的知道小程式的生命週期。
我們現在每一個勾子函式中打印出相應的日誌。
如:
修改app.json檔案,將test頁面修改成預設頁面
-------------------2017年5月14日編輯到這裡,2017年7月28日接著編輯,有點忘記這小節要講什麼了,補充一點算一點吧。---------------------------
開啟工具-除錯-console檢視,列印日誌。可以檢視勾子函式的呼叫順序,瞭解小程式的生命週期,其他沒列印的函式,看名字,應該能明白。
其中兩個函式,這裡可以重複提一下。onPullDownRefresh(監聽使用者下拉動作)、onReachBottom(頁面上拉觸底事件的處理函式)
這兩個函式onPullDownRefresh用於下拉重新整理頁面,可參考微信朋友圈,下拉拉取朋友們最新發布的朋友圈訊息。
onReachBottom是使用者載入更多列表,同樣參考微信朋友圈,下拉拉取更多朋友圈列表歷史記錄,分頁載入更多資料的概念。
接下來讓我們重新回到最原始的demo裡檢視index裡面的內容。
修改app.json,將"pages/index/index"設定成page陣列的第一項,是index頁面作為啟動頁。
開啟// pages/index/index.wxml
現在把所有的關注點集中在上圖我標記的位置(我開啟的時候我電腦裡面的demo我做過一點點修改,可能跟原來的不太一樣,但是這幾個地方沒有變化,不要太較真哦)
1、先看第二行class="container"這個和傳統的html中的用法一樣,只是對應檔案wxss中的.container{}
2、標籤,在小程式中,所使用的標籤全是微信做過封裝的,可以按照html的標籤去理解記憶這些標籤,但是不能完全等同,應該查閱詳細的api看看有什麼屬性,便於後續的開發,可能你要的什麼功能,微信已經封裝好了。
3、src=“{{地址變數}}”’這個和ng中的繫結資料很像,只是直接使用src,注意雙大括號要當在雙引號裡面。
4、在標籤中的繫結資料也是用雙{{}},現在好多新的框架基本上都是這麼做的,注意這裡雙大括號不需要放在雙引號裡面。
5、bindtap="bindTiewTap" 事件繫結,這裡先略過,後續的詳細的出一節講解所有的繫結事件,也可查閱官方文件。
接下來我們先深入的看小程式的資料繫結,這裡我們從上圖中的標記4{{'你好,'+userInfo.nickName}}入手瞭解。
這裡可以知道這裡的資料綁定了userInfo變數的nickName屬性。那這個userInfo又是從哪裡來的呢?
接著我們開啟檔案// pages/index/index.js
看第五行的data,我們知道userInfo是這個data的一個屬性。這裡我們知道小程式把介面繫結在了他相對應的js的data中。
這麼理解吧,js中的Page對應一個介面。
看第3行,建立了一個變數app通過全域性方法,getApp()獲取了當前應用例項。
在19行中呼叫了app.getUserInfo的方法。這裡可以跟進檢視到上一層的app.js中
這裡我們就知道了,在index.js中呼叫getApp()方法獲取的就是app.js中的這個App();
接下來我們把注意力集中在getUserInfo這個方法中,這裡出現一個wx.login()方法。
這裡我們並沒有人任何一個地方定義了wx變數,所以這裡可以知道,小程式中把wx作為官方API的保留關鍵字。這裡呼叫了微信的登入介面,獲取了使用者資料。
那麼這一整個流程就是進入index介面-呼叫onload方法-呼叫app.js中的getUserInfo方法-呼叫微信登入介面-獲取使用者資料-通過回撥函式cb-回撥到index.js中-
將資料賦值給data的userInfo-傳遞到介面中的{{userInfo.nikeName}}實現資料展示。
其實要深究的話這個demo還有不少內容,介於篇幅將其他的內容放於後續的章節中講解。
這節課的內容就到這裡結束了。
感謝您的閱讀。
我是小虎(最近把名字改成了莽夫,覺得比較符合我的性格特徵,說好的行不改名坐不改姓呢,捂臉),希望你開心。
有什麼問題可以直接聯絡我的個人微信yu_xiaohiu
希望大家關注我的個人公眾號ionic_