微信小程序?qū)W習(xí)之初探小程序

前言

9月21日，傳言已久的微信應(yīng)用號(hào)正式以“微信公眾平臺(tái)小程序”的名義發(fā)布，依然采取了內(nèi)測制度，目前只有少部分開發(fā)者可使用。“微信之父”張小龍?jiān)谂笥讶榻B，這種小程序是一種不需要下載安裝即可使用的應(yīng)用，用戶掃一掃或者搜一下即可打開應(yīng)用，對(duì)用戶來說應(yīng)用觸手可及，對(duì)微信來說體現(xiàn)了用完即走的理念。應(yīng)用號(hào)出來之后，有人說微信這次要顛覆AppStore了，開發(fā)者直接基于微信開發(fā)小程序就可以了，不用開發(fā)什么App了。更有人說微信就是一個(gè)操作系統(tǒng)，真的如此嗎？不管怎樣，我們下面先來一探微信小程序。

一 項(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，下面來談?wù)勎覍?duì)這三個(gè)文件的理解。

1 . app.js

app.js中包含一個(gè)App()函數(shù)，我把它理解為微信小程序真正意義上的入口，也就是說當(dāng)啟動(dòng)一個(gè)小程序的時(shí)候，首先會(huì)執(zhí)行到這里。App()函數(shù)用來注冊(cè)一個(gè)小程序，參數(shù)為Object類型，可以在其中指定小程序的生命周期函數(shù)（理解還不是很透徹）, 當(dāng)然，也可以定義一個(gè)全局的數(shù)據(jù)和函數(shù)，
我們可以在頁面中調(diào)用全局的getApp()方法，獲得小程序?qū)嵗?，從而來調(diào)用我們定義的全局?jǐn)?shù)據(jù)和函數(shù)。

2 . app.json

app.json可以對(duì)小程序進(jìn)行全局的配置，比如我們可以配置小程序有哪些頁面、窗口表現(xiàn)形式、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。下面就是一個(gè)簡單的配置：

{ 
"pages": [ 
"page/index/index", 
"page/logs/index" 
], 
"window": { 
"navigationBarTitleText": "Demo" 
}, 
"tabBar": { 
"list": [{ 
"pagePath": "page/index/index", 
"text": "首頁" 
},{
"pagePath": "page/logs/logs",
 "text": "日志" 
}]
 }, 
"networkTimeout": { 
"request": 10000, 
"downloadFile": 10000 
}, 
"debug": true
}

3 .app.wxss

app.wxss文件比較好理解了，它相當(dāng)于一個(gè)全局的樣式表，等同于前端中的css文件，任何頁面都可以使用這個(gè)樣式表，當(dāng)然，如果某個(gè)頁面重復(fù)定義了某個(gè)屬性的表現(xiàn)形式的話，則會(huì)覆蓋app.wxss文件中定義的。

以上三個(gè)文件中，app.js和app.json是每個(gè)微信小程序必須要有的，app.wxss則根據(jù)需要來添加。

在圖一的文件結(jié)構(gòu)中，還有三個(gè)文件夾目錄：images，pages，utils，這種形式就類似我們開發(fā)中分包的做法（其實(shí)就是）-將具有類型性質(zhì)的文件或者類分目錄存放，這樣便于維護(hù)項(xiàng)目。

我們來關(guān)注下pages目錄,這個(gè)目錄存放了小程序的所有頁面。

這里我們定義了兩個(gè)頁面，index（首頁）和logs（顯示某種日志）。
可以看到，在每個(gè)頁面中，也有類似前邊兒我們所說的app.js，app.json等文件，下面我們就來看看它們具體是什么。
以logs頁面為例：

1 .logs.js

我們看一下這個(gè)文件中簡單的代碼：

//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)很簡單：1.引入了一個(gè)外部文件，2.有一個(gè)函數(shù)，進(jìn)行了某種處理。

我們看一下官方文檔是怎么介紹這個(gè)以js結(jié)尾的文件的：包含一個(gè)Page()函數(shù)，Page()函數(shù)用來注冊(cè)一個(gè)頁面。接受一個(gè)object參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。它是頁面的邏輯文件，頁面邏輯在這里處理。

在這個(gè)文件中，我們可以定義變量，函數(shù)等。

2 .logs.json

app.json是小程序的全部配置文件，那么不難理解，logs.json則是logs頁面的配置文件，在這里我們可以配置頁面標(biāo)題等屬性。

3 .logs.wxml

wxml文件是頁面獨(dú)有的，它相當(dāng)于界面，它是與用戶交互的入口，微信提供了很多基礎(chǔ)組件，例如按鈕，文本以及進(jìn)度條等，都可以在這個(gè)文件中配置并顯示出具體的效果。

4 .logs.wxss

wxss跟app.wxss文件一樣，都是樣式表文件，不過每個(gè)頁面下的這個(gè)文件時(shí)對(duì)于某個(gè)頁面的，而app.wxss則是全局的樣式配置，相同屬性的話，logs.wxss會(huì)覆蓋掉app.wxss中的。

對(duì)于頁面下的文件配置，我們來看一下官方的說明：

總結(jié)

以上就是微信小程序的整體項(xiàng)目文件結(jié)構(gòu)，由宏觀到具體，弄清整體框架后，再一步一步學(xué)習(xí)其中的細(xì)節(jié)，可能會(huì)更加輕松。想學(xué)習(xí)更多關(guān)于微信小程序的文章請(qǐng)繼續(xù)關(guān)注腳本之家。