微信小程式的檔案結構 —— 微信小程式教程系列（1）
檔案結構
示例目錄：HelloWorld
全域性檔案
app.js檔案
這個是小程式的指令碼程式碼檔案，可以在這個檔案上進行監聽，並處理小程式的一些生命週期（比如一些全域性變數）
在這個app.js檔案內，需要使用App()函式，來註冊程式。
演示：
//app.js
App({
onLaunch: function () {
//當小程式初始化完成時，會觸發onLaunch（全域性只觸發一次）
},
onShow: function () {
//當小程式啟動，或從後臺進入前臺顯示，會觸發onShow
},
onHide: function () {
//當小程式從前臺進入後臺，會觸發onHide
},
onError: function (msg) {
//當小程式發生指令碼錯誤，或者api呼叫失敗時，會觸發onError並帶上錯誤資訊
},
other:function(){
//全域性函式，可以被專案上的其他js檔案呼叫
},
globalData:{
//全域性物件
},
})
app.json檔案
小程式的全域性配置檔案
pages
來指定小程式由哪些頁面組成
接受一個數組，每一項都是字串。每一項代表對應頁面的【路徑+檔名】資訊，陣列的第一項代表小程式的初始頁面。小程式中新增/減少頁面，都需要對pages陣列進行修改。
檔名不需要寫檔案字尾，因為框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個檔案進行整合。
例如：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
備註：pages內只需要寫wxml檔案的路徑，其他檔案不用寫
window
用於設定小程式的狀態列、導航條、標題、視窗背景色
示例：
{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信介面功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
tabBar
如果我們的小程式是一個多 tab應用（客戶端視窗的底部或頂部有 tab欄可以切換頁面），那麼我們可以通過 tabBar配置項指定 tab欄的表現，以及 tab切換時顯示的對應頁面。
Tip： 通過頁面跳轉（wx.navigateTo）或者頁面重定向（wx.redirectTo）所到達的頁面，即使它是定義在 tabBar配置中的頁面，也不會顯示底部的 tab欄。
tabBar 是一個數組，只能配置最少2個、最多5個 tab，tab按陣列的順序排序。
示例：
{
"tabBar": {
"color":"#818181",
"selectedColor":"#0082D7",
"borderStyle":"white",
"list": [{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath":"images/tabbar/index@2x.png",
"selectedIconPath":"images/tabbar/index[email protected]"
}, {
"pagePath": "pages/me/me",
"text": "設定",
"iconPath":"images/tabbar/me@2x.png",
"selectedIconPath":"images/tabbar/me[email protected]"
}]
}
}
networkTimeout
可以設定各種網路請求的超時時間。
示例：
{
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
}
}
debug
可以在開發者工具中開啟 debug模式，在開發者工具的控制檯面板，除錯資訊以 info的形式給出，其資訊有Page的註冊，頁面路由，資料更新，事件觸發 。 可以幫助開發者快速定位一些常見的問題。
示例：
{
"debug": false
}
app.wxss檔案
定義全域性的樣式
基本上與css差不多，這裡不用多講
一個頁面的內部
xxx.js
邏輯主函式
Page({
})
示例：
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})
示例：
Page({
onShareAppMessage: function () {
return {
title: '自定義分享標題',
desc: '自定義分享描述',
path: '/page/user?id=123'
}
}
})
xxx.wxml
使用微信提供的元件來代替html元素
示例：
xxx.wxss
小程式樣式，與css樣式基本相似，這裡不重複論述
在當前頁面的wxss檔案內編輯的css樣式，只能使用在當前頁面
xxx.json
每一個小程式頁面也可以使用.json檔案來對本頁面的視窗表現進行配置。 頁面的配置比app.json全域性配置簡單得多，只是設定 app.json中的 window配置項的內容，頁面中配置項會覆蓋 app.json的 window中相同的配置項。
頁面的.json只能設定 window相關的配置項，以決定本頁面的視窗表現，所以無需寫 window這個鍵
示例：
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信介面功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
微信小程式教程系列
註冊上線篇
------------------------------------------------------------
基礎篇
------------------------------------------------------------
實戰篇
------------------------------------------------------------
電商篇
------------------------------------------------------------