(二)模板与配置

一、模板语法

1.1数据绑定

1.数据绑定的基本原则
（1）在data中定义数据
（2）在WXML中使用数据
2.在data中定义页面的数据
在页面对应的.js文件中，把数据定义到data对象中即可：
3.Mustache语法的格式
把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。


4.Mustache语法的应用场景

• 绑定数据
• 绑定属性
• 运算

5.动态绑定内容

6.动态绑定属性

7.三元运算

8.算术运算

1.2事件绑定

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

2.小程序常用事件

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

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

点击内部的按钮，点击事件以冒泡方式向外扩散

5.bindtap的语法格式
在小程序中，不存在onclick点击事件，而是通过tap实践来响应用户的触摸行为。
（1）通过bindtap,可以为组件绑定tap触摸事件

（2）在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event(e)来介绍

6.在事件处理函数中为data中的数据赋值
通过调用this.setDate(dataObject)方法，可以给页面data中的数据重新赋值，

7.事件传参
小程序的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如下列的代码是错误的：

因为小程序会把bindtap的属性值，统一当作事件名称来处理，相当于调用一个名称为btnHandler(123)的事件处理函数
可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字

最终：
info会被解析为参数的名字
数值2会被解析为参数的值

8.bindinput的语法格式
提供input事件来响应文本框的输入事件，
（1）通过bindinput，可以为文本绑定输入事件：

（2）在页面的.js文件中定义事件处理函数：

9.实现文本框和data之间的数据同步
实现步骤：
（1）定义数据
（2）渲染结构
（3）美化样式
（4）绑定input事件处理函数

1.3条件渲染

1.wx.if
在小程序中，使用wx:if="{{condition}}“来判断是否需要渲染该代码块：


2.结合<block>使用wx:if
如果==一次性控制多个组件的展示与隐藏，==可以使用一个block标签将多个组件包裹起来，

注意：
block并不是一个组件，他只是一个包裹性质的容器，不会在页面上做任何渲染。
3.hidden
在小程序中，直接使用hidden=”{{condition}}"也能控制元素的显示与隐藏：

<view hidden="{{condition}}">条件为ture隐藏，条件为false显示</view>

4.wx:if与hidden的对比
（1）运行方式不同

• wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
• hidden以切换样式的方式，控制元素的显示与隐藏

（2）使用建议

• 频繁切换时，建议使用hidden
• 控制条件复杂时，建议使用wx:if配合wx:elif、wx:else进行展示与隐藏的切换

1.4列表渲染

1.wx:for
通过wx:for可以根据指定的数组，循环渲染重复的组件结构

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

3.wx:key的使用
类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值。从而==提高渲染的效率 ==，示例代码如下：

二、WXSS模板样式

❣️1.什么是WXSS

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

❣️2.WXSS和CSS的关系

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

• rpx尺寸单位
• @import样式导入

2.1rpx

❣️1.什么是rpx尺寸单位
rpx是微信小程序独有的，用来解决屏幕适配的尺寸单位
❣️2.rpx的实现单位
鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（屏幕总宽度为750rpx）
在较小的设备上，1rpx多代表的宽度较小
3.rpx与px之间的单位换算
在iphone6上，屏幕375rpx，共有750个物理像素，等分为750rpx.

2.2样式导入

❣️1.什么是样式导入
使用WXSS提供的==@import语法，可以导入外联的样式表
❣️2.@import的语法格式
@import后跟需要导入的外联样式表的相对路径==，用;表示结束

2.3全局样式和局部样式

1.全局样式
定义在app.wxss中的样式为全局样式，作用于每一个页面。
2.局部样式
在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。
注意：
（1）当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
（2）当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局样式。

---

三、全局配置

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

3.1window

❣️1.小程序窗口的组成部分

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

3.设置导航栏的标题
设置步骤：

app.json->window->navigationBarTitleText

4.设置导航栏的背景色

5.设置导航栏的标题颜色

注意：其可选值只有black和white

❣️6.全局开启下拉刷新功能
概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动，从而重新加载页面数据的行为。

❣️7.设置下拉刷新时窗口的背影色
当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，

❣️8.下拉刷新时loading样式
默认窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为：

其可选值只有light和dark==
❣️9.设置上拉触底的距离
概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

注意：默认距离为50px,如果没有特殊需求，建议使用默认值即可。

3.2tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。
通常分为：

• 底部tabBar
• 顶部tabBar
  注意：tabBar中只能配置最少2个、最多5个tab页签
  当渲染顶部tabBar时，不显示icon，只显示文本
  2.tabBar的6个组成部分
  
  
  3.tabBar的配置项
  
  4. 4个tab项的配置项

案例：配置tabBar

"tabBar": {
  "list": [{
    "pagePath": "pages/home/home",
    "text": "首页",
    "iconPath": "/images/tabs/home.png",
    "selectedIconPath": "/images/tabs/home-active.png"
  },
  {
    "pagePath": "pages/message/message",
    "text": "消息",
    "iconPath": "/images/tabs/message.png",
    "selectedIconPath": "/images/tabs/message-active.png"
  },
  {
    "pagePath": "pages/contact/contact",
    "text": "联系我们",
    "iconPath": "/images/tabs/contact.png",
    "selectedIconPath": "/images/tabs/contact-active.png"
  }
]
},

四、页面配置

1.页面配置文件的作用
每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
2.页面配饰和全局配置的关系
小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时“页面级别的.json配置文件”就可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
3.页面配置中常用的配置项

五、网络数据请求

1.小程序中网络数据请求的限制
处于安全性方面的考虑，小程序对数据接口有两个限制：
（1）只能请求HTTPS类型的接口
（2）必须将接口的域名添加到信任列表中

2.配置request合法域名

注意事项：
（1）域名只支持https协议
（2）域名不能使用IP地址或localhost
（3）域名必须经过ICP备案
（4）服务器域名一个月最多可以申请5次修改
3.发起GET请求
调用微信小程序提供的wx.request()方法，可以发起GET请求，

4.发起POST请求

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

跳过request合法域名校验
如果后端程序员仅仅提供了http协议的接口，暂时没有提供https协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启【开发环境不校验请求i域名、TLS版本及HTTPS证属】选项


6.关于跨域和Ajax的说明
跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做发起网络数据请求

六、案例——本地生活