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）

微信小程序入门笔记-1相关推荐

微信小程序入门笔记（一）
day 01 1.微信公众平台 https://mp.weixin.qq.com/ 品牌,营销 1.1微信公众平台概念微信公众平台,简称公众号.曾命名为"官号平台"." ...
微信小程序入门笔记5（page.json）
page.json 一.全局配置 1.pages 页面路径 2. Windows配置 3.tabBar 底部导航 (1)list (2)networkTimeout 各类网络请求的超时时间二.页面配 ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
做一个微信小程序给TA——程序猿小白的情人节礼物（微信小程序入门——一文学会小程序开发到发布小程序的全过程）
# 情人节可送给女朋友的礼物,或者作为两人的纪念 # 效果展示:微信搜索 "王美美与曾小帅" 小程序即可查看效果 # 微信小程序入门--使用免费后端云(Bmod)搭建留言板 ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
微信小程序开发-笔记
一.开发文件结构 1.根目录下有三个文件:app.js,app.json和app.wxss.一个小程序项目必须有的三个描述App的文件.这三个文件是应用程序级别的文件.这3个文件的意义: 表1.1 ...
一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...

微信小程序入门笔记-1

WXML

WXSS

JSON 语法规则

微信小程序入门笔记-1相关推荐

最新文章

热门文章