1-数据绑定
数据绑定的基本原则:
在 data 中定义数据;在 WXML 中使用数据
在页面对应的 .js 文件中,把数据定义到 data 对象中即可;在页面wxml中取出数据
把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号){{变量名字}}将变量包起来即可
2-事件绑定
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
2.1-小程序中常用的事件
类型 | 绑定方式 | 事件描述 |
tap | bindtap 或 bind:tap | 手指触摸后马上离开,类似于html中的click事件 |
input | bindinput 或 bind:input | 文本框的输入事件 |
change | bindchange 或 bind:change | 状态改变时触发 |
2.2-事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:
属性 | 类型 | 说明 |
type | String | 事件类型 |
timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层 view 的 tap 事件处理函数。
此时,对于外层的 view 来说:
e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的 view 组件。
2.3-bindtap使用demo
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。
通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:
<button type="primary" bindtap="btnTapHandler">点击按钮</button>
在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e) 来接收
Page({
btnTapHandler(e){
console.log(e)
}
})
事件传参
可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:
<!--可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字 info就会被解析为参数的名字 数值10会被解析威参数的值-->
<button bindtap="btnTapHandler01" data-info="{{10}}">事件传参</button>
info 会被解析为参数的名字
数值 10 会被解析为参数的值
Page({
btnTapHandler01(event){
//console.log(event.target.dataset)
//在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值
console.log(event.target.dataset.info)
}
})
3-条件渲染
3.1-wx:if标签
wx:if 与 hidden 的对比
运行方式不同
wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏
使用建议
频繁切换时,建议使用 hidden
控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
3.2-wx:for
通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构;
通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
默认情况下,当前循环项的索引用 index 表示;当前循环项用 item 表示。
手动指定索引和当前项的变量名
使用 wx:for-index 可以指定当前循环项的索引的变量名
使用 wx:for-item 可以指定当前项的变量名
示例代码如下:
4-WXSS模板样式
WXSS (WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中的 CSS。
WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。与 CSS 相比,WXSS 扩展的特性有:rpx 尺寸单位,@import 样式导入
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。
注意:
当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式
5-全局配置和局部配置
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下
pages:记录当前小程序所有页面的存放路径
window:全局设置小程序窗口的外观
tabBar:设置小程序底部的 tabBar 效果
style:是否启用新版的组件样式
5.1-全局配置window
属性名 | 类型 | 默认值 | 说明 |
navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持 black / white |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark / light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px |
5.2-全局配置tabBar
tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:
底部 tabBar,顶部 tabBar
注意:
tabBar中只能配置最少 2 个、最多 5 个 tab 页签
当渲染顶部 tabBar 时,不显示 icon,只显示文本
属性 | 类型 | 必填 | 默认值 | 描述 |
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 |
selectedIconPath | String | 否 | 选中时的图标路径;当 postion 为 top 时,不显示 icon |
"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"
}
]
}
5.3-页面配置
小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。
小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的 .json 配置文件”就可以实现这种需求。
注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。
属性 | 类型 | 默认值 | 描述 |
navigationBarBackgroundColor | HexColor | #000000 | 当前页面导航栏背景颜色,如 #000000 |
navigationBarTextStyle | String | white | 当前页面导航栏标题颜色,仅支持 black / white |
navigationBarTitleText | String | 当前页面导航栏标题文字内容 | |
backgroundColor | HexColor | #ffffff | 当前页面窗口的背景色 |
backgroundTextStyle | String | dark | 当前页面下拉 loading 的样式,仅支持 dark / light |
enablePullDownRefresh | Boolean | false | 是否为当前页面开启下拉刷新的效果 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px |