小程序入門到精通(二):瞭解小程序開發4個重要文件

image.png

1. 小程序沒有DOM對象,一切基於組件化

2. 小程序的四個重要的文件

  • *.js —> view邏輯 —> javascript
  • *.wxml —> view結構 ----> html
  • *.wxss —> view樣式 -----> css
  • *. json ----> view 數據 -----> json文件

注意:爲了方便開發者減少配置項,描述頁面的四個文件必須具有相同的路徑與文件名。

2.1 WXML

WXML(WeiXin Markup Language)是框架設計的一套標籤語言,結合基礎組件事件系統,可以構建出頁面的結構。WXML 充當的就是類似 HTML 的角色
要完整了解 WXML 語法,請參考WXML 語法參考

2.2 WXSS

WXSS (WeiXin Style Sheets)是一套樣式語言,用於描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應該怎麼顯示。
爲了適應廣大的前端開發者,WXSS 具有 CSS 大部分特性。同時爲了更適合開發微信小程序,WXSS 對 CSS 進行了擴充以及修改。
與 CSS 相比,WXSS 擴展的特性有:

  • 尺寸單位
  • 樣式導入

2.3 json

JSON 是一種數據格式,並不是編程語言,在小程序中,JSON扮演的靜態配置的角色。

  1. 全局配置

小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置,決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

  1. 頁面配置

每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現進行配置,頁面中配置項會覆蓋 app.jsonwindow 中相同的配置項。

  1. 工具配置 project.config.json

通常大家在使用一個工具的時候,都會針對各自喜好做一些個性化配置,例如界面顏色、編譯配置等等,當你換了另外一臺電腦重新安裝工具的時候,你還要重新配置。
考慮到這點,小程序開發者工具在每個項目的根目錄都會生成一個 project.config.json,你在工具上做的任何配置都會寫入到這個文件,當你重新安裝工具或者換電腦工作時,你只要載入同一個項目的代碼包,開發者工具就自動
注意:
JSON文件都是被包裹在一個大括號中 {},通過key-value的方式來表達數據。JSON的Key必須包裹在一個雙引號中,在實踐中,編寫 JSON 的時候,忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。
JSON的值只能是以下幾種數據格式,其他任何格式都會觸發報錯,例如 JavaScript 中的 undefined。

  1. 數字,包含浮點數和整數
  2. 字符串,需要包裹在雙引號中
  3. Bool值,true 或者 false
  4. 數組,需要包裹在方括號中 []
  5. 對象,需要包裹在大括號中 {}
  6. Null

還需要注意的是 JSON 文件中無法使用註釋,試圖添加註釋將會引發報錯。

2.4 js

一個服務僅僅只有界面展示是不夠的,還需要和用戶做交互:響應用戶的點擊、獲取用戶的位置等等。在小程序裏邊,我們就通過編寫 JS 腳本文件來處理用戶的操作。

  1. 註冊頁面

對於小程序中的每個頁面,都需要在頁面對應的 js 文件中進行註冊,指定頁面的初始數據、生命週期回調、事件處理函數等

  1. 使用 Page 構造器註冊頁面

簡單的頁面可以使用 Page() 進行構造。

  1. 使用 Component 構造器構造頁面

Page 構造器適用於簡單的頁面。但對於複雜的頁面, Page 構造器可能並不好用。
此時,可以使用 Component 構造器來構造頁面。 Component 構造器的主要區別是:方法需要放在 methods: { } 裏面。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章