当前位置：首页 > news >正文

002微信小程序模板与配置

news 2025/6/19 11:35:47

微信小程序模板与配置

1.WXML 模版语法
- 1.1 数据绑定
- 1.2事件绑定
- 1.3 条件渲染
- 1.4 列表渲染
2. WXSS 模版样式
- 2.1 WXSS 和 CSS的关系
- 2.2 rpx
- 2.3 样式导入
- 2.4 全局样式和局部样式
3. 全局配置
- 3.1 Window
- 3.2 tabBar

1.WXML 模版语法

1.1 数据绑定

数据绑定的基本原则
- 在data中定义数据
- 在WXML中使用的数据

在data中定义页面的数据

在页面对应的.js文件中，把数据定义到data对象中即可

Page({data: {//字符串类型的数据info: 'inti data',//数组类型的数据msgList: [{msg: 'hello'}, {msg: 'world'}]}
})

Mustache语法的格式
- 把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可
```

<view>{{要绑定的数据名称}}</view>
```
Mustache语法的应用场景
- 绑定内容
- 绑定属性
- 运算（三元运算、算数运算等）

动态绑定内容

Page({data: {//字符串类型的数据info: 'inti data'}
})

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

动态绑定属性

Page({data: {imgSrc:'路径'}
})

<image src="{{imgSrc}}"></image>

三元运算

Page({data: {randomNumber: Math.random() * 10 //100以内的随机数}
})

<view>{{randomNumber >= 5 ? '随机数字大于或等于5' ： '随机数小于5'}}</view>

算数运算

Page({data: {randomNumber: Math.random().toFixed(2) //生成一个带两位小数的随机数}
})

<view>生成100以内的随机数：{{randomNumber * 100}}</view>

1.2事件绑定

事件：渲染层到逻辑层的通讯方式。通过时间可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

在这里插入图片描述

小程序常用的事件

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

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象 event，它的属性为：

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

target 和 currentTarget的区别
- target 是触发该事件的源头组件，而currentTarget是当前事件所绑定的组件。
bindtap语法格式
- 通过bindtap，可以为组件绑定tap触摸事件
```
<button type="primary" bindta="btnTapHandler">按钮</button>
```
- 在页面的.js文件中定义对应的事件处理函数，事件参数通过形参 event（简写 e）来接收：
```
Page({binTapHandler(e){ //按钮的 tap 事件处理函数console.log(e) //事件参数对象 e}
})
```
事件在处理函数中为 data中的数据赋值
- 通过调用 this.setData(dataObject) 方法，可以给页面 data中的数据重新赋值
```
Page({data:{count: 0},//修改 count 的值changeCount(){this.setData({count: this.data.count +1})}
})
```

事件传参

小程序不能在绑定事件的同时为事件处理函数传递参数
而是使用 data-* 自定义属性传参， * 代表的是参数名字
```
<button bidtap="btnHandler" data-info="{{2}}">事件传参</button>
```

通过 event.target.dataset.参数名即可获取到具体参数值

Page({binTapHandler(event){ //按钮的 tap 事件处理函数//dataset 是一个对象，包含 data-* 传递的参数项console.log(event.target.dataset) //通过 dataset 可以访问到具体参数的值console.log(event.target.dataset.info) }
})

bindinput的语法格式

通过bindinput，可以为文本框绑定输入事件：
```
<input bindinput="inputHandler"></input>
```

.js 文件中定义事件处理函数：

inputHandler(e){//e.detail.value 是变化过后，文本框最新的值console.log(e.detail.value)
}

文本框和data之间的数据同步

定义数据
```
Page({data:{msg: '你好'}
})
```

渲染结构

<input value="{msg}" bindinput="iptHandler"></input>

美化样式:

input{/*添加 1 像素宽、实线、颜色为#ee(浅灰色)的边框*/border: 1px solid #eee;/*输入框内部内容与边框之间的距离为 5 像素*/padding: 5px;/*输入框与其他元素之间的外部间距为 5 像素*/margin: 5px;/*输入框的边框添加圆角效果，半径为3像素*/border-radius: 3px;
}

绑定input事件处理函数

//文本框内容改变的事件
iptHandler(e){this.setData({//通过 e.detail.value 获取文本框的最新数值msg: e.detail.valu})
}

1.3 条件渲染

wx:if

小程序中，使用 wx:if=“{condition}” 判断是否渲染该代码块
```
<view wx:if="{{condition}}">True</view>
```

wx:elif 和 wx:else 来天剑 else 判断：

<view wx:if="{{condition}}">True</view>
<view wx:elif="{{condition}}">True</view>
<view wx:else="{{condition}}">True</view>

结合<block>使用 wx:if
- 要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block>标签将多个组件包装起来，在 <block>标签上使用 wx:if 控制属性
- <block>不是一个组件，只是一个包裹性的容器，不会在页面中做任何渲染
```
<block wx:if="{{condition}}"><view> view1 </view><view> view2 </view>
</block>
```
hidden：在小程序中，直接使用 hidden=“{{condition}}” 也可以控制元素的显示与隐藏
```
<vilew hidden="{{condition}}">条件为 true 隐藏，为false 显示</vilew>
```
wx:if 与 hidden 的对比
- 运行方式不同
  - wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
  - hidden以切换样式的方法（display:none/block;）,控制元素的显示与隐藏
- 使用建议
  - 频繁切换，用 hidden
  - 控制条件复杂，使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

1.4 列表渲染

wx:for：通过wx:for可以根据指定的数组，循环渲染重复的组件结构
- 默认的索引和当前循环项用， index与item
```
<view wx:for="{{array}}">索引是：{{index}} 当前项是：{{item}}
</view>
```
手动指定索引与当前项的变量名*
- 使用 wx:for-index 指定当前索引项的索引的变量名
- 使用 wx:for-item 指定当前项的变量名
```
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">索引是：{{idx}} 当前项是：{{itemName}}
</view>
```

wx:key 的使用

小程序在实现列表渲染时，为渲染出来的列表指定唯一的key值，从而提高渲染的效率

//data数据
data:{userList:[{id: 1, name: '小红'},{id: 2, name: '小黄'},{id: 3, name: '小白'}]
}

//wxml 结构
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

2. WXSS 模版样式

WXSS（WeiXin StyleSheets）是一套样式语言，用于美化WXML的组件样式。

2.1 WXSS 和 CSS的关系

WXXSS具有CSS大部分特性（通用的选择器，通用的样式规则），同时还进行了扩充以及修

rpx 尺寸单位
@import样式导入

2.2 rpx

rpx 尺寸单位
- rpx（responsive pixel）：用来解决屏适配的尺寸单位
rpx的实现
- rpx把所有设备的屏幕，在宽度上等分为 750 份
rpx 与 px 之间的单位换算
- 在iPhone6上，屏幕宽度为 375px，共有 750个物理像素，等分为 750rpx
  - 750rpx = 375px = 750 物理像素
  - 1rpx = 0.5px = 1 物理像素

2.3 样式导入

使用 WXSS提供的@import语法，可以导入外联的样式表

@import的语法格式： @import后跟需要导入的外联式表的相对路径，用 ; 表示语句结束。
```
@improt "路径";
.middle-p{padding:15px;
}
```

2.4 全局样式和局部样式

全局样式：定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
局部样式：在页面的 .wxss文件中定义的样式为局部样式，只作用与当前页面
- 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
- 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局样式

3. 全局配置

小程序跟目录下的app.json文件是小程序的全局配置文件。常用的配置项：

pages：记录当前小程序所有页面的存放路径
window：全局设置小程序窗口的外观
tabBar：设置小程序底部的 tabBar效果
style：是否用新版的组件样式

3.1 Window

在这里插入图片描述

window 节点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	while	导航栏标题颜色，仅支持 black/while
backgroundColor	HexColor	#ffffff	窗口的背景颜色
backgroundColor	String	dark	下来 loading的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否全局开启下来刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

导航栏的标题
- 步骤：app.json => window => navigationBarTitleText
导航栏的背景色：
- 步骤：app.json => window => navigationBarBackgroundColor
导航栏的标题颜色
- 步骤：app.json => window => navigationBarTextStyle
全局开启下拉刷新功能：下拉刷新时移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重写加载页面数据的行为。
- 步骤：app.json => window => enablePullDownRefresh 的值设置为 true
下拉刷新时窗口的背景色
- 步骤：app.json => window => backgroundColor 指定 16进制的颜色值
下拉刷新时 loading 的样式：当全局开启下拉刷新功能之后，默认窗口的 loading样式为白色
- 步骤：app.json => window => backgroundTextStyle 指定 dark 值
上拉触底的距离：是移动端的专有名词，通过手指在屏幕上的上啦滑动操作，从而加载更多数据的行为，默认距离为 50px
- 步骤：app.json => window => onReachBottomDistance 设置新的数组

3.2 tabBar

tabBar是移动端应用常见的页面效果，用于使用多页面的快速切换。小程序通常将其分为：底部 tabBar 顶部 tabBar；tabBar只能配置最少 2 个、最多5个tab页签，当渲染顶部 tabBar是，不延时 icon，只显示文本

tabBar的6个组成部分：

backgroundColor：tabBar 的背景色
selectedIconPath：选中时的图片路径
borderStyle：tabBar 上边框的颜色
iconPath：未选中时的图片路径
selectedColor：tab上的文字选中时的颜色
color：tab上文字的默认（未选中）颜色

在这里插入图片描述

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
selectedIconPath	String	否	选中时的图标路径；当postion为top时，不显示 Icon