1、有漁微信小程序系統(tǒng)概述三view 層及小程序框架概述小程序的 view 層MVC 模式這里就不講了，不懂 MVC 模式的就自己去查閱相關(guān)資料。小程序的的 view 層由 WXML與 WXSS 編寫，由組件來進(jìn)行展示。view 層將邏輯層的數(shù)據(jù)反應(yīng)成界面顯示，同時將界面發(fā)生的發(fā)送給邏輯層。 WXML(WeiXin Markup language)用于描述頁面的結(jié)構(gòu)，可以想象成 Html 文件。 WXSS(WeiXtyle Sheet)用于描述頁面的樣式，可以想象成 Css 文件。 組件(Component)是視圖的基本組成單元，可以想象成 Html 中的組件。 下面我們用簡單的例子來看看 WXM

2、L 具有什么能力： 1、測試環(huán)境準(zhǔn)備 pages 目錄里建立 viewtest 目錄，丏門用來做 view 層測試。 index 里添加觸發(fā) viewtest 的相關(guān)代碼 index.wxml 修改成： index.js 添加下面的代碼： bindUserTap: function() wx.navigateTo( url: ./viewtest/viewtest ) , app.json 把 viewtest 路徑加入 pages 參數(shù)里： pages: pages/index/index, pages/logs/logs, pages/viewtest/viewtest , 2、例子 數(shù)據(jù)

3、綁定 message / viewtest.js Page( data: message: Hello MINA! ) 列表渲染 item / viewtest.js Page( data: array: 1, 2, 3, 4, 5 ) 條件渲染 WEBVIEW APP MINA / viewtest.js Page( data: view: MINA ) 模板 FirstName: firstName, LastName: lastName / viewtest.js Page( data: staffA: firstName: Hulk, lastName: Hu, staffB: fir

4、stName: Shang, lastName: You, staffC: firstName: Gideon, lastName: Lin ) count / viewtest.js Page( data: count: 1 , add: function(e) this.setData( count: this.data.count + 1 ) ) 小程序框架概述 1、目錄結(jié)構(gòu) 先來看下例子 HelloWorld 的目錄結(jié)構(gòu)。 這里，app 是小程序的入口，pages 是小程序的頁面。比如 index 是小程序的首頁，logs 是小程序的日志頁。utils 是小程序的工具庫。 小程序主體部

5、分由 3 個文件組成，必須放在項目的根目錄，如下： 文件 必填 作用 app.js 是 小程序邏輯 小程序的頁面由 4 個文件組成，如下： 2、配置 小程序使用 app.json 文件來對進(jìn)行全局配置，設(shè)定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。 每一個頁面也可以使用.json 文件來對本頁面的窗口表現(xiàn)進(jìn)行配置。頁面的配置比 app.json 全局配置簡單得多，只能設(shè)置window 配置項的內(nèi)容，頁面中配置項會覆蓋app.json 的window 中相同的配置項 文件 必填 作用 js 是 頁面邏輯 wxml 是 頁面結(jié)構(gòu) json 否 頁面公共設(shè)置 wxss 否 頁面樣式 app.json 是 小程序公共設(shè)置 app.wxss 否 小程序樣式 3、邏輯層 APP Service 小程序開發(fā)框架的邏輯層是由 JavaScript 編寫，也就是小程序中的 js 文件。邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時接受視圖層的反饋。 4、視圖層 view 視圖層由 WXML 與 WXSS 編寫，由組件來進(jìn)行展示，也就是小程序中的 wxml、wxss 文件。它將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時將視圖層的發(fā)送給邏輯層。 其中： WXML(WeiXin Markup language)用于描述頁面的結(jié)構(gòu)。 W