[微信小程序之小白教程系列] 微信小程序 -- 入口

做爲一名後端開發人員，我但願能從後端語言的某些模式來理解小程序，讓我快速的入門。

今天咱們依然模擬一個女項目經理和後端工程師的博弈，爲你逐步展開小程序的面紗。

角色定位

• 女一號 大櫻桃：女項目經理，30歲，未婚。
• 男一號 老沙：帥氣的後端工程師，30歲，已婚。

App

當聽到大櫻桃這樣說本身的時候，老沙明白的確是本身的問題，小程序工具爲咱們生成了一個基礎的框架，可是這個框架裏的文件都是作什麼用，每一個文件如何去操做他並不知道，這的確是一個問題。

因而老沙決定用30分鐘的時候先研究下其中的 app.js / app.json / app.wxss / project.config.json

app.js

從微信小程序官方文檔咱們知道：「小程序包含一個描述總體程序的 app 和多個描述各自頁面的 page。」，而app的構建、維護以及配置就是由上面4個文件管理的。

@@nai8@@

當咱們打開一個小程序的時候，伴隨着生成一個小程序的實例，這個很像yii中入口對application的生成邏輯。

同時提供了一個叫作App()的函數用來接收小程序實例完成最後的註冊，這個函數存在於app.js中，而所謂的註冊，裏面能夠包含咱們本身的邏輯，好比啓動後你想作什麼？遇到錯誤你想作什麼，這些均可以在註冊小程序的時候實現。

打開你的app.js，你發現有4+個函數，4個內置函數和你能夠本身定義的N個函數。

名詞解釋

• onLanuch 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
• onShow 當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
• onHide 當小程序從前臺進入後臺，會觸發 onHide
• onError 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息

這裏有一個疑問我想你們也會遇到，就是先後臺的概念，簡單的說就是當你在左上角關閉小程序後（或按home鍵退出微信），這個小程序並不會真正的銷燬而是進入後臺模式運行，當再次打開進入前臺運行而非從新啓動。

最明顯的一個現象就是你在小程序某個特定頁面關閉小程序，再次打開會直接進入這個特定頁面而非啓動頁。

globalData
這個字段也頗有用。用來存放一些全局的東西，好比統一的遠程接口地址等，這裏設置的值是有辦法在其餘page頁面使用的。

好比某個小程序的globalData以下圖

N個函數

咱們都知道除了內置的函數，咱們也能夠在app.js裏寫其餘函數，那麼問題來了？什麼函數要寫到app.js裏那？

回答這個問題以前咱們要先知道一個事情，那就是在小程序的其餘頁面能夠經過getApp函數獲取到app對象，進而能夠調用app.js裏的東西，也就是說你在app.js裏定義的那些N個函數能夠被其餘頁面獲取並使用。

這樣你明白了吧？好比登陸函數、獲取用戶信息、彈出框等用於整個app的高頻函數均可以寫到app.js中。

研究到此，老沙欣慰的一笑，先來杯咖啡。

onLaunch

接下來老沙決定研究一下onLaunch函數，首先要說的是onLaunch的參數options裏都有什麼？很簡單，在onLaunch函數內寫下了console.log(options)將它打印到控制檯。

在從此的日子裏，若是你不清楚一個對象或參數什麼的，記住使用console.log打印到控制檯，很方便。

固然，onLaunch能夠獲取不少參數，好比path表明打開小程序的路徑，當你分享小程序某個頁面A到微信羣，別人經過A打開了小程序，則path就是A頁面的路徑。

關於參數的詳細介紹能夠看下圖

path、query、scene是常規的參數，在特定狀況下會出現其餘參數，好比當你要捕獲羣分享後的數據時shareTicket參數會出現等等。

通常來講當一個小程序啓動後就須要作的事情能夠寫到onLaunch函數，好比登陸。

而onShow接收的參數和onLanuch是一致的。

注意點

官方給了一些注意點，基本就是全部了，列下方便你們學習。

• App() 必須在 app.js 中註冊，且不能註冊多個。
• 不要在定義於 App() 內的函數中調用 getApp() ，使用 this 就能夠拿到 app 實例。
• 不要在 onLaunch 的時候調用 getCurrentPages()，此時 page 尚未生成。
• 經過 getApp() 獲取實例以後，不要私自調用生命週期函數。

對於上面的getApp你可能還不瞭解，接下來研究下。

getApp

這是一個函數，主要目的是在其餘頁面獲取app實例，好比接下來的代碼

獲取後你就能夠在頁面函數體內直接調用app.js的函數和數據，好比app.xxx()或app.globalData這樣。

這裏要重複下上面的注意事項：不要在定義於 App() 內的函數中調用 getApp()

app.json

一頓研究後，老沙對app.js已經基本瞭解，接下來攻克app.json這個文件。微信官方是這樣說的：「app.json文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。」

接下來用老百姓的話爲你們解釋下：

• 將頁面註冊到小程序如何配置？找app.json
• 如何設置導航欄顏色？找app.json
• 如何制定窗口背景顏色？找app.json
• 如何啓動下拉功能？找app.json
• 如何設置小程序底部tab切換頁面？找app.json
• 如何設置網絡超時時間？找app.json

一句話，和小程序自身相關的配置，去app.json裏找。

關於app.json裏的詳細配合能夠參考官方地址 https://mp.weixin.qq.com/debu...

app.wxss

最好理解的就是它了，上篇你們已經知道wxss是樣式文件，app.wxss則是小程序的全局樣式，它能夠應用到全部page頁面。

wxss是微信小程序本身定義的樣式語言，它支持內聯、導入等等。同時具備css大部分的特性，因此你能夠像寫css同樣寫它們。

關於使用方法能夠參考 https://mp.weixin.qq.com/debu...

project.config.json

這是一個項目配置文件，好比項目的名字，appid等等。

若是你還不懂，能夠看下開發工具的詳情，那裏面的設置和project.config.json是同樣的，一個配置文件，一個可視化的，目的是同樣的。

小結

30分鐘過去了，老沙基本搞明白了入口的邏輯，趕忙給大櫻桃看看去。

.......

10分鐘過去了

.......

老沙低着腦殼回來了，爲什麼？下回給你說。