微信讀書 裏面有一本《微信小程序開發入門與實踐》相當不錯 ，有助於入門。
一 小程序概念
二 全局配置
1 根目錄下的 app.json 文件是對整個小程序的全局配置。
- pages ：頁面路徑列表。
數組的第一項代表小程序的初始頁面（首頁）。小程序中新增/減少頁面，都需要對 pages 數組進行修改（類似於註冊）。 - window : 全局的默認窗口表現。
用於設置小程序的狀態欄、導航條、標題、窗口背景色。 - tabBar ：底部 tab欄。
- networkTimeout ：各類網絡請求的超時時間，單位均爲毫秒。
"networkTimeout": {
"request":10000,
"uploadFile":10000,
"downloadFile":10000
}
// app.json
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "images/icona.png",
"selectedIconPath": "images/icon_a.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日誌",
"iconPath": "images/iconb.png",
"selectedIconPath": "images/icon_b.png"
}
]
}
2 根目錄下的 sitemap.json 文件用於配置小程序及其頁面是否允許被微信索引，如果沒有 sitemap.json ，則默認爲所有頁面都允許被索引。
三 註冊程序及程序生命週期
3 app.js 是小程序 App的腳本代碼。
App() ：註冊小程序，指定小程序的生命週期回調，聲明全局變量等等。
必須在 app.js 中調用，必須僅且只能調用一次。不然會出現無法預期的後果。
4 globalData 設置全部變量
App({
onLaunch (options) {//生命週期回調——監聽小程序初始化
// Do something initial when launch.
},
onShow (options) {//生命週期回調——監聽小程序啓動或切前臺。
// Do something when show.
},
onHide (options) {//生命週期回調——監聽小程序切後臺。
// Do something when hide.
},
onError (msg) {//錯誤監聽函數。
console.log(msg)
},
onPageNotFound(res) {//頁面不存在監聽函數。
wx.redirectTo({
url: 'pages/...'
}) // 如果是 tabbar 頁面，請使用 wx.switchTab
}，
globalData: {
}
})
四 頁面註冊及頁面生命週期
Page(): 註冊小程序中的一個頁面, 指定頁面的初始數據、生命週期回調、事件處理函數等
data: {//頁面的初始數據
logs: []
},
onLoad: function () {//生命週期回調—監聽頁面加載
console.log("page execute: onLoad.");
},
onReady: function() {//生命週期回調—監聽頁面初次渲染完成
console.log("page execute: onReady.");
},
onShow: function() {//生命週期回調—監聽頁面顯示
// Do something when page show.
console.log("page execute: onShow.");
},
onHide: function() {//生命週期回調—監聽頁面隱藏
// Do something when page hide.
console.log("page execute: onHide.");
},
onUnload: function() {//生命週期回調—監聽頁面卸載
// Do something when page close.
console.log("page execute: onUnload.");
},
onPullDownRefresh: function() {//監聽用戶下拉動作
// Do something when pull down.
console.log("page execute: onPullDownRefresh.");
},
onReachBottom: function() {//頁面上拉觸底事件的處理函數
// Do something when page reach bottom.
console.log("page execute: onReachBottom.");
},
五 模塊化
引入模塊。通過 module.exports 或 exports 暴露的接口
//util.js
function formatTime(date) {...}
module.exports.formatTime = formatTime
或
module.exports = { formatTime: formatTime}
//使用
var util = require('..util.js');
util.formatTime();
