学习目标
WXML 模板语法
WXSS 模板样式
全局配置
页面配置
网络数据请求
案例 - 本地生活(首页)
WXML模板语法
数据绑定
数据绑定的基本原则
①在data 中定义数据
② 在WXML 中使用数据
①在 data 中定义页面的数据
在页面对应的 .js 文件中,把数据定义到 data 对象中即可 :
// pages/list/list.js
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
message:"hello 细狗",
students:[{
name:"小花",age:18},{
name:"蔡j坤",age:24},{
name:"钟无艳",age:200},{
name:"李白",age:404}]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
② 在WXML 中使用数据
Mustache 语法的格式
把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。
pages/list/list.wxml
<!--pages/list/list.wxml-->
<!-- image图片组件 -->
<view class="container1">{
{
message}}</view>
<text>{
{
students[0].name}}{
{
students[0].age}}</text>
<image src="/images/1.jpg" mode="heightFix"></image>
运行效果：
Mustache 语法的应用场景
Mustache 语法的主要应用场景如下 :
● 绑定内容
● 绑定属性
● 运算(三元运算、算术运算等)
动态绑定内容
页面的数据：
Page({
data: {
message:"hello 细狗",
},
})
页面的结构：
<view class="container1">{
{
message}}</view>
动态绑定属性
页面的数据：
Page({
data: {
imageSrc:"/images/1.jpg",
},
})
页面的结构：
<image src="{
{imageSrc}}" mode="heightFix"></image>
三元运算
Page({
data: {
randomNumber:Math.random()*10 //随机生成10以内的数
},
})
<view>{
{
randomNumber>=5?'大于等于5':'小于5'}}</view>
算数运算
<view>{
{
randomNumber2*100}}</view>
Page({
data: {
randomNumber2:Math.random().toFixed(2)//随机生成两位小数
},
})
事件绑定
什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
小程序中常用的事件
事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示 :
target 和 currentTarget的区别
target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。
bindtap 的语法格式
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。
① 通过 bindtap,可以为组件绑定 tap 触摸事件
② 在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成e)来接收
页面结构
<!-- 事件绑定 -->
<button type="primary" bindtap="btnTapHandler">按钮</button>
页面数据/函数
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
randomNumber:Math.random()*10 ,//随机生成10以内的数
randomNumber2:Math.random().toFixed(2)//随机生成两位小数
},
// 定义按钮的事件处理函数
btnTapHandler(event){
console.log(event)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
##事件传参与数值同步
在事件处理函数中为 data 中的数据赋值
通过调用this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下 :
.js文件
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
count:0
},
// 定义按钮的事件处理函数
btnTapHandler(event){
console.log(event)
},
// count加1函数
countchange(){
console.log('ok')
this.setData({
//使用setData()函数改变data中的值
count:this.data.count+1 //this.data.count获得data中的count变量
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
.wxml文件
<!-- 事件绑定 -->
<button type="primary" bindtap="btnTapHandler">按钮</button>
<button type="primary" bindtap="countchange">+1</button>
{
{
count}}
运行效果：
事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正 常工作 :
//小程序会把btnHandler(123)当作是一个整体，看作是完整的函数名，
//而不是btnHandler(参数123)
<button type="primary" bindtap="btnHandler(123)">事件传参</button>
可以为组件提供 data-* 自定义属性传参,其中*代表的是参数的名字，在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下 :
页面结构：
<!-- 事件传参 -->
count={
{
count}}
<button type="primary" bindtap="btnHandler" data-info="{
{2}}">+2</button>
最终 :
●data-info中的 info 会被解析为参数的名字
● 数值2会被解析为参数的值
页面数据/函数：
Page({
data: {
count:0
},
// 定义按钮的事件处理函数
btnHandler(event){
console.log(event),
this.setData({
count:this.data.count+event.target.dataset.info
})
},
})
在控制台可以看到：
{info:2}
运行效果：
bindinput 的语法格式
在小程序中,通过 input 事件来响应文本框的输入事件:
①通过bindinput,可以为文本框绑定输入事件;
②在页面的 .js 文件中定义事件处理函数;
页面结构：
<input type="text" bindinput="inputHandler"/>
处理函数：
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
}
// input输入框的事件处理函数
inputHandler(e){
// e.detail.value ,是变化过后文本框最新的值
console.log(e.detail.value)
}
})
运行效果：
实现文本框和 data 之间的数据同步
实现步骤 :
① 定义数据
②渲染结构
③ 美化样式
④ 绑定 input 事件处理函数
页面结构：
<input type="text" value="{
{msg}}" bindinput="inputHandler2"/>
文本框处理函数：
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:"你好啊"
}
// input输入框的事件处理函数
inputHandler2(e){
// e.detail.value ,是变化过后文本框最新的值
this.setData({
msg:e.detail.value
})
},
})
页面渲染 wxss
input {
border : 1px solid rgb(182, 181, 181);
margin : 5px;
padding : 5px;
border-radius : 3px;
}
运行效果：
条件渲染
wx:if
在小程序中,使用 wx:if=“{
{condition}}” 来判断是否需要渲染该代码块
true渲染false不渲染
页面结构：
<!-- 条件渲染 -->
<view wx:if="{
{TrueOrFalse}}">条件渲染</view>
<view wx:if="{
{true}}">A</view>
<view wx:if="{
{false}}">B</view>
<view wx:if="{
{flage==2}}">男</view>
<view wx:elif="{
{flage==0}}">女</view>
<view wx:else>保密</view>
页面数据：
Page({
data: {
TrueOrFalse:true,
flage:1
},
})
运行效果：
< block> 标签
如果要一次性控制多个组件的展示与隐藏,可以使用一个 标签将多个组件包装起来,并在 标签上使用 wx : if 控制属性,示例如下 :
<!-- 条件渲染 -->
<block wx:if="{
{1+1>=0}}">
<view>A</view>
<view>B</view>
<view>C</view>
</block>
hidden属性
wx:if是动态渲染页面结构 hidden是通过属性控制是否显示，还是渲染了，不过没显示罢了
//显示文字 你是单身狗
<view hidden="{
{false}}">你是单身狗</view>
//隐藏文字 你是单身狗
<view hidden="{
{true}}">你是单身狗</view>
wx : if 与 hidden 的对比
① 运行方式不同
● wx : if 以动态创建和移除元素的方式,控制元素的展示与隐藏
● hidden 以切换样式的方式(display : none/block;),控制元素的显示与隐藏
②使用建议
●频繁切换时,建议使用 hidden
●控制条件复杂时,建议使用 wx : if 搭配 wxelif、wx : else 进行展示与隐藏的切换
列表渲染
wx:for
通过 wxfor 可以根据指定的数组,循环渲染重复的组件结构
默认情况下,当前循环项的索引用 index 表示;当前循环项用 item 表示。
<!-- 列表渲染 -->
<view wx:for="{
{arr}}">
索引是：{
{
index}},项是:{
{
item}}
</view>
data: {
arr:["大飞","菜鸡","小j"]
},
手动指定索引和当前项的变量名*
使用 wxfor-index 可以指定当前循环项的索引的变量名 使用 wx : for-item 可以指定当前项的变量名
<!-- 列表渲染 -->
<view wx:for="{
{arr}}">
索引是：{
{
index}},项是:{
{
item}}
</view>
<view wx:for="{
{arr}}" wx:for-index="idx" wx:for-item="im">
索引是：{
{
idx}},项是:{
{
im}}
</view>
wx : key 的使用
类似于 Vue 列表渲染中的 : key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值, 从而提高渲染的效率
data: {
arr:["大飞","菜鸡","小j"],
userList : [
{
id : 1, name : '小花' },
{
id : 2, name : '小黄'},
{
id : 3, name : '小贝'}
]
},
<!-- 列表渲染 -->
<view>~~~~~~~~~~</view>
<view wx:for="{
{arr}}">
索引是：{
{
index}},项是:{
{
item}}
</view>
<view>~~~~~~~~~~</view>
<view wx:for="{
{arr}}" wx:for-index="idx" wx:for-item="im">
索引是：{
{
idx}},项是:{
{
im}}
</view>
<view>~~~~~~~~~~</view>
<view wx:for="{
{userList}}" wx:key="id">
{
{
item.name}}
</view>
WXSS 模板样式
什么是 WXSS
WXSS (WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中的 CSS。
WXSS 和 CSS 的关系
WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。 与 CSS 相比,WXSS 扩展的特性有 :
● rpx 尺寸单位
● @import 样式导入
什么是 rpx 尺寸单位
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
rpx 的实现原理
rpx 的实现原理非常简单 : 鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕, 在宽度上等分为 750 份(即当前屏幕的总宽度为750rpx)。
●在较小的设备上,1rpx 所代表的宽度较小
●在较大的设备上,Irpx 所代表的宽度较大
小程序在不同设备上运行的时候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
rpx 与 px 之间的单位换算*
样式导入
1. 什么是样式导入
使用 WXSS 提供的 @import 语法,可以导入外联的样式表。
2. @import 的语法格式
@import 后跟需要导入的外联样式表的相对路径,用;表示语句结束。
例子：
根目录下创建common文件夹，其中创建common.wxss
/* common/common.wxss */
.username{
color: red;
}
/* pages/list/list.wxss */
@import "/common/common.wxss";
<!--pages/list/list.wxml-->
<!-- 样式导入 -->
<view class="username">李超</view>
全局样式和局部样式
全局样式
- 全局样式 定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
局部样式
在页面的.wxss 文件中定义的样式为局部样式,只作用于当前页面。
注意 :
① 当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式 ② 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式
全局配置
- 全局配置文件及常用的配置项
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下 :
①pages :记录当前小程序所有页面的存放路径
②window : 全局设置小程序窗口的外观
③tabBar :设置小程序底部的 tabBar 效果
④style：是否启用新版的组件样式
全局配置 - window
小程序窗口的组成部分
window可以配置navigationBar和background
了解 window 节点常用的配置项
