跟我來學小程式（一）專案目錄和專案檔案介紹
大家好，我是一個愛舉鐵的程式設計師Shr。
本篇檔案介紹小程式專案的目錄和專案檔案。
原始碼地址：
https://github.com/ShrMus/wechat_xcx/tree/master/demo_20180603
一、新建專案
開啟微信web開發者工具，選擇小程式專案，由於沒有新建過專案，開啟之後是下圖的介面，選擇專案目錄，填寫註冊之後獲得的AppID，填寫專案名稱，點選確定。
然後就打開了新建的專案，如圖所示。
二、檔案的作用
先說一下專案中出現的檔案，檔案有四種，js，json，wxml，wxss。
大家熟悉的js就是用來互動的了。
json是一種資料格式，那這裡放的就是資料了。
還有wxml和wxss那是幹嘛用的，
千萬不要以為wxml是和xml檔案一樣，xml檔案也是用來儲存資料的，但是已經有一種json檔案儲存資料了。
這裡的wxml可以理解成html，那wxss就可以理解成css了。
三、目錄結構介紹
目錄結構如下圖所示。
接下來了解一下各個目錄的作用。
3.1 pages目錄
pages目錄裡面放的是頁面，當前的專案中有兩個頁面，一個是index.wxml，一個是logs.wxml，每個頁面都有對應的wxss和js。
3.2 utils目錄
utils目錄，顧名思義，工具，這裡可以放公共的wxss和js等，這樣就不用在每個頁面做重複的工作了。
3.3 app.json
官方文件的說法是對當前小程式的全域性配置，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。
來看看裡面是什麼。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle" 這個檔案還有很多其他的屬性，我把這些屬性都加上去之後的程式碼如下，由於JSON格式的檔案不能用//或者/* */加註釋，我就用這種資料格式定義key/value加註釋了。
{
"pages註釋":"必填。陣列型別，每一項都是字串，來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔名】資訊，陣列的第一項代表小程式的初始頁面。小程式中新增/減少頁面，都需要對 pages 陣列進行修改。",
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window註釋":"選填。物件型別。用於設定小程式的狀態列、導航條、標題、視窗背景色。",
"window": {
"backgroundTextStyle註釋":"下拉 loading 的樣式，僅支援 dark/light，預設值dark",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor註釋":"導航欄背景顏色，如#000000，預設值#000000",
"navigationBarBackgroundColor": "#000000",
"navigationBarTitleText註釋":"導航欄標題文字內容",
"navigationBarTitleText": "Shr",
"navigationBarTextStyle註釋": "導航欄標題顏色，僅支援 black/white，預設值white",
"navigationBarTextStyle": "white",
"navigationStyle註釋": "導航欄樣式，僅支援 default/custom。custom ",
"navigationStyle": "default",
"backgroundColor註釋": "視窗的背景色，預設值#ffffff",
"backgroundColor": "#eeeeee",
"enablePullDownRefresh註釋": "是否開啟下拉重新整理，預設值false",
"enablePullDownRefresh": false,
"onReachBottomDistance註釋": "頁面上拉觸底事件觸發時距頁面底部距離，單位為px，預設值50",
"onReachBottomDistance": "100",
"backgroundColorTop註釋":"頂部視窗的背景色，僅 iOS 支援",
"backgroundColorTop":"#ffffff",
"backgroundColorBottom註釋":"底部視窗的背景色，僅 iOS 支援",
"backgroundColorBottom":"#ffffff"
},
"tabBar註釋": "選填。物件型別。如果小程式是一個多 tab 應用（客戶端視窗的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。可以理解成頁面底部的導航",
"tabBar": {
"color註釋": "必填。tab 上的文字預設顏色",
"color": "#000000",
"selectedColor註釋": "必填。tab 上的文字選中時的顏色",
"selectedColor":"#FF0000",
"backgroundColor註釋": "必填。tab 的背景色",
"backgroundColor": "#B0B0B0",
"borderStyle註釋": "選填。tabbar上邊框的顏色， 僅支援 black/white，預設black",
"borderStyle": "white",
"list註釋": "必填。list接受一個數組，陣列中的每個項都是一個物件",
"list": [
{
"pagePath註釋": "必填。頁面路徑，必須在 pages 中先定義",
"pagePath": "pages/index/index",
"text註釋": "必填。tab 上按鈕文字",
"text": "首頁",
"iconPath註釋": "選填。圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當 postion 為 top 時，此引數無效，不支援網路圖片",
"iconPath": "utils/TIM截圖20180605012119.png",
"selectedIconPath註釋": "選填。選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當 postion 為 top 時，此引數無效",
"selectedIconPath": "utils/TIM截圖20180605012210.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日誌",
"iconPath": "utils/TIM截圖20180605012119.png",
"selectedIconPath": "utils/TIM截圖20180605012210.png"
}
],
"position註釋": "選填。可選值 bottom、top，預設bottom，為 top 時，將不會顯示 icon",
"position": "top"
},
"networkTimeout註釋": "選填。物件型別。可以設定各種網路請求的超時時間。",
"networkTimeout": {
"request註釋": "選填。wx.request的超時時間，單位毫秒，預設為：60000",
"request": 20000,
"connectSocket註釋": "選填。wx.connectSocket的超時時間，單位毫秒，預設為：60000",
"connectSocket": 20000,
"uploadFile註釋": "選填。wx.uploadFile的超時時間，單位毫秒，預設為：60000",
"uploadFile": 20000,
"downloadFile註釋": "選填。wx.downloadFile的超時時間，單位毫秒，預設為：60000",
"downloadFile": 20000
},
"debug註釋": "選填。Boolean型別。可以在開發者工具中開啟 debug 模式，在開發者工具的控制檯面板，除錯資訊以 info 的形式給出，其資訊有Page的註冊，頁面路由，資料更新，事件觸發 。 可以幫助開發者快速定位一些常見的問題。",
"debug": true
}
看看小程式的頁面。
將tabBar中的position改成top之後，導航就到頁面頂部了，但是圖片就沒了。
這是對全域性頁面的配置，也可以對單個頁面建立一個JSON檔案，這樣就只配置app.json中的window屬性。頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
3.4 project.config.json
專案的配置檔案，對專案進行個性化配置，例如介面顏色、編譯配置，打包配置等等。來看看預設是什麼。
{
"description": "專案配置檔案。",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "2.0.9",
"appid": "填你註冊小程式賬號之後獲得的appid",
"projectname": "demo_20180603",
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
具體配置詳情請看官方文件，我就不一一寫註釋了。
https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
3.5 app.wxss
來看看裡面有什麼。
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
CSS樣式，這個能看懂，WXSS有CSS大部分特性，它對CSS進行了擴充和修改。這個app.wxss是公共樣式表。
3.6 app.js
來看看裡面是什麼。
//app.js
App({
onLaunch: function () {
// 展示本地儲存能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登入
wx.login({
success: res => {
// 傳送 res.code 到後臺換取 openId, sessionKey, unionId
}
})
// 獲取使用者資訊
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 傳送給後臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
App() 函式用來註冊一個小程式。接受一個 object 引數，其指定小程式的生命週期函式等。onLaunch監聽小程式初始化，當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）。
3.6.1 object引數說明
|
屬性 |
型別 |
描述 |
觸發時機 |
|
onLaunch |
Function |
生命週期函式--監聽小程式初始化 |
當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次） |
|
onShow |
Function |
生命週期函式--監聽小程式顯示 |
當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow |
|
onHide |
Function |
生命週期函式--監聽小程式隱藏 |
當小程式從前臺進入後臺，會觸發 onHide |
|
onError |
Function |
錯誤監聽函式 |
當小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊 |
|
onPageNotFound |
Function |
頁面不存在監聽函式 |
當小程式出現要開啟的頁面不存在的情況，會帶上頁面資訊回撥該函式，詳見下文 |
|
其他 |
Any |
開發者可以新增任意的函式或資料到 Object 引數中，用 this 可以訪問 |
3.6.2 小程式前臺、後臺的定義
當用戶點選左上角關閉，或者按了裝置 Home 鍵離開微信，小程式並沒有直接銷燬，而是進入了後臺；當再次進入微信或再次開啟小程式，又會從後臺進入前臺。
3.6.3 小程式的生命週期
小程式啟動會有兩種情況，一種是「冷啟動」，一種是「熱啟動」。 假如使用者已經開啟過某小程式，然後在一定時間內再次開啟該小程式，此時無需重新啟動，只需將後臺態的小程式切換到前臺，這個過程就是熱啟動；冷啟動指的是使用者首次開啟或小程式被微信主動銷燬後再次開啟的情況，此時小程式需要重新載入啟動。
小程式銷燬的情況，當小程式進入後臺，客戶端會維持一段時間的執行狀態，超過一定時間後（目前是5分鐘）會被微信主動銷燬
當短時間內（5s）連續收到兩次以上收到系統記憶體告警，會進行小程式的銷燬
修改app.js
//app.js
App({
onLaunch: function () {
console.log("小程式onLaunch");
// 展示本地儲存能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登入
wx.login({
success: res => {
// 傳送 res.code 到後臺換取 openId, sessionKey, unionId
}
})
// 獲取使用者資訊
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 傳送給後臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
onShow: function (options) {
console.log("小程式onShow");
},
onHide: function () {
console.log("小程式onHide");
},
onError: function (msg) {
console.log(msg)
},
globalData: {
userInfo: null
}
})我在後面加了幾個方法，然後看控制檯列印的內容。
3.6.4 onLaunch, onShow 引數
|
欄位 |
型別 |
說明 |
|
path |
String |
開啟小程式的路徑 |
|
query |
Object |
開啟小程式的query |
|
scene |
Number |
開啟小程式的場景值 |
|
shareTicket |
String |
shareTicket，詳見 獲取更多轉發資訊 |
|
referrerInfo |
Object |
當場景為由從另一個小程式或公眾號或App開啟時，返回此欄位 |
|
referrerInfo.appId |
String |
來源小程式或公眾號或App的 appId，詳見下方說明 |
|
referrerInfo.extraData |
Object |
來源小程式傳過來的資料，scene=1037或1038時支援 |
修改onShow方法，加上引數，然後列印引數。
onShow: function (options) {
console.log("小程式onShow");
console.log(options);
},
看看控制檯。
其他的屬性就看官方文件吧。
3.6.5 注意事項
App() 必須在app.js中註冊，且不能註冊多個。
不要在定義於App()內的函式中呼叫 getApp()使用 this就可以拿到app例項。
不要在onLaunch的時候呼叫 getCurrentPages()，此時page還沒有生成。
通過getApp()獲取例項之後，不要私自呼叫生命週期函式。
3.6.6 場景值
剛剛控制檯列印的options引數中的scene就是一個場景值，它表示在發現欄小程式主入口開啟小程式。其他還有掃描二維碼進入小程式等等場景。詳見：
3.7 index.js
index.js當中有一個Page()，App()函式用來註冊一個小程式。Page()函式就是用來註冊一個頁面。
接受一個object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。
3.7.1 object引數說明
|
屬性 |
型別 |
描述 |
|
Object |
頁面的初始資料 |
|
|
onLoad |
Function |
生命週期函式--監聽頁面載入 |
|
onReady |
Function |
生命週期函式--監聽頁面初次渲染完成 |
|
onShow |
Function |
生命週期函式--監聽頁面顯示 |
|
onHide |
Function |
生命週期函式--監聽頁面隱藏 |
|
onUnload |
Function |
生命週期函式--監聽頁面解除安裝 |
|
onPullDownRefresh |
Function |
頁面相關事件處理函式--監聽使用者下拉動作 |
|
onReachBottom |
Function |
頁面上拉觸底事件的處理函式 |
|
onShareAppMessage |
Function |
使用者點選右上角轉發 |
|
onPageScroll |
Function |
頁面滾動觸發事件的處理函式 |
|
onTabItemTap |
Function |
當前是 tab 頁時，點選 tab 時觸發 |
|
其他 |
Any |
開發者可以新增任意的函式或資料到 object 引數中，在頁面的函式中用 this 可以訪問 |
3.7.2 頁面的生命週期
onLoad: 頁面載入，一個頁面只會呼叫一次，可以在 onLoad 中獲取開啟當前頁面所呼叫的 query 引數。
onShow: 頁面顯示，每次開啟頁面都會呼叫一次。
onReady: 頁面初次渲染完成，一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動。對介面的設定如wx.setNavigationBarTitle，在onReady之後設定。
onHide: 頁面隱藏，當navigateTo或底部tab切換時呼叫。
onUnload: 頁面解除安裝，當redirectTo或navigateBack的時候呼叫。
3.8 index.wxml
看看裡面有什麼。
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
看不太明白，WXML有屬於自己的元件，事件繫結，後面再介紹。你可以認為它就是小程式的HTML，但是它有不同於HTML的地方。
四、總結
小程式和Web中的網頁相似，網頁是用HTML，CSS，JS的組合，小程式是WXML，WXSS，JS，資料傳輸用JSON。
我在配置app.json的時候，window中的backgroundColor配置無效。
tabBar設定position為top時，將不會顯示 icon
tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按陣列的順序排序。
各個檔案的內容和作用就介紹完了。