項(xiàng)目文件
-
app.js 小程序的腳本代碼薄货，監(jiān)聽處理小程序的生命周期函數(shù)懈玻、申明全局變量、調(diào)用框架提供的API等等
- App();函數(shù)注冊一個(gè)小程序
- onLaunch();程序初始化完成時(shí)觸發(fā)锋拖，全局指觸發(fā)一次
- onShow(options);啟動(dòng)或從后臺(tái)進(jìn)入前臺(tái)顯示時(shí)觸發(fā)
- onHide();從前臺(tái)進(jìn)入后臺(tái)會(huì)觸發(fā)
- onError(msg);腳本錯(cuò)誤或API調(diào)用失敗會(huì)觸發(fā)焊切，并帶上錯(cuò)誤信息
- getUserInfo(){};獲取用戶信息，需要先調(diào)用wx.login();
- wx.login({});調(diào)用微信登錄接口躏筏，獲取登錄憑證(code)板丽，進(jìn)而獲取用戶登錄信息，包括用戶的唯一標(biāo)識(shí)(openid)趁尼，及本次登錄的會(huì)話密鑰(session_key)埃碱。用戶數(shù)據(jù)的加解密通訊需要密鑰來完成。
-
app.json 搜對(duì)整個(gè)小程序的全局配置：配置小程序是由哪些頁面組成酥泞，配置小程序的窗口背景色砚殿，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題芝囤。
- ”pages”: [],配置頁面路由
- “window”:{}設(shè)置默認(rèn)頁面的窗口表現(xiàn)
app.wxss 是整個(gè)小程序的公共樣式表我們可以在頁面組件的class上直接使用app.wxss中申明的樣式規(guī)則
-
創(chuàng)建頁面
- *.js 文件 ：腳本文件 — 在這個(gè)文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)瓮具、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù)凡人，響應(yīng)頁面交互事件等。
- *.json 文件 ：配置文件 — 頁面的配置文件是非必要的叹阔。當(dāng)有頁面的配置文件時(shí)挠轴，配置項(xiàng)在該頁面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。如果沒有指定的頁面配置文件耳幢，則在該頁面直接使用 app.json 中的默認(rèn)配置岸晦。
- *.wxss 文件 ：頁面樣式文件
- *.wxml 文件 ：頁面結(jié)構(gòu)文件
文件結(jié)構(gòu)
-
配置：
-
app.json
1. ”pages”: [] 設(shè)置頁面路徑 2. “window”: { //設(shè)置默認(rèn)窗口的表現(xiàn)(顏色都是十六進(jìn)制的) “navigationBarBackgroundColor”: #000, //導(dǎo)航欄背景顏色 “navigationBarTextStyle”: white/black, //導(dǎo)航欄標(biāo)題顏色，僅支持black/white “navigationBarTitleText”: string, //導(dǎo)航欄標(biāo)題 “backgroundColor”: #fff, //窗口的背景顏色 “backgroundTextStyle”: dark, //下拉背景字體睛藻、loading 圖的樣式启上，僅支持 dark/light “enablePullDownRefresh”: boolean //是否開啟下拉刷新,詳見頁面相關(guān)事件處理函數(shù)。 } 3. “tabBar”: { //設(shè)置底部的tab “color”: #ddd, //tab上文字的默認(rèn)顏色 “selectedColor”: #333, //選中tab時(shí)的顏色 “backgroundColor” #ccc, //tab背景顏色 “borderStyle”: black/white, //tabBar上邊框的顏色店印，僅支持black/white “l(fā)ist”: [ //tab 的列表 { “pagePath”: ‘../..’, //pages中定義的頁面路徑 “text”: string, //tab上的按鈕文字 “iconPath”: ‘../..’, //圖片路徑冈在，icon 大小限制為40kb，建議尺寸為 81px * 81px按摘，當(dāng) postion 為 top 時(shí)包券，此參數(shù)無效 “selectedIconPath”: ‘../..’ //選中時(shí)的圖片路徑，icon 大小限制為40kb炫贤，建議尺寸為 81px * 81px 溅固，當(dāng) postion 為 top 時(shí)，此參數(shù)無效 } ], “position”: top/bottom // } 4. “networkTime”: { //網(wǎng)絡(luò)超時(shí)時(shí)間 “request”: 10 000, //wx.request 的請求超時(shí)時(shí)間兰珍，默認(rèn)60 000(下面都是) “connectSocket”: 10 000, //wx.connectSocket的超時(shí)時(shí)間 “uploadFile”: 10 000, //wx.uploadFile的超時(shí)時(shí)間 “downloadFile”: 10 000, //wx.downloadFile的超時(shí)時(shí)間 } 5. “debug”: boolean 是否開啟debug模式
page.json :頁面的.json只能設(shè)置 window 相關(guān)的配置項(xiàng)侍郭，以決定本頁面的窗口表現(xiàn)，所以無需寫 window 這個(gè)鍵
-
屬性如下：
{ “navigationBarBackgroundColor”: #000, “navigationBarTextStyle”: black/white, “navigationBarTitleText”: string, “backgroundColor”: #ddd, “backgroundTextStyle”: dark/light, “enablePullDownRefresh”: boolean, “disableScroll”: boolean //設(shè)置為 true 則頁面整體不能上下滾動(dòng)；只在 page.json 中有效亮元，無法在 app.json 中設(shè)置該項(xiàng)(默認(rèn) false ) }
-
邏輯層
注冊程序：App(options);
App() 函數(shù)用來注冊一個(gè)小程序猛计。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等苹粟。
options = {
onLaunch: function(){}, //生命周期函數(shù)--監(jiān)聽小程序初始化(只會(huì)觸發(fā)一次)
onShow: function(){}, //生命周期函數(shù)--監(jiān)聽小程序顯示(每次顯示小程序都會(huì)觸發(fā))
onHide: function(){}, //生命周期函數(shù)--監(jiān)聽小程序隱藏(每次小程序從前臺(tái)進(jìn)入后臺(tái)都會(huì)觸發(fā))
onError: function(msg){}, //當(dāng)小程序發(fā)生腳本錯(cuò)誤有滑，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
userFun:function(){} //用戶自定義函數(shù)
}
問題：
- onLaunch 和 onShow 的參數(shù)
- path: string 打開小程序的路徑
- query： {} 打開小程序的query
- scene: number 打開小程序的場景值
- shareTicket: string ???
- getApp()函數(shù)：獲取小程序?qū)嵗?/li>
- console.log(getApp().globalData);
- App()必須在app.js中注冊嵌削，并且不能注冊多個(gè)
- 不要再App()內(nèi)部使用getApp(),用this即可
- 不要再onLaunch時(shí)調(diào)用getCurrentPage(),此時(shí)page還沒有生成
- 通過getApp()獲取實(shí)例后毛好，不要隨意調(diào)用生命周期函數(shù) ？苛秕？肌访？？艇劫？吼驶？
注冊頁面
Page(options) 函數(shù)用來注冊一個(gè)頁面。接受一個(gè) object 參數(shù)店煞，其指定頁面的初始數(shù)據(jù)蟹演、生命周期函數(shù)、事件處理函數(shù)等顷蟀。
options = {
data: {}, // 頁面的初始數(shù)據(jù)
onLoad: function(){},
onReady: function(){}, //生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
onShow: function(){},
onHide: function(){},
onUnload: function(){}, //生命周期函數(shù)--監(jiān)聽頁面卸載 當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用酒请。
onPullDownRefresh: function(){}, //頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
onReachButton： function(){}, //頁面上拉觸底事件的處理函數(shù)
onShareAppMessage: function(){}, //用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)
route: string, //當(dāng)前頁面的路徑
userFun:function(){}
}
更改data中的數(shù)據(jù)需要用到this.setData(key: value);方法，否則不會(huì)生效
頁面路由
-
頁面棧：
1. 頁面棧以棧（先進(jìn)后出）的形式維護(hù)頁面與頁面之間的關(guān)系鸣个； 2. 小程序提供了getCurrentPages()函數(shù)獲取頁面棧羞反，第一個(gè)元素為首頁，最后一個(gè)元素為當(dāng)前頁面囤萤。 3. 使用wx.navigateTo每新開一個(gè)頁面昼窗，頁面棧大小加1,直到頁面棧大小為5為止； 4. 使用wx.navigateTo重復(fù)打開界面,頁面棧大小加1,直到頁面棧大小為5為止涛舍； 5. 使用wx.redirectTo重定向,當(dāng)前頁面被替換澄惊，頁面棧不變，如果新頁面之前打開過做盅，則得到的是兩個(gè)狀態(tài)獨(dú)立的同一頁面 6. 使用wx.navigateBack返回缤削，當(dāng)delta為1，等同于左上返回按鈕吹榴，頁面棧減一亭敢；當(dāng)delta為2，關(guān)閉依次五級(jí)頁面和四級(jí)頁面图筹，當(dāng)前頁面為三級(jí)頁面帅刀，頁面棧大小減2让腹；以此類推，直到棧底為止扣溺，也就是首頁骇窍。 -
哪些情況會(huì)觸發(fā)頁面跳轉(zhuǎn)
小程序啟動(dòng)，初始化第一個(gè)頁面
-
打開新頁面锥余，調(diào)用 API wx.navigateTo 或使用組件
wx.navigateTo({ //目的頁面地址腹纳，原頁面保留 url: 'pages/logs/index', success: function(res){}, ... }) -
頁面重定向，調(diào)用 API wx.redirectTo 或使用組件
wx.redirectTo({ //目的頁面地址驱犹，原頁面被關(guān)閉嘲恍，不可返回 url: 'pages/logs/index', success: function(res){}, ... })<navigator url="pages/logs/index" hover-class="navigator-hover">跳轉(zhuǎn)</navigator> // 當(dāng)該組件添加redirect屬性時(shí)，等同于wx.redirectTo接口雄驹；默認(rèn)redirect屬性為false佃牛，等同于wx.navigateTo接口。 -
頁面返回医舆，調(diào)用 API wx.navigateBack或用戶按左上角返回按鈕
wx.navigateBack({ delta: 1 }) // delta為1時(shí)表示返回上一頁俘侠，為2時(shí)表示上上一頁，以此類推蔬将；如果dalta大于已打開的頁面總數(shù)爷速，則返回到首頁。返回后霞怀，元界面會(huì)銷毀遍希。 tarbar切換 頁面全部出棧，只留下新的 Tab 頁面
重加載 頁面全部出棧里烦，只留下新的 Tab 頁面
-
如何正確使用頁面跳轉(zhuǎn): 官方規(guī)定小程序最多只能有五個(gè)頁面同時(shí)存在，意思是在不關(guān)閉頁面的情況禁谦，最多新開五個(gè)頁面胁黑，頁面深度為5。
- 對(duì)于可逆操作州泊，使用wx.navigateTo,比如從首頁跳轉(zhuǎn)到二級(jí)頁面丧蘸，從二級(jí)頁面返回是不需要重新渲染首頁
- 對(duì)于不可逆操作，使用wx.redirectTo,比如用戶登錄成功后遥皂，關(guān)閉登錄頁面力喷，不能返回到登錄界面。
- 對(duì)于一些介紹性等不常用頁面wx.redirectTo或wx.navigatrBack
- 對(duì)于類似九宮格演训、列表項(xiàng)弟孟，使用
- 不要在首頁使用wx.redirectTo，這樣會(huì)導(dǎo)致應(yīng)用無法返回首頁
- 簡化需求样悟、簡化流程拂募；核心功能在兩三個(gè)頁面完成便是張小龍追求『小而美』的體現(xiàn)
getCurrentPages()： 用于獲取當(dāng)前頁面棧的實(shí)例庭猩，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁陈症，最后一個(gè)元素為當(dāng)前頁面蔼水。
-
注意：
1. navigateTo, redirectTo 只能打開非 tabBar 頁面。 2. switchTab 只能打開 tabBar 頁面录肯。 3. reLaunch 可以打開任意頁面趴腋。 4. 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面论咏，底部都有 tabBar优炬。 5. 調(diào)用頁面路由帶的參數(shù)可以在目標(biāo)頁面的onLoad中獲取。 -
模塊化
-
文件作用域
- 在js文件中申明的函數(shù)只在該文件中有效潘靖，
- 通過全局的getApp()函數(shù)可以獲得全局的應(yīng)用實(shí)例：
//app.js App({ globalData: 1 }) // index.js var app = getApp(); app.globalData ++; // logs.js console.log(getApp().globalData); -
模塊化
- 我們可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的 js 文件穿剖，作為一個(gè)模塊。模塊只有通過 module.exports 或者 exports(不推薦使用) 才能對(duì)外暴露接口卦溢。
- 小程序目前不支持直接引入 node_modules , 開發(fā)者需要使用到 node_modules 時(shí)候建議拷貝出相關(guān)的代碼到小程序的目錄中糊余。
- 在需要使用這些模塊的文件中，使用 require(path) 將公共代碼引入
// common.js function sayHello(name){ console.log(\`hello ${name} !\`) } function sayBye(name){ console.log(\`Goodbye ${name} !\`) } module.exports.sayHello = sayHello; exports.sayBye = sayBye; // index.js中調(diào)用 var comm = require(../common.js); Page({ helloJack:function(){ comm.sayHello("Jack"); }, goodByeRose: function(){ comm.sayBye("Rose"); } })
