WXML模版语法

数据绑定

1.数据绑定的基本原则

    在data中定义数据 在wxml中使用数据

2.在data中定义页面的数据

    在页面对应的.js文件中，把数据定义到data对象中即可：

3.Mustache语法的格式（插值表达式）

    把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：

4.Mustache语法应用场景

绑定内容   、绑定属性  、运算（三元运算符、算术运算符）

动态绑定内容：

动态绑定属性：

在Vue项目中 动态绑定属性 v-bind 简写 ：，小程序里直接src="{{}}"

三元运算：

根据randomNum的值来进行三元运算，展示不同文本

算术运算：

事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件绑定可以将用户在渲染层产生的行为，反馈到逻辑层进行业务处理。

1.小程序中常见的事件

2.事件对象的数下列表

当事件回调触发的时候，会受到一个时间对象event,它的详细属性如下表所示：

3.target和currentTarget的区别

target 是触发该事件的源头组件，而currentTarget是当前事件所绑定的组件。

4.bindtap的语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tab事件来响应用户的触摸行为。

5.在事件处理函数中为data中的数据赋值

6.事件传参

小程序中的事件传参比较特殊，不能再绑定事件的同时为事件处理函数传参。例如，下面的代码就不能正常工作：

小程序会把bindtap后面的是认为方法名字

可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，实例代码如下：

info会被解析为参数的名字，数值2会被解析为参数的值。这里的2 要用{{}}，{{}}包裹才是数值，否则就是字符串了。

在事件处理函数中，通过event.target.dataset.参数名，可以获取到传参的值。

7.bindinput 的语法格式

在小程序中，通过 input事件来响应文本框的输入事件，语法格式如下：

8.实现文本框和data之间的数据同步

实现步骤： 定义数据  渲染结构  美化样式  绑定input事件处理函数

第一步定义数据

第二步渲染结构

第三步美化样式

第四步 绑定事件

条件渲染

1.wx:if

2.结合<block>使用wx:if

block标签并不是一个组件，他只是一个包裹性质的容器，不会在页面中做任何的渲染

3.hidden

在小程序中，直接使用hidden="{{condition}}" 也能控制元素的显示与隐藏：

4.wx:if和hidden之间的对比

列表渲染

1.wx:for

通过wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法如下：

默认情况下，当前玄幻的索引 用index表示；当前循环项用item表示

2.手动指定索引和当前项的变量名*

3.wx:key 的使用

类似于Vue中：key，小程序在实现列表渲染时，也建议为渲染的列表指定唯一的key值，从而提高渲染效率，如图：

可以用id作为key的值，当没有id属性，也可以用index索引作key的值

WXSS模版样式

1.什么是WXSS？

WXSS是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。

2.WXSS与CSS之间的区别？

WXSS具有CSS的大部分特性，同时WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。

3.什么是rpx尺寸单位?

rpx是微信小程序独有的，用来解决屏幕适配的尺寸单位。rpx的实现原理非常的简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即当前屏幕为750rpx）。

在较小的设备上，1rpx所代表的宽度较小。

在较大的设备上，1rpx所代表的宽度较大。

小程序在不同设备上运行时，会自动把rpx的样式单位换算成对应像素单位来渲染，从而实现屏幕适配。

4.rpx与px之间的单位换算

在iPhone6上，屏幕的宽度为375px，共有750个像素点，等分为750rpx。则：

750rpx=375px=750物理像素点

1rpx=0.5px=1物理像素

开发小程序时，官方建议设计师以iPhone6作为视觉稿的标准

开发举例：在iPhone6上如果绘制宽100px 高 20px的盒子，换算单位后 就是 宽200rpx 高40rpx

5.@import 的语法格式

@import后跟需要导入的外联样式表的相对路径，用；表示语句结束。示例如下：

我们在app.wxss中导入了 common.wxss里的样式

6.全局样式和局部样式

小程序的全局样式就是写在app.wxss中的样式，作用于小程序每一个页面。

小程序的局部样式，在页面的.wxss中定义的样式为局部样式，只作用于当前页面。

当局部样式和全局样式发生冲突时，就近原则，局部样式会覆盖全局样式。

当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。

全局配置

1.全局配置文件及常用的配置项

小程序额度根目录下的app.json 文件时小程序的全局配置文件。常用配置项如下：

2.小程序窗口的组成部分

3.了解window节点常用的配置项

4.全局开启下拉刷新功能

下拉刷新是移动端专有名词，指的是通过手指在屏幕上的下来滑动操作，从而重新加载页面数据的行为。

app.json配置文件中，window对象 配置 enablePullDownRefresh 为true即可，false为关闭刷新。

值得注意的是 你在app.json中配置的 会作用于每一个小程序页面！也就是下拉刷新会作用于每个页面哦！

5.设置上拉触底的距离

上拉触底是移动端的专有名词，就是手指在屏幕上的上拉滑动，从而加载更多数据。

上拉刷新

6.什么是tabBar？

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换，小程序中将其分为两部分：

顶部的tabBar

底部的 tabBar

tabBar中只能配置最少2个，最多5个tab页签

当渲染顶部tabBar时，不显示icon图标，只显示文本

tabBar中只能配置最少2个，最多5个tab页签

tabBar的6个组成部分：

红色虚线就是tabBar的相关配置项

tabBar节点的配置项：

list是必填项

每个tab项的配置选项（tabBar list 对象内配置的）：

这里值得注意的是你的pagePath 路径， 请务必在Page对象内配置，且放到前面哦

页面配置

1.页面配置文件的作用

2.页面配置中常用的配置项

发现没有？页面局部配置 xxx页面.json 和 全局配置 app.json 中window对象的配置项基本一致

在页面局部配置中，这些配置项直接写在{}中，app.json里 这些影响全局页面的配置都写在了window里

message页单独配置页面的一些样式 覆盖全局配置

网络数据请求

1.小程序中网络数据请求的限制

出于安全性的考虑，小程序官方对数据接口的请求做出了如下的两个限制：

只能请求HTTPS类型的接口  

必须将接口的域名添加到信任列表中

在微信开发者工具最右边 查看已配置域名的信任列表

2.如何配置request合法域名呢？

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口

配置步骤：登录小程序管理后台-----开发-----开发设置-----服务器域名------修改request合法域名

小程序管理后台后台配置页面

配置request合法域名的注意事项

3.发起GET请求

4.发起POST请求：

5.在页面加载时请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求有一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下：

页面一加载，就去请求轮播图和九宫格的数据

6.跳过request域名合法校验

仅限在开发与调试阶段使用，部署时就不能用了

7.关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域问题。

Ajax技术的核心是依赖于浏览器中XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而叫做“发起网络数据请求”。