微信小程序開發基礎

​關於開發文檔閱讀說明

後文中爲了保持簡單，經過如下格式來展現上述的代碼邏輯，使用第一段註釋來代表 WXML 對應的腳本文件中的 data 結構。

代碼清單2-7 展現格式

<!--

{

  time: (new Date()).toString()

}

-->

<text>當前時間：{{time}}</text>

 

小程序由配置代碼JSON文件、模板代碼 WXML 文件、樣式代碼 WXSS文件以及邏輯代碼 JavaScript文件組成。

1. .json 後綴的 JSON 配置文件
2. .wxml 後綴的 WXML 模板文件
3. .wxss 後綴的 WXSS 樣式文件
4. .js 後綴的 JS 腳本邏輯文件

 

配置代碼JSON文件

JSON 語法

這裏說一下小程序裏JSON配置的一些注意事項。

JSON文件都是被包裹在一個大括號中 {}，經過key-value的方式來表達數據。JSON的Key必須包裹在一個雙引號中，在實踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。

JSON的值只能是如下幾種數據格式，其餘任何格式都會觸發報錯，例如 JavaScript 中的 undefined。

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

還須要注意的是 JSON 文件中沒法使用註釋，試圖添加註釋將會引起報錯。

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

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

1. JSON 是一種並非數據格式，編程語言，在小程序中，JSON扮演的靜態配置的角色。
2. JSON文件在小程序代碼中扮演靜態配置的做用，在小程序運行以前就決定了小程序一些表現，須要注意的是小程序是沒法在運行過程當中去動態更新JSON 配置文件從而發生對應的變化的。
3. JSON文件都是被包裹在一個大括號中 {}，經過key-value的方式來表達數據。Key必須包裹在一個雙引號中
4. JSON 文件中沒法使用註釋，試圖添加註釋將會引起報錯。

模板代碼 WXML 文件

1. WXML 全稱是 WeiXin Markup Language，是小程序框架設計的一套標籤語言，結合小程序的基礎組件、事件系統，能夠構建出頁面的結構。
2. 不帶有任何邏輯功能的 WXML 基本語法以下：

<!-- 在此處寫註釋 -->

<標籤名 屬性名1="屬性值1" 屬性名2="屬性值2" ...> ...</標籤名>

1. ​標籤能夠擁有屬性，屬性提供了有關的 WXML元素更多信息。屬性老是定義在開始標籤中，除了一些特殊的屬性外，其他屬性的格式都是key="value" 的方式成對出現。
2. 在網頁的通常開發流程中，咱們一般會經過 JS 操做 DOM (對應 HTML 的描述產生的樹)，以引發界面的一些變化響應用戶的行爲。例如，用戶點擊某個按鈕的時候，JS 會記錄一些狀態到 JS 變量裏邊，同時經過 DOM API 操控 DOM 的屬性或者行爲，進而引發界面一些變化。當項目愈來愈大的時候，你的代碼會充斥着很是多的界面交互邏輯和程序的各類狀態變量，顯然這不是一個很好的開發模式，所以就有了 MVVM 的開發模式（例如 React, Vue），提倡把渲染和邏輯分離。簡單來講就是不要再讓 JS 直接操控 DOM，JS 只須要管理狀態便可，而後再經過一種模板語法來描述狀態和界面結構的關係便可。

在 Web 開發中，開發者使用 JavaScript 經過Dom 接口來完成界面的實時更新。在小程序中，使用 WXML 語言所提供的數據綁定功能，來完成此項功能。

1. 數據綁定

(1).WXML 經過 {{變量名}} 來綁定 WXML 文件和對應的 JavaScript 文件中的 data 對象屬性。

(2). 屬性值也能夠動態的去改變，有所不一樣的是，屬性值必須被包裹在雙引號中

<text data-test="{{test}}"> hello world</text>

(3). 沒有被定義的變量的或者是被設置爲 undefined 的變量不會被同步到 wxml 中

(4). 還支持字符串的拼接,{{ }}中還能夠直接放置數字、字符串或者是數組

1. 邏輯語法

(1). 經過 {{ 變量名 }} 語法可使得 WXML 擁有動態渲染的能力，除此外還能夠在 {{ }} 內進行簡單的邏輯運算。

(2). WXML 中，使用 wx:if="{{condition}}" 來判斷是否須要渲染該代碼塊：

