小程序由配置代碼JSON文件、模板代碼 WXML 文件、樣式代碼 WXSS文件以及邏輯代碼 JavaScript文件組成。 [【官方文檔】](https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=000ace6c9603786b008636f2e56c0a) [TOC] * **文件結構** 小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。 一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下： | 文件 | 必填 | 作用 | | --- | --- |--- | | app.js | 是 | 小程序邏輯| | app.json | 是 | 小程序公共設置| | app.wxss | 否 | 小程序公共樣式表| 一個小程序頁面由四個文件組成，分別是： | 文件 | 必填 | 作用 | | --- | --- |--- | | js | 是 | 頁面邏輯 | | wxml | 是 | 頁面結構| | wxss | 否 | 頁面樣式表| | json | 否 | 頁面配置| >[warning] 為了方便開發者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。 ## 1.1 JSON配置——`app.json`文件 JSON 是一種數據格式，并不是編程語言，在小程序中，JSON扮演靜態配置的角色。 根目錄中的`app.json`文件為項目的公共配置文件。 ## 1.2 WXML 模板——`*.wxml`文件 `WXML` 全稱是 WeiXin Markup Language，是小程序框架設計的一套標簽語言，結合小程序的基礎組件、事件系統，可以構建出頁面的結構。 WXML 文件后綴名是 .wxml ，簡單的 WXML語句在語法上同 HTML 非常相似。WXML 要求`標簽必須是嚴格閉合`的，沒有閉合將會導致編譯錯誤。 WXML中的`屬性是大小寫敏感`的，也就是說 class 和 Class 在WXML中是不同的屬性。 ### 1.2.1 數據綁定 在 Web 開發中，開發者使用 JavaScript 通過Dom 接口來完成界面的實時更新。 在小程序中，使用 WXML 語言所提供的數據綁定功能，來完成此項功能。WXML 通過 {{變量名}} 來綁定 WXML 文件和對應的 JavaScript 文件中的 data 對象屬性。 ### 1.2.2 邏輯語法 通過` {{ 變量名 }}` 語法可以使得 WXML 擁有動態渲染的能力，除此外還可以在 {{ }} 內進行簡單的邏輯運算。 - 三元運算 - 算數運算 - 字符串的拼接 - 放置常量（數字、字符串或者是數組） ### 1.2.3 條件邏輯 WXML 中，使用`if-else`來判斷是否需要渲染該代碼塊： - 語法：`wx:if="{{condition}}"`，`wx:elseif="{{condition}}"`，`wx:else` ### 1.2.4 列表渲染 在組件上使用 `wx:for` 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。默認數組的當前項的下標變量名默認為` index`，數組當前項的變量名默認為 `item`。 ### 1.2.5 模板 WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用。使用 `name` 屬性，作為模板的名字。然后在 `<template/>` 內定義代碼片段。 ### 1.2.6 引用 WXML 提供兩種文件引用方式`import`和`include`。 - `import` 可以在該文件中使用目標文件定義的 template， 需要注意的是 import 有作用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件中 import 的 template，簡言之就是 import 不具有遞歸的特性。 - `include` 可以將目標文件中除了 `<template/> <wxs/>` 外的整個代碼引入，相當于是拷貝到 include 位置 ### 1.2.7 共同屬性 所有wxml 標簽都支持的屬性稱之為共同屬性，如表2-1所示。 :-: 表2-1 共同屬性 | 屬性名 |類型| 描述 | 注解 | | --- | --- | --- | --- | | id | String | 組件的唯一標識 | 整個頁面唯一 | | class | String | 組件的樣式類 | 在對應的 WXSS 中定義的樣式類 | | style | String | 組件的內聯樣式 | 可以動態設置的內聯樣式 | | hidden | Boolean | 組件是否顯示 | 所有組件默認顯示 | | data-* | Any | 自定義屬性 | 組件上觸發的事件時，會發送給事件處理函數 | | bind*/catch* | EventHandler | 組件的事件 | ## 1.3 WXSS樣式--`*.wxss`文件 `WXSS`（WeiXin Style Sheets）是一套用于小程序的樣式語言，用于描述WXML的組件樣式，也就是視覺上的效果。 WXSS與Web開發中的CSS類似。為了更適合小程序開發，WXSS對CSS做了一些補充以及修改。 - **項目公共樣式**：根目錄中的`app.wxss`文件為項目公共樣式文件，它會被注入到小程序的每個頁面。 - **頁面樣式**：與app.json注冊過的頁面同名且位置同級的WXSS文件。 比如：在`app.json`文件中注冊了`pages/rpx/index`頁面，那`pages/rpx/index.wxss`為頁面`pages/rpx/index.wxml`的樣式文件。 在小程序開發中，開發者不需要像Web開發那樣去優化樣式文件的請求數量，只需要考慮代碼的組織即可。樣式文件最終會被編譯優化，具體的編譯原理我們留在后面章節再做介紹。 ### 1.3.1 尺寸單位 在WXSS中，引入了`rpx`（responsive pixel）尺寸單位。引用新尺寸單位的目的是，適配不同寬度的屏幕，開發起來更簡單。 小程序編譯后，rpx會做一次px換算。 舉個例子：iPhone6屏幕寬度為375px，共750個物理像素，那么1rpx = 375 / 750 px = 0.5px。 ### 1.3.2 WXSS引用 在小程序中，我們依然可以實現樣式的引用，樣式引用是這樣寫：`@import './test_0.wxss'` 由于WXSS最終會被編譯打包到目標文件中，用戶只需要下載一次，在使用過程中不會因為樣式的引用而產生多余的文件請求。 ### 1.3.3 內聯樣式 WXSS內聯樣式與Web開發一致: 小程序支持動態更新內聯樣式： ### 1.3.4 選擇器 目前支持的選擇器如表2-2所示。 :-: 表2-2 小程序WXSS支持的選擇器 | 類型 | 選擇器 | 樣例 | 樣例描述 | | --- | --- | --- | --- | | 類選擇器| .class| .intro | 選擇所有擁有 class="intro" 的組件| | id選擇器| | #id | #firstname| 選擇擁有 id="firstname" 的組件| | 元素選擇器| element| view checkbox | 選擇所有文檔的 view 組件和所有的 checkbox 組件| | 偽元素選擇器| ::after | view::after | 在 view 組件后邊插入內容| | 偽元素選擇器| ::before | view::before | 在 view 組件前邊插入內容| WXSS優先級與CSS類似，權重越高越優先。在優先級相同的情況下，后設置的樣式優先級高于先設置的樣式。 ### 1.3.5 官方樣式庫 為了減輕開發者樣式開發的工作量，我們提供了`WeUI.wxss`基礎樣式庫。 WeUI是一套與微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。包含`button、cell、dialog、progress、toast、article、actionsheet、icon`等各式原生。 具體使用文檔可參考：https://github.com/Tencent/weui-wxss ## 1.4 JavaScript腳本--`*.js`文件 小程序的主要開發語言是 JavaScript ，開發者使用 JavaScript 來開發業務邏輯以及調用小程序的 API 來完成業務需求。 ### 1.4.1 ECMAScript 在大部分開發者看來，ECMAScript和JavaScript表達的是同一種含義，但是嚴格的說，兩者的意義是不同的。 ECMAScript是一種由Ecma國際通過ECMA-262標準化的腳本程序設計語言， JavaScript 是 ECMAScript 的一種實現。 小程序中的 JavaScript同瀏覽器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的。 ECMA-262 規定了 ECMAScript 語言的幾個重要組成部分： 1. 語法 2. 類型 3. 語句 4. 關鍵字 5. 操作符 6. 對象 小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 來實現的。同瀏覽器中的JavaScript 相比沒有 BOM 以及 DOM 對象，所以類似 JQuery、Zepto這種瀏覽器類庫是無法在小程序中運行起來的，同樣的缺少 Native 模塊和NPM包管理的機制，小程序中無法加載原生庫，也無法直接使用大部分的 NPM 包。 ### 1.4.2 小程序的執行環境 小程序目前可以運行在三大平臺： 1. iOS平臺，包括iOS9、iOS10、iOS11 2. Android平臺 3. 小程序IDE 區別主要是體現三大平臺實現的 ECMAScript 的標準有所不同。目前開發者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的標準，但是在小程序中， iOS9和iOS10 所使用的運行環境并沒有完全的兼容到 ECMAScript 6 標準，一些 ECMAScript 6 中規定的語法和關鍵字是沒有的或者同標準是有所不同的。 小程序IDE提供語法轉碼工具幫助開發者，將 ECMAScript 6代碼轉為 ECMAScript 5代碼，從而在所有的環境都能得到很好的執行。 開發者需要在項目設置中，勾選 `ES6 轉 ES5 `開啟此功能。 ### 1.4.3 模塊化 瀏覽器中，所有 JavaScript 是運行在同一個作用域下的，定義的參數或者方法可以被后續加載的腳本訪問或者改寫。 同瀏覽器不同，小程序中可以將任何一個JavaScript 文件作為一個模塊，通過module.exports 或者 exports 對外暴露接口。 ### 1.4.4 腳本的執行順序 瀏覽器中，腳本嚴格按照加載的順序執行。 在小程序中的腳本執行順序有所不同。小程序執行的入口文件是 `app.js` 。并且會根據其中 `require 的模塊順序`決定文件的運行順序，當 app.js 執行結束后，小程序會按照開發者在 `app.json` 中定義的 `pages 的順序`，逐一執行。 ### 1.4.5 作用域 同瀏覽器中運行的腳本文件有所不同，小程序的腳本的作用域同 NodeJS 更為相似。 在文件中聲明的變量和函數只在該文件中有效，不同的文件中可以聲明相同名字的變量和函數，不會互相影響。 當需要使用全局變量的時，通過使用全局函數 `getApp()` 獲取全局的實例，并設置相關屬性值，來達到設置全局變量的目的。