一、微信小程序中的四種類型的文件
js-------javascript文件
json-------項目配置文件,負責窗口顏色等等
wxml--------類似HTML文件
wxss--------類似CSS文件
在根目錄下用app來命名的這四種類型的文件,就是程序入口文件
app.json
必須要有這個文件,如果沒有這個文件,IDE會報錯,因為微信框架把這個做為配置文件入口,你只需要創建這個文件,里面寫個大括號就行,以后我們會在這里進行整個對象的全局配置
記錄了頁面組成,配置了小程序的窗口 背景色,配置導航條樣式,配置默認標題
app.js
必須要有這個文件,沒有也會報錯。但是這個文件創建一下就行,什么都不需要寫,以后我們可以在這個文件中監聽並處理小程序的生命周期函數,聲明全局變量
app.wxss
這個文件不是必須的。它是全局css樣式文件
app.wxml
這個文件也不是必須的,而且這個並不是主界面,小程序的主頁面是靠在JSON文件中配置來決定的
二、小程序的生命周期
1、小程序分為應用和頁面兩個部分,小程序的應用周期涉及到三個部分,分別是:應用的生命周期,頁面的生命周期,應用的生命周期對頁面生命周期的影響
2、應用的生命周期
App()函數用來注冊一個小程序,接受一個object參數,其指定小程序的生命周期函數等
app.js管理整個文件的生命周期,在里面添加代碼

注:前、后台定義:當用戶點擊左上角關閉,或者按了Home鍵離開微信,小程序並沒有直接銷毀,而是進入了后台,當再次進入微信或再次打開小程序,又會從后台進入前台。只有當小程序進入后台一定時間,或者系統資源占用過高,才會被真正銷毀

用戶首次打開小程序,觸發onLunch(全局只觸發一次)
小程序初始化完成后,觸發onShow方法,監聽小程序顯示
小程序從前台進入后台,觸發onHide方法
小程序從后台進入前台顯示,觸發onShow方法
小程序后台運行一定時間,或系統資源占用過高,會被銷毀
3、頁面的生命周期
Page()函數用來注冊一個頁面。接受一個object參數,其指定頁面的初始數據,生命周期函數,事件處理函數等。

小程序注冊完成后加載頁面,觸發onLoad方法
頁面載入后觸發onShow方法,顯示頁面
首次顯示頁面會觸發onReady方法,渲染元素頁面和樣式
當小程序后台運行或跳轉到其他頁面時,觸發onHide方法
當小程序由后台進入到前台運行,或者重新進入頁面時,觸發onShow方法
當使用重定向方法wx.redirectTo(OBJECT),或關閉當前頁返回上一頁時wx.navigateBack(),觸發onUnload方法
總結:onLoad頁面加載,一個頁面只會調用一次;onShow頁面顯示,每次打開頁面都會調用一次;onReady頁面初次渲染完成,一個頁面只會調用一次,代表頁面已經准備妥當,可以和視圖層進行交互;onHide頁面隱藏

由上圖可知:小程序由兩大線程組成:負責界面的視圖線程(view thread)和負責數據、服務處理的服務線程,兩者協同工作,完成小程序頁面生命周期的調用
視圖線程的四大狀態:
初始化狀態:初始化視圖線程所需要的工作,初始化完成后向“服務線程”發送初始化完成信號,然后進入等待狀態,等待服務線程提供初始化數據
首次渲染狀態:當收到服務線程提供的初始化數據后(json和js中的data數據),渲染小程序界面,渲染完畢后,發送“首次渲染完成信號”給服務線程,並將頁面展示給用戶
持續渲染狀態:此時界面線程繼續一直等待“服務線程”通過this.setdata()函數發送來的界面數據,只要收到就重新布局渲染,也因此只要更新數據並發送信號,界面就自動更新
結束狀態:頁面被回收或者銷毀、應用被系統回收、銷毀時觸發
服務線程的五大狀態:
初始化狀態:此階段僅啟動服務線程所需的基本的功能,系統的初始化工作完畢,就調用自定義的onLoad和onShow,然后等待視圖線程的“視圖線程初始化完成”號。onLoad是只會首次渲染的時候執行一次,onShow是每次界面切換都會執行
等待激活狀態:接收到視圖線程的“視圖線程初始化完成”信號后,將初始化數據發送給“視圖線程”,等待試圖線程完成初次渲染
激活狀態:收到視圖線程發送來的“首次渲染完成”信號后,就進入激活狀態既程序的正常運行狀態,並調用自定義的onReady()函數,此狀態下就可以通過this.setData()函數發送界面數據給界面線程進行局部渲染,更新頁面
后台運行狀態:如果界面進入后台,服務線程就進入后台運行狀態
結束狀態:頁面被回收或者銷毀、應用被系統回收、銷毀時觸發
3、應用的生命周期對頁面的生命周期的影響

三、事件機制
我們先來看一下小程序的官方文檔對事件的定義:
事件是視圖層到邏輯層的通信方式
事件可以將用戶的行為反饋到邏輯層進行處理
時間可以綁定到組件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函數
事件對象可以攜帶額外信息
可以看出官方文檔主要將事件用於小程序中針對用戶交互行為的處理,即視圖層到邏輯層的通信,邏輯層收到這些用戶行為事件后,可以進行業務處理,然后根據情況反饋或不反饋給用戶
總體上來說,小程序的事件機制在工作原理上來講和HTML DOM的事件機制是一樣的,在html中,我們可以通過在html元素上設置如onclick=“clickHandler(event)”的屬性來綁定用戶的頁面點擊事件處理函數,而在WXML中,我們為一個組件綁定一個事件處理函數
四、視圖層
1、wxml是框架設計的一套標簽語言,可以構建出頁面的結構
wxml中的動態數據均來自對應Page的data
數據綁定

列表渲染

條件渲染
模板
定義模板:使用name屬性作為模板的名字