(3). 若是要一次性判斷多個組件標籤，可使用一個 <block/> 標籤將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。

1. 列表渲染

(1). 在組件上使用 wx:for 控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件,默認數組當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item

(2). 使用 wx:for-item 指定數組當前元素的變量名，使用 wx:for-index 指定數組當前下標的變量名：

(3). 若是列表中項目的位置會動態改變或者有新的項目添加到列表中，而且但願列表中的項目保持本身的特徵和狀態（如 <input/> 中的輸入內容， <switch/> 的選中狀態），須要使用 wx:key 來指定列表中項目的惟一的標識符。

wx:key 的值以兩種形式提供：

1. 字符串，表明在 for 循環的 array 中 item 的某個 property，該 property 的值須要是列表中惟一的字符串或數字，且不能動態改變。
2. 保留關鍵字 this 表明在 for 循環中的 item 自己，這種表示須要 item 自己是一個惟一的字符串或者數字，如：

當數據改變觸發渲染層從新渲染的時候，會校訂帶有 key 的組件，框架會確保他們被從新排序，而不是從新建立，以確保使組件保持自身的狀態，而且提升列表渲染時的效率。

1. 模板

(1).WXML提供模板（template），能夠在模板中定義代碼片斷，而後在不一樣的地方調用。使用 name 屬性，做爲模板的名字。而後在 <template/> 內定義代碼片斷，

(2). 使用 is 屬性，聲明須要的使用的模板，而後將模板所須要的 data 傳入

1. 引用

(1). WXML 提供兩種文件引用方式import和include。

import 能夠在該文件中使用目標文件定義的 template

include 能夠將目標文件中除了 <template/> <wxs/> 外的整個代碼引入，至關因而拷貝到 include 位置

WXSS 樣式

(1). 項目公共樣式：根目錄中的app.wxss爲項目公共樣式，它會被注入到小程序的每一個頁面。

(2). 與app.json註冊過的頁面同名且位置同級的WXSS文件

其它樣式：其它樣式能夠被項目公共樣式和頁面樣式引用

(3). 在小程序中，咱們依然能夠實現樣式的引用，樣式引用是這樣寫：

@import './test_0.wxss'

因爲WXSS最終會被編譯打包到目標文件中，用戶只須要下載一次，在使用過程當中不會由於樣式的引用而產生多餘的文件請求。

 

JavaScript 腳本

1. console.log() 方法用於在控制檯輸出信息。
2. wxml中的動態數據均來自於對應js文件中的Page的data，在js中訪問Page的data用this.data， 改變data中某個屬性的值用setData()方法。
3. 整個小程序只有一個 App 實例，是所有頁面共享的。開發者能夠經過 getApp （）方法獲取到全局惟一的 App 實例，獲取App上的數據或調用開發者註冊在 App 上的函數
4. 小程序中的Javascrpt

小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 來實現的。同瀏覽器中的JavaScript 相比沒有 BOM 以及 DOM 對象，因此相似 JQuery、Zepto這種瀏覽器類庫是沒法在小程序中運行起來的，一樣的缺乏 Native 模塊和NPM包管理的機制，小程序中沒法加載原生庫，也沒法直接使用大部分的 NPM 包。

1. 模塊化

瀏覽器中，全部 JavaScript 是在運行在同一個做用域下的，定義的參數或者方法能夠被後續加載的腳本訪問或者改寫。同瀏覽器不一樣，小程序中能夠將任何一個JavaScript 文件做爲一個模塊，經過module.exports 或者 exports 對外暴露接口。

1. 腳本的執行順序

小程序的執行的入口文件是 app.js 。而且會根據其中 require 的模塊順序決定文件的運行順序

當 app.js 執行結束後，小程序會按照開發者在 app.json 中定義的 pages 的順序，逐一執行

1. 做用域

(1).同瀏覽器中運行的腳本文件有所不一樣，小程序的腳本的做用域同 NodeJS 更爲類似。在文件中聲明的變量和函數只在該文件中有效，不一樣的文件中能夠聲明相同名字的變量和函數，不會互相影響，

(2).當須要使用全局變量的時，經過使用全局函數 getApp() 獲取全局的實例，並設置相關屬性值，來達到設置全局變量的目的

(3).須要注意的是，上述示例只有在 a.js 比 b.js 先執行纔有效，當須要保證全局的數據能夠在任何文件中安全的被使用到，那麼能夠在 App() 中進行設置