0基础跟着黑马程序员学微信小程序前端开发Day02（自学笔记）_黑马程序员前端微信小程序开发教程 笔记

---

一、WXML模板语法

1.数据绑定的基本原则

①在data中定义数据，在WXML中使用数据

只需在对应项目的.js文件中，把数据定义到data对象中即可

②Mustache语法的格式

若要将data中绑定到页面中渲染使用Mustache语法（{{}}）包裹变量即可
语法格式如下：

<view>{{绑定的数据名}}</view>
1

Mustache语法的一些应用场景

动态绑定内容

页面数据：

Page({
data{
info:'hello world'
	}
})
1
2
3
4
5

页面结构：

<view>{{info}}</view>
1

动态绑定属性

页面数据：

Page({
data{
    imgSrc:'/images/1.jpg'
	}
})
1
2
3
4
5

页面结构：

<image src="{{imgSrc}}" mode="widthFix"></image>
1

三元运算

页面数据：

Page({
data{
	randomNum1:Math.random() * 10 //生成10以内的随机数
	}
})
1
2
3
4
5

页面结构：

<view>{{randomNum1 >=5 ? '数字大于或等于5' : '数字小于5 '}}</view>//生成的数字可在调试器中的APPdata中查看
1

算数运算

页面数据：

Page({
data{
randomNum2:Math.random().toFixed(2) // 生成随机两位小数
	}
})
1
2
3
4
5

页面结构：

<view>{{randomNum2 * 100}}</view> //将得到的小数*100
1

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 项的配置选项

---

总结

知识点较多，课后还需要消化