学习目录
一、WXML模板语法
1.数据绑定的基本原则
①在data中定义数据,在WXML中使用数据
只需在对应项目的.js文件中,把数据定义到data对象中即可
②Mustache语法的格式
若要将data中绑定到页面中渲染使用Mustache语法({{}})包裹变量即可
语法格式如下:
<view>{{绑定的数据名}}</view>
Mustache语法的一些应用场景
动态绑定内容
页面数据:
Page({
data{
info:'hello world'
}
})
页面结构:
<view>{{info}}</view>
动态绑定属性
页面数据:
Page({
data{
imgSrc:'/images/1.jpg'
}
})
页面结构:
<image src="{{imgSrc}}" mode="widthFix"></image>
三元运算
页面数据:
Page({
data{
randomNum1:Math.random() * 10 //生成10以内的随机数
}
})
页面结构:
<view>{{randomNum1 >=5 ? '数字大于或等于5' : '数字小于5 '}}</view>//生成的数字可在调试器中的APPdata中查看
算数运算
页面数据:
Page({
data{
randomNum2:Math.random().toFixed(2) // 生成随机两位小数
}
})
页面结构:
<view>{{randomNum2 * 100}}</view> //将得到的小数*100
2.事件绑定
①什么是事件?
简而言之就是:渲染层与逻辑层之间的一种通讯方式
②常用事件
②事件对象的属性列表
③bindtap 的语法格式,在事件处理函数中为 data 中的数据赋值
.WXML:
.JS
④bindinput 的语法格式,实现文本框和 data 之间的数据同步
步骤:
定义数据
渲染结构
美化样式
绑定 input 事件处理函数
.WXML:
.JS
.WXSS
3.条件渲染
①wx:if
在小程序中,使用 wx:if=“{{condition}}” 来判断是否需要渲染该代码块:
也可以用 wx:elif 和 wx:else 来添加 else 判断:
②结合block使用 wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用一个 标签将多个组件包装起来,并在 标签上使用 wx:if 控制属性,示例如下:
注意: block并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。
③hidden
在小程序中,直接使用 hidden=“{{ condition }}” 也能控制元素的显示与隐藏:
④wx:if 与 hidden 的对比
运行方式不同
wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏
使用建议
频繁切换时,建议使用 hidden
控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
4.列表渲染
①wx:for
二、WXSS模板样式
1.rpx 尺寸单位
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
2.样式导入
在app.wxss中设置全局样式
在各个页面的.wxss中使用@import 语法即可导入
在app.wxss中为全局样式,在页面的.wxss中为局部样式;
注意:
当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式
三、全局配置
1.全局配置文件及常用的配置项
2.window
①小程序窗口组成部分
②window 节点常用的配置项
③设置页面刷新的个性化选项
导航栏的标题、背景色、标题颜色
在app.json中设置window中的相关选项
注意: navigationBarTextStyle 的可选值只有 black 和 white
全局开启下拉刷新功能
在app.json中设置window中把 enablePullDownRefresh 的值设置为 true
设置下拉刷新时窗口的背景色
在app.json中设置window中把 backgroundColor 指定16进制的颜色值
设置下拉刷新时 loading 的样式
在app.json中设置window中backgroundTextStyle 指定 dark 值
注意: backgroundTextStyle 的可选值只有 light 和 dark
3.taBar
①组成部分
②结点的配置项
③每个 tab 项的配置选项
总结
知识点较多,课后还需要消化