前言
9月21日,傳言已久的微信應(yīng)用號(hào)正式以“微信公眾平臺(tái)小程序”的名義發(fā)布,依然采取了內(nèi)測(cè)制度,目前只有少部分開發(fā)者可使用?!拔⑿胖浮睆埿↓?jiān)谂笥讶榻B,這種小程序是一種不需要下載安裝即可使用的應(yīng)用,用戶掃一掃或者搜一下即可打開應(yīng)用,對(duì)用戶來(lái)說應(yīng)用觸手可及,對(duì)微信來(lái)說體現(xiàn)了用完即走的理念。應(yīng)用號(hào)出來(lái)之后,有人說微信這次要顛覆AppStore了,開發(fā)者直接基于微信開發(fā)小程序就可以了,不用開發(fā)什么App了。更有人說微信就是一個(gè)操作系統(tǒng),真的如此嗎?不管怎樣,我們下面先來(lái)一探微信小程序。
一 項(xiàng)目文件結(jié)構(gòu)
當(dāng)打開微信小程序的Demo的時(shí)候,我個(gè)人習(xí)慣是先看整個(gè)項(xiàng)目的文件結(jié)構(gòu),先大致弄清這部分是干什么的,那部分又是干什么的,微信小程序基本的文件結(jié)構(gòu)如下圖:
首先我們一眼就可以看到,在項(xiàng)目根目錄有三個(gè)文件,app.js,app.json,以及app.wxss,下面來(lái)談?wù)勎覍?duì)這三個(gè)文件的理解。
1 . app.js
app.js中包含一個(gè)App()函數(shù),我把它理解為微信小程序真正意義上的入口,也就是說當(dāng)啟動(dòng)一個(gè)小程序的時(shí)候,首先會(huì)執(zhí)行到這里。App()函數(shù)用來(lái)注冊(cè)一個(gè)小程序,參數(shù)為Object類型,可以在其中指定小程序的生命周期函數(shù)(理解還不是很透徹), 當(dāng)然,也可以定義一個(gè)全局的數(shù)據(jù)和函數(shù),
我們可以在頁(yè)面中調(diào)用全局的getApp()方法,獲得小程序?qū)嵗?,從而?lái)調(diào)用我們定義的全局?jǐn)?shù)據(jù)和函數(shù)。
2 . app.json
app.json可以對(duì)小程序進(jìn)行全局的配置,比如我們可以配置小程序有哪些頁(yè)面、窗口表現(xiàn)形式、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。下面就是一個(gè)簡(jiǎn)單的配置:
{
"pages": [
"page/index/index",
"page/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "page/index/index",
"text": "首頁(yè)"
},{
"pagePath": "page/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
3 .app.wxss
app.wxss文件比較好理解了,它相當(dāng)于一個(gè)全局的樣式表,等同于前端中的css文件,任何頁(yè)面都可以使用這個(gè)樣式表,當(dāng)然,如果某個(gè)頁(yè)面重復(fù)定義了某個(gè)屬性的表現(xiàn)形式的話,則會(huì)覆蓋app.wxss文件中定義的。
以上三個(gè)文件中,app.js和app.json是每個(gè)微信小程序必須要有的,app.wxss則根據(jù)需要來(lái)添加。
在圖一的文件結(jié)構(gòu)中,還有三個(gè)文件夾目錄:images,pages,utils,這種形式就類似我們開發(fā)中分包的做法(其實(shí)就是)-將具有類型性質(zhì)的文件或者類分目錄存放,這樣便于維護(hù)項(xiàng)目。
我們來(lái)關(guān)注下pages目錄,這個(gè)目錄存放了小程序的所有頁(yè)面。
這里我們定義了兩個(gè)頁(yè)面,index(首頁(yè))和logs(顯示某種日志)。
可以看到,在每個(gè)頁(yè)面中,也有類似前邊兒我們所說的app.js,app.json等文件,下面我們就來(lái)看看它們具體是什么。
以logs頁(yè)面為例:
1 .logs.js
我們看一下這個(gè)文件中簡(jiǎn)單的代碼:
//logs.js
var util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
如果你有過開發(fā)經(jīng)驗(yàn)或者是js開發(fā)經(jīng)驗(yàn),那么一樣就可以看出,這個(gè)類的結(jié)構(gòu)很簡(jiǎn)單:1.引入了一個(gè)外部文件,2.有一個(gè)函數(shù),進(jìn)行了某種處理。
我們看一下官方文檔是怎么介紹這個(gè)以js結(jié)尾的文件的:包含一個(gè)Page()
函數(shù),Page()
函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè)object參數(shù),其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。它是頁(yè)面的邏輯文件,頁(yè)面邏輯在這里處理。
在這個(gè)文件中,我們可以定義變量,函數(shù)等。
2 .logs.json
app.json是小程序的全部配置文件,那么不難理解,logs.json則是logs頁(yè)面的配置文件,在這里我們可以配置頁(yè)面標(biāo)題等屬性。
3 .logs.wxml
wxml文件是頁(yè)面獨(dú)有的,它相當(dāng)于界面,它是與用戶交互的入口,微信提供了很多基礎(chǔ)組件,例如按鈕,文本以及進(jìn)度條等,都可以在這個(gè)文件中配置并顯示出具體的效果。
4 .logs.wxss
wxss跟app.wxss文件一樣,都是樣式表文件,不過每個(gè)頁(yè)面下的這個(gè)文件時(shí)對(duì)于某個(gè)頁(yè)面的,而app.wxss則是全局的樣式配置,相同屬性的話,logs.wxss會(huì)覆蓋掉app.wxss中的。
對(duì)于頁(yè)面下的文件配置,我們來(lái)看一下官方的說明:
總結(jié)
以上就是微信小程序的整體項(xiàng)目文件結(jié)構(gòu),由宏觀到具體,弄清整體框架后,再一步一步學(xué)習(xí)其中的細(xì)節(jié),可能會(huì)更加輕松。想學(xué)習(xí)更多關(guān)于微信小程序的文章請(qǐng)繼續(xù)關(guān)注腳本之家。
您可能感興趣的文章:- 微信小程序 (十七)input 組件詳細(xì)介紹
- 微信小程序 開發(fā)指南詳解
- 微信小程序 (一)新建項(xiàng)目hello WeApp 詳細(xì)介紹
- 微信小程序(十)swiper組件詳細(xì)介紹
- 微信小程序(十三)progress組件詳細(xì)介紹
- 微信小程序 navigator 組件實(shí)例詳解
- 微信小程序 audio 組件實(shí)例詳解
- 微信小程序 canvas API詳解及實(shí)例代碼
- 微信小程序 WXML、WXSS 和JS介紹及詳解
- 微信小程序 條件渲染詳解