首先明白一點(diǎn)，小程序基本開發(fā)基于MVC，即模型，視圖，控制器，模型層在這里表現(xiàn)的不是很明顯，大部分時(shí)候都以全局變量（或頁(yè)面局部變量）的形式存在，一般存在與控制器中。視圖在此為.wxml文件所表示的，它將控制器得到的數(shù)據(jù)和wxml文件進(jìn)行組合，渲染。而視圖與控制器的交互可通過(guò)綁定事件的形式觸發(fā)控制器各個(gè)函數(shù)的執(zhí)行，大部分事件會(huì)傳遞目標(biāo)節(jié)點(diǎn)對(duì)象作為參數(shù)。數(shù)據(jù)交互可通過(guò)能傳遞值的組件或響應(yīng)綁定事件來(lái)解決。下面分部分介紹開發(fā)方法。

　　新建項(xiàng)目，首先會(huì)建立小程序主控制邏輯與配置文件，其中包括app.js(控制小程序邏輯，響應(yīng)生命周期回掉函數(shù)操作，全局變量的定義等),app.json(小程序窗口，特性配置等，像下拉刷新，導(dǎo)航欄配置，tabBar等。),app.wxss(樣式配置)。

　　app.json文件配置：

　　遵循json文件格式規(guī)范，通過(guò)配置此文件可以設(shè)置小程序的特性。文件如下圖：

 

 

　　pages（數(shù)組）：用于配置小程序頁(yè)面文件，添加新的頁(yè)面，必需配置此屬性。window：用于配置小程序窗口特性，包括背景顏色，風(fēng)格，導(dǎo)航欄，是否啟用下拉刷新等。

　　window屬性中可通過(guò)tabs配置tabBar，如下示例：

 

 

　　各個(gè)屬性含義如下：

 

　　App.js文件說(shuō)明：

　　此文件用于注冊(cè)小程序，使用方法App()，接收object參數(shù)，初始化小程序，如下圖：

 

 

　　其中onLaunch，onShow，onHide用于響應(yīng)生命周期回掉，也可自定義全局變量及方法。

　　object參數(shù)說(shuō)明：

　　前臺(tái)、后臺(tái)定義：當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備Home鍵離開微信，小程序并沒有直接銷毀，而是進(jìn)入了后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。

　　只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過(guò)高，才會(huì)被真正的銷毀。

　　注冊(cè)頁(yè)面

　　如果說(shuō)上面的只是對(duì)整個(gè)小程序的配置注冊(cè)，這里的具體的頁(yè)面操作才是和用戶交互的真正載體，每個(gè)頁(yè)面都可單獨(dú)存放一個(gè)文件夾，方便管理，同時(shí)WAService會(huì)將此文件夾中的頁(yè)面樣式文件進(jìn)行渲染。每個(gè)頁(yè)面都由js文件進(jìn)行控制，wxml進(jìn)行布局，wxss就是樣式設(shè)置了。用于響應(yīng)生命周期方法有onLoad(監(jiān)聽頁(yè)面加載)，onReady(監(jiān)聽頁(yè)面初次渲染完成)，onShow(監(jiān)聽頁(yè)面顯示)，onHide(監(jiān)聽頁(yè)面隱藏)，onUnload(監(jiān)聽頁(yè)面卸載)，示例如下：

 

 

　　其中data為頁(yè)面初始數(shù)據(jù)，也是視圖綁定數(shù)據(jù)的來(lái)源，視圖中的變量都會(huì)從data的值中找到相對(duì)應(yīng)的進(jìn)行替換。程序中可通過(guò)this.data訪問(wèn)到data中的值，但不直接設(shè)置，因?yàn)樾枰ㄖ乱晥D中的數(shù)據(jù)，如自行直接設(shè)置，則視圖數(shù)據(jù)與此設(shè)置過(guò)的數(shù)據(jù)就不一致了，這里可以通過(guò)this.setData()方法進(jìn)行設(shè)置，接受object對(duì)象。還有一個(gè)方法onPullDownRefreash，用于監(jiān)聽頁(yè)面的下拉刷新操作，可用于更新數(shù)據(jù)，wx.stopPullDownRefresh()停止刷新動(dòng)畫。

　　視圖層

　　即wxml文件的相關(guān)操作，WXML（WeiXinMarkupLanguage）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，與html/xml有極大相似性。

微信小程序

• 2020-11-11一篇文章讓你看懂哪些領(lǐng)域適合開發(fā)微信小程序
• 2020-11-09微信小程序開發(fā)用什么語(yǔ)言？
• 2020-11-11在廣州佛山順德微信小程序開發(fā)對(duì)企業(yè)的好處有哪些？
• 2020-11-09微信小程序?yàn)槭裁词瞧髽I(yè)必須要開發(fā)的？
• 2020-11-11微信小程序開發(fā)要注意哪些方面
• 2020-11-11如何注冊(cè)微信小程序 有哪些注意事項(xiàng)
• 2020-11-09微信小程序開發(fā)
• 2020-11-09全面的微信小程序開發(fā)設(shè)計(jì)指南
• 2020-11-11微信小程序新能力：附近的小程序、成員管理功能升級(jí)
• 2020-11-11更多企業(yè)選擇開發(fā)微信小程序原因
• 2020-11-11微信小程序開發(fā)適合哪些行業(yè)？
• 2020-11-11微信小程序分享等能力升級(jí)：可自定義分享配圖