小程序的框架

學習一個東西，我們從它的主體框架入手是最好的，瞭解它的每一部分都是幹什麼的，後面的工作才更容易展開，也能少踩很多坑。

1.目錄文件

新建一個微信小程序，它的目錄文件如下：

根目錄下的文件有：

pages

utils

app.js

app.json

app.wxss

project.config.json

sitemap.json

來看看它的每一個文件的作用都是什麼吧

1.1 app.json：全局配置

如你所見，它是一個json文件，內含5個key-value鍵值對屬性.

page屬性：它對應的value值是一個列表，表的成員是String類型的，包含着整個小程序所有的頁面。
windows屬性：用於設置小程序的狀態欄、導航條、標題、窗口背景色。**
tabBar屬性：如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。（底部tab欄最少2個，最多5個）。還有一個要注意的點，tabBar欄的圖片名稱必須爲純字母
works屬性：使用 Worker 處理多線程任務時，設置 Worker 代碼放置的目錄。
sitemapLocation屬性： 指明 sitemap.json 的位置（默認跟app.json同級）。

此外還有很多屬性，只要是涉及全局設置的，都是app.json的工作。詳見官方文檔：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

注：頁面的單獨配置的優先級是高於全局配置的

1.2 pages：頁面目錄

頁面目錄，我們編寫的任一頁面的前端代碼，都保存在該目錄下，自帶的index是主頁面，logs是登錄界面。

1.3 utils：公共代碼

utils目錄下只有一個文件utils.js。

它將一些公共的代碼抽離，形成單獨的模塊（有點像java spring的 AOP）保存在utils.js中，然後用mudule.exports來連接外部，外部使用require(path)（path爲utils.js的路徑）導入該模塊包，就可以使用裏面的函數。

1.4 sitemap.json：允許微信索引

這個目前我還是不太清楚有什麼用

1.5 app.js: 項目的入口文件

可以看到，它由一個App()函數組成，接受一個Object參數，並沒有函數體.參數由多個函數組成，一般調用形式如下：

App({
	函數名1:function(){
		//函數1的函數體
	},
	函數名2:function(){
		//函數2的函數體
	}
	//還可以設置全局函數
})

這其中有幾個重要的函數要特別介紹一下

onLaunch:function(){} //生命週期回調——監聽小程序初始化
onShow:function(){}  //當該頁面從後臺進入前臺時執行的函數
onHide:function(){}  //當該頁面從前臺進入後臺時執行的函數

1.6 app.wxss：全局樣式

一個全局的css樣式文件

1.7 project.config.json：項目配置文件

具體可見博客：https://www.cnblogs.com/lizm166/p/9547816.html

1.8 獲取小程序的實例：getApp()

在小程序下的任一頁面的js文件，都可以使用該函數獲取小程序的唯一實例進行操作。值得注意的是，必須在App()執行後（創建實例）再執行該函數，才能成功獲取到小程序實例，但存在一個問題就是：小程序是默認異步執行的，有可能App()還沒執行完，含有getApp()的頁面已經啓動，從而獲取不到實例。（解決方法百度）