2.2　微信小程序框架配置

本節(jié)講講框架配置，內(nèi)容并不多，重點(diǎn)掌握以下兩點(diǎn)即可：一是新生成的項(xiàng)目目錄結(jié)構(gòu)是怎么樣的，每個(gè)文件都有什么作用；二是幾個(gè)主要文件的配置方法。

2.2.1　目錄結(jié)構(gòu)

打開項(xiàng)目，觀察項(xiàng)目的文件目錄結(jié)構(gòu)，如圖2.1所示。

從圖2.1中可以看出，層級(jí)結(jié)構(gòu)比較分明。下面我們按照?qǐng)D中出現(xiàn)的順序來介紹大概的用處。

pages下的為頁(yè)面目錄，這里有兩個(gè)頁(yè)面，分別為index和logs。json是頁(yè)面配置文件，剩余的js、wxml、wxss是頁(yè)面的邏輯、標(biāo)簽和樣式。

utils是工具類的文件夾，也可以另外新建一些文件夾來替代它。

再來看project.config.json和sitemap.json。project.config.json是一個(gè)項(xiàng)目配置文件，設(shè)置是否轉(zhuǎn)換ES6、顯示當(dāng)前使用庫(kù)版本等。sitemap.json配置小程序是否允許被微信索引。默認(rèn)是所有頁(yè)面都可以被索引。如果要修改索引方式，方法也十分簡(jiǎn)單，我們先看一下默認(rèn)的配置，代碼如下：

rules是一個(gè)數(shù)組，可以設(shè)置多條規(guī)則，關(guān)鍵在于里面的元素。action中的allow是允許，disallow是不允許。page是目錄，如果填寫星號(hào)，則是所有。規(guī)則就是這么簡(jiǎn)單，我們來完成一個(gè)例子。

【示例2-1】

允許索引home頁(yè)面，禁止索引其他所有頁(yè)面：

內(nèi)容基本就是這么多。因?yàn)檫@兩個(gè)文件在開發(fā)中用到的并不是很多，所以暫時(shí)不用管它們。

2.2.2　app.json

app.json是一個(gè)主要的公共配置文件，我們直接看里面默認(rèn)的內(nèi)容。

首先是參數(shù)pages，它接收的是一個(gè)數(shù)組，里面存放著所有的頁(yè)面，所有的頁(yè)面都必須在這里寫上路徑才可以使用。如果使用第1章中微信開發(fā)者工具的新建頁(yè)面功能，就可以自動(dòng)在pages填充新的頁(yè)面，不需要進(jìn)行任何操作。

接著是參數(shù)window，從參數(shù)內(nèi)容讀者應(yīng)該能猜到一個(gè)大概。它主要用于配置整體頁(yè)面的背景色、導(dǎo)航欄顏色、導(dǎo)航欄標(biāo)題等。除了它默認(rèn)填寫的幾個(gè)參數(shù)外，還有一些其他參數(shù)，比如說tabBar參數(shù)，可以用來控制生成底部的選項(xiàng)卡。

【示例2-2】

這里舉一個(gè)簡(jiǎn)單的例子：

通過參數(shù)名稱很容易看出參數(shù)所代表的含義。比如selectedColor代表選中時(shí)的字體顏色，list是選項(xiàng)卡的數(shù)組，selectedIconPath、iconPath是選中、未選中時(shí)的圖標(biāo)，pagePath是對(duì)應(yīng)文件目錄，text是選項(xiàng)卡的標(biāo)題。最后是參數(shù)sitemapLocation，用來配置前面所有的sitemap.json文件，一般來說不需要修改。

常見的配置項(xiàng)目基本就是這些，這部分內(nèi)容會(huì)在后面的章節(jié)經(jīng)常用到，所以不用擔(dān)心忘記。

2.2.3　app.js

app.js可以說是程序的入口，它的最外層由一個(gè)App()構(gòu)成，里面是onLaunch和globalData。其中，globalData是一個(gè)變量，寫在app.js中是為了方便全局調(diào)用。下面我們主要分析onLaunch。

onLaunch是小程序啟動(dòng)時(shí)會(huì)加載的一個(gè)函數(shù)，代碼如下：

這些代碼都是由新項(xiàng)目自動(dòng)生成的，我們逐行分析。

首先logs通過wx.getStorageSync獲取了存儲(chǔ)的數(shù)據(jù)，并添加一條當(dāng)前時(shí)間，再通過wx.setStorageSync保存回去，用以統(tǒng)計(jì)使用時(shí)間來展示本地存儲(chǔ)能力。

接下來是登錄方法wx.login，這個(gè)方法會(huì)返回一個(gè)code，需要讓服務(wù)端來?yè)Q取一些用戶數(shù)據(jù)，其中最重要的就是openId，這個(gè)參數(shù)一般作為用戶的唯一標(biāo)識(shí)。

最后就是wx.getSetting方法，這個(gè)方法用于獲取用戶信息，比如用戶昵稱、頭像等。在這段代碼的回調(diào)中有一層判斷，如果已經(jīng)授權(quán)，則直接獲取保存在globalData里，方便全局調(diào)用。如果沒有獲取，則不執(zhí)行任何操作。

2.2.4　app.wxss

app.wxss是小程序公共樣式表，這里聲明的樣式，在其他wxml文件中都可以使用。比如在這個(gè)新項(xiàng)目中，app.wxss中有一個(gè)container樣式，在index.wxml中就使用到了該樣式，代碼如下：

這個(gè)文件的主要作用就是方便復(fù)用，如果有需要重復(fù)使用的樣式，可以寫在這里。