微信小程序入门笔记-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）