微信小程序開發 小程序框架及文件目錄介紹


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編寫。 
邏輯層將數據進行處理后發送給視圖層,同時接受視圖層的事件反饋。 
每個頁面有獨立的作用域,並提供模塊化能力。

Alt text

小程序文件介紹

小程序文件包含一個描述整體程序的app和多個描述各自頁面的page.

頁面

一個頁面由四個文件組成,如下所示:

  • index(默認) 
    Alt text

小程序注冊及配置
  • 入口文件

  • 配置文件

  • 全局樣式 
    Alt text

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)的方式來表達數據


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM