2019-12-18
10:35:27
邏輯層初步介紹
除了視圖層(即我們所看到的頁面),小程序邏輯層各部分的功能如下:
-
index.js 邏輯代碼
-
index.json 頁面配置文件
-
index.wxml 頁面結構
-
index.wxss 表示index.wxml結構的樣式
app.js app.json app wxss的作用與index是類似的,但它們作用於全局
在后續的課程中我們將對邏輯層進行更深入的講解。
小程序框架及文件目錄介紹
小程序框架介紹
小程序框架的核心是一個響應的數據綁定系統。整個系統分為兩塊,視圖層和邏輯層。
視圖層 (view)
-
內容展示
-
文本樣式
視圖層由WXML與WXSS編寫。
將邏輯層的數據反應成視圖,同時將視圖層的事件發送給邏輯層。
WXML(WeiXin Markup language)用於描述頁面的結構。
WXSS(WeiXin Style Sheet)用於描述頁面的樣式。
組件(Component)是視圖的基本組成單元。
邏輯層(app service)
-
業務邏輯
-
數據處理
小程序開發框架的邏輯層是由JavaScript編寫。
邏輯層將數據進行處理后發送給視圖層,同時接受視圖層的事件反饋。
每個頁面有獨立的作用域,並提供模塊化能力。
小程序文件介紹
小程序文件包含一個描述整體程序的app和多個描述各自頁面的page.
頁面
一個頁面由四個文件組成,如下所示:
-
index(默認)
小程序注冊及配置
-
入口文件
-
配置文件
-
全局樣式
app.js文件,用來定義小程序的全局數據和函數,控制、監聽小程序的全生命周期。在這里可以見到的全局函數有onlaunch(監聽小程序初始化),onshow(監聽小程序顯示),onhide(監聽小程序隱藏)等。app.js中還可以定義一些全局變量,其他頁面引用app.js文件后就可以直接使用這個文件中的函數和變量。
app.json是配置文件,可以配置以下信息:頁面路徑,窗口信息,標簽導航,網絡超時等。
app.wxss,類似於css,用於配置各種樣式
project.config.json用於保存配置信息。
sitemap.json用於控制小程序是否能夠被搜索到。
小程序的執行流程
小程序注冊及配置
-
注冊應用 app.js
-
全局配置 app.json
-
設置樣式 app.wxss
-
工具配置 project.config.json
頁面渲染執行 - app.json
-
主頁面(index)
-
從頁面(index2)
-
日志信息(logs)
json文件介紹
特點
-
輕量級的數據交換格式
-
直觀理解
-
便於修改
結構
-
文件數據被包裹在一個大括號中 {}
-
通過鍵值對(key-value)的方式來表達數據