微信小程式入門筆記-1

WXML

WXML（WeiXin Markup Language）是架構設計的一套标簽語言，結合基礎元件、事件系統，可以建構出頁面的結構。

主要功能：資料綁定、清單渲染、條件渲染、模闆、事件、引用

WXSS

WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的元件樣式。

WXSS 用來決定 WXML 的元件應該怎麼顯示。

為了适應廣大的前端開發者，WXSS 具有 CSS 大部分特性。同時為了更适合開發微信小程式，WXSS 對 CSS 進行了擴充以及修改。

與 CSS 相比，WXSS 擴充的特性有：

1. 尺寸機關rpx(responsive pixel)

2. 樣式導入@import

在使用微信官方提供的API構件簡單小程式時需要使用到JSON

這裡簡單複習一下：

JSON 文法規則

JSON 文法是 JavaScript 對象表示法文法的子集。

資料通過”名稱”:”值”成對出現, eg.,

“firstName” : “John”

資料間由逗号分隔, eg.,

“firstName”:”John” , “lastName”:”Doe”

花括号用于儲存對象, eg.,

{ “firstName”:”John” , “lastName”:”Doe” }

方括号用于儲存數組, eg.,

{“employees”: [{ “firstName”:”John” , “lastName”:”Doe” }, { “firstName”:”Anna” , “lastName”:”Smith” }, { “firstName”:”Peter” , “lastName”:”Jones” }]}

JSON 值可以是：

* 數字（整數或浮點數）

* 字元串（在雙引号中）

* 邏輯值（true 或 false）

* 數組（在方括号中）

* 對象（在花括号中）

* null

以下是我在前兩天接觸微信小程式遇到的小問題：

Q1. 箭頭函數

引入箭頭函數有兩個方面的作用：更簡短的函數并且不綁定this。

對不綁定this這一點可能一句話不能講清楚，列出以下資料：

在箭頭函數出現之前，每個新定義的函數都有它自己的 this值（在構造函數的情況下是一個新對象，在嚴格模式的函數調用中為 undefined，如果該函數被作為“對象方法”調用則為基礎對象等）。This被證明是令人厭煩的面向對象風格的程式設計。

var p = new Person();

在ECMAScript 3/5中，通過将this值配置設定給封閉的變量，可以解決this問題。如下：

function Person() {

var that = this;

that.age = 0;

setInterval(function growUp() {

// 回調引用的是

that

變量, 其值是預期的對象.

that.age++;

}, 1000);

}

或者，可以建立綁定函數，以便将預先配置設定的this值傳遞到綁定的目标函數（上述示例中的growUp()函數）。

箭頭函數不會建立自己的this,它隻會從自己的作用域鍊的上一層繼承this。是以，在下面的代碼中，傳遞給setInterval的函數内的this與封閉函數中的this值相同：

function Person(){

this.age = 0;

setInterval(() => {

this.age++; // |this| 正确地指向person 對象

}, 1000);

}

var p = new Person();

想了解更多箭頭函數知識推薦這個網站：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Q2. 修改控件資料

閱讀 setData() 的官方文檔我們看到

setData 函數用于将資料從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

注意：1. 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀态的，還會造成資料不一緻。

這裡邏輯層就是指 js 代碼，視圖層就是指 wxml 和 wxss 代碼。setData() 會首先更新 this.data 的值，然後使用新的 this.data 資料來渲染頁面。setData() 會在改變 this.data() 後直接傳回，而不會等待渲染結束後再傳回。另一個重要的事情是，我們需要調用 this.setData 函數來更新 Data 中的資料而不是去直接修改 this.data 。文檔專門用加黑的字型告訴我們不要這麼做。

Q3. JSON為什麼不能加注釋？

添加注釋//或者在JSON檔案中是不允許的

JSON有兩種資料結構：

1. 名稱/值對的集合：key : value樣式；

2. 值的有序清單：就是Array；

而在JSON的文檔中說明隻要是不符合上面兩種結構的都不被支援，并提示錯誤（http://www.ietf.org/rfc/rfc7159.txt）