微信小程序開發 目錄結構詳情

最外面的app.js、app.json、app.wxss是全局腳本、全局樣式或者全局配置項。
pages是用於頁面文件夾，裏面的文件夾一個就是一個頁面，不須要引入一個css樣式表啊或者腳本等等。
在pages的頁面中，logs是日誌，能記入一些操做的信息
只要在全局的app.json中配置頁面的話，編輯器自動在pages的目錄下生成頁面目錄及文件。
寫公共的樣式中，能夠寫入全局的app.wxss內。
全局的app.js只要App({})方法才能夠調用頁面的方法和屬性。在頁面的腳本中，是使用Page({})方法來調用

全局文件嘗試
app.js
必須得使用APP({})方法來調用屬性、方法和事件。只能寫一個
//
App({
// 代碼塊，注意能使用es6的就使用吧。
})

屬性 類型 描述 觸發時機
onLaunch Function 生命週期函數–監聽小程序初始化 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）。默認參數接收的，能夠看到加載頁面的路徑及scene場景值還有其餘（從這裏能夠看出是有原型對象的。）
onShow Function 生命週期函數–監聽小程序顯示 當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
onHide Function 生命週期函數–監聽小程序隱藏 當小程序從前臺進入後臺，會觸發 onHide
onError Function 錯誤監聽函數 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
其餘 Any 開發者能夠添加任意的函數或數據到 Object 參數中，用 this 能夠訪問
==根據上面onLaunch事件和onShow的接收參數，能夠獲取下面到東西==
字段 類型 說明
path String 打開小程序的路徑
query Object 打開小程序的query
scene Number 打開小程序的場景值（能夠看出是從什麼地方打開小程序的）
shareTicket String shareTicket，詳見 獲取更多轉發信息
referrerInfo Object 當場景爲由另外一個小程序打開時，返回此字段
referrerInfo.appId String 來源小程序的 appId
referrerInfo.extraData Object 來源小程序傳過來的數據
onLaunch 初始化
當小程序初始化完成觸發的事件， ==不要在 onLaunch 的時候調用 getCurrentPages()，此時 page 尚未生成。==

App({
onLaunch:function (e) {
console.log(e,'我已經初始化了');
if(e.scene === 1011){
console.log('您是掃二維碼進入的');
}else if (e.scene) {
console.log('您是長按圖片識別二維碼');
}else if (e.scene === 1013) {
console.log(手機相冊選取二維碼);
}else if (e.scene === 1029){
console.log('卡券詳情頁');
}
}
});

onShow 小程序啓動或進入前臺
進入小程序觸發一次，而後只要是若是是切換到手機的桌面的話，再次進入小程序觸發一次。==一個變量不能觸發重新賦值==

App({
onShow:function () {
let i = 0; // 只要是在這裏定義的變量都是沒法從新賦值。
if (i == 0){
console.log(i+1); // 這裏更夠運算
i= 2+1; // 不能重新賦值
}else {
console.log(i); // 徹底就是不走。
}
}
});

let j = 0; // 在這裏申明變量的話，下面無論任何方法都是能夠從新賦值。
App({
onShow:function () {
j++; // 能夠從新賦值
if (j == 1){
console.log(j,'第一次小程序運行'); // 第一次小程序運行。
}else {
console.log(j,'你已經切換進入小程序了');
}
}
});

onHide 切換到手機桌面
App({
onHide:function () {
console.log('切換到手機桌面了');
}
});

onError 錯誤的腳本或者調用api（不支持）就會觸發。
App({
onError:function () {
console.log('程序出錯');
}
});

其餘（自定義的一些屬性方法）
全局app.json 配置
能夠配選項卡、頁面、設置入口頁面、設置窗口的顏色、字、狀態欄的顏色等等

{
"pages": [
"pages/index/index", // 建立index頁面
"pages/logs/index" // 建立logs頁面
],
"window": {
"navigationBarTitleText": "Demo", // 設置導航欄上面的標題。
"navigationBarBackgroundColor": "#000", // 導航欄的顏色
"navigationBarTextStyle" : "#fff",//導航欄標題顏色。
"backgroundColor":"#ffffff",// 窗口的顏色（下面有圖片，能夠說明）
"backgroundTextStyle":"light", // 下拉的圖標及顏色，可是官方只提供兩種，僅支持 dark/light
"enablePullDownRefresh": "ture", // 開啓下拉（必須得開啓，才能在頁面中使用onPullDownRefresh事件進行頁面下拉刷新）。
"onReachBottomDistance":"60" // 設置下拉刷新的距離。
},
// 建立選項卡，
"tabBar": {
"color": "#", // （必填）設置選項卡的顏色（只支持16位顏色值）。
"selectedColor": "", // （必填）選項卡上的文字選中時的顏色（只支持16位顏色值）
"backgroundColor": "", // （必填）選項卡的背景色（只支持16位顏色值）
"position":"top", // 可選，兩個值top和bottom。默認設置bottom在下面，若是設置爲top，圖標就會去掉。
"borderStyle":"white", //可選，只有兩個值black/white。將選項卡中的邊框顏色更改成，提供兩個值。
"list": [{ // （必填）必須至少2個，最多5個，都不能超過。list數組內必須得有兩個值。數組順序排序。
"pagePath": "pages/index/index", // 引入的頁面
"text": "首頁", // 選項卡的名字
"iconPath": "", // 設置icon圖標的路徑（icon不能40kb，建議尺寸81pxX81px），通過測試，不能請求網絡圖片，只能是本地。
"selectedIconPath": "image/location_selected.png" // 選中當前的圖標，通過測試，不能請求網絡圖片，只能是本地。
}, {
"pagePath": "pages/logs/logs", // 引入的頁面
"text": "日誌"
}]
},
// 設置各類網絡請求的超時時間,下面的都是默認爲：60000，都是可選參數
"networkTimeout": {
"request": 10000, // 設置wx.request請求的時間，單位毫秒。
"downloadFile": 10000, // 設置wx.downloadFile的超時時間，單位毫秒。
"connectSocket": 1000, // wx.connectSocket的超時時間，單位毫秒
"uploadFile": 6000// wx.uploadFile的超時時間，單位毫秒，
},
"debug": true // 開啓調試日誌
}

頁面page.json配置
優先級，先找到頁面的配置page.json，若是沒有找到，而後在外面配置的app.json中。

==好比,在index頁面中，必須得是index.json。下面的顏色值，不能寫出#000，必須寫全#000000==

 

{
"navigationBarBackgroundColor":"#26c398", // 當前導航欄背景顏色(必須得16進制的顏色值)，----不能寫出#000，必須寫全---
"navigationBarTextStyle":"#ffffff", // 當前導航欄標題顏色，僅支持 black/white
"navigationBarTitleText" : '我是當前頁面的標題' , // 當前頁面導航欄標題文字
"backgroundColor" : "#00ff00" , // 窗口的背景色
"backgroundTextStyle": "light", // 當前下拉背景字體、loading 圖的樣式，僅支持 dark/light
"enablePullDownRefresh": true, // 當前頁面下拉開啓（若是在全局的app.json中設置了，就能夠不用設置，若是）。
"disableScroll": false, // 默認false，若是是一個頁面，不能讓用戶上下滾動，設置爲 true 則頁面總體不能上下滾動；只在 page.json 中有效，沒法在 app.json 中設置該項
"onReachBottomDistance" : 120 // 當前頁面上拉觸底事件觸發時距頁面底部距離，單位爲px
}