微信小程序学习笔记（2）模板与配置

---

WXML模板语法

数据绑定

无脑使用{{}}就行，叫做差值表达式或 mustache 语法。

三元运算如下：

事件绑定

常用的事件：

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于 HTML 中的 cick 事件
input	bindinput 或 bind:input	文本框的输入事件
change	bind:change	状态改变时触发

当事件回调触发时，会收到一个事件对象 event：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

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

事件传参

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值。

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如bindtap="click(123)"是不行的，因为小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于调用一个名称为 click(123) 的函数。

因此需要用组件提供的 data-* 自定义属性传参，其中 *代表的是参数的名字。

示例如下：

在小程序中，通过 input 事件来响应文本框的输入事件：

条件渲染

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

如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来。

block 和 view 的区别在于，它不是组件，只是一个包裹性质的容器，不会在页面渲染。

列表渲染

通过 WX:for 可以根据指定的数组，循环渲染重复的组件结构。默认情况下，当前循环项的索引用 index 表示，当前循环项用 item 表示。

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

如果不指定 key 值，则会显示黄色警告：

Now you can provide attr wx:key for a wx:for to improve performance.

如果没有 id，就用 index 作为 key 值。

wxss

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

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

rpx单位

解决屏幕适配的尺寸单位。

1rpx 约等于 0.5rpx。

样式导入

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

全局配置

小程序根目录下的 app.json 文件是小程序的全局配置文件。

1.pages

记录当前小程序所有页面的存放路径

2.window

全局设置小程序窗口的外观

3.tabBar

设置小程序底部的 tabBar 效果

4.style

是否启用新版的组件样式

window 常用配置：

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

• 底部 tabBar
• 顶部 tabBar

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

当渲染顶部 tabBar 时，不显示 icon,只显示文本。

tabBar 有六个组成部分：

tabBar 节点的配置项：

属性	类型	默认值	描述
position	String	bottom	tabBar 的位置，仅支持 bottom/top
borderStyle	String	black	tabBar 上边框的颜色，仅支持 black/white
color	HexColor		tab 上文字的默认（未选中）颜色
selectedColor	HexColor		tab 上的文字选中时的颜色
backgroundColor	HexColor		tabBar 的背景色
list	Array		tab页签的列表，最少2个、最多5个tab

每个 tab 项的配置选项：

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义
text	String	是	tab 上显示的文字
iconPath	String	否	未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedlconPath	String	否	选中时的图标路径；当 postion 为 top 时，不显示 icon

示例如下：

注意！tabBar 的页面必须放在 pages 的最前面几个，否则会失效。

网络请求

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

• 只能请求 HTTPS 类型的接口
• 必须将接口的域名添加到信任列表中

登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

如果不想这么麻烦，希望跳过 request 合法域名校验，可以暂时关闭。

但是仅在开发和调试阶段可以使用，上线时一定要校验！

调用微信小程序提供的 Wx.request() 方法，可以发起 GET 数据请求。

将 GET 改为 POST 即可发起 POST 请求。

关于跨域和 Ajax：

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