0
点赞
收藏
分享

微信扫一扫

微信小程序数据绑定与模板语法

八怪不姓丑 2022-02-01 阅读 72

微信小程序数据与模板配置

总述: 对应的语法格式与vue的语法格式类似

wxml数据绑定

WXML 模板语法 - 数据绑定。数据绑定的基本原则

  1. 在 data 中定义数据
  2. 在 WXML 中使用数据

在 data 中定义页面的数据:在页面对应的 .js 文件中,把数据定义到 data 对象中即可
在这里插入图片描述

Mustache 语法的格式(插值表达式)

把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。语法格式为:
在这里插入图片描述

Mustache 语法的应用场景

  • 绑定内容
  • 绑定属性
  • 运算(三元运算、算术运算等)

动态绑定数据

<!-- 数据绑定 -->

<!-- 动态绑定 -->
<view>{{info}}</view>
<text>{{info}}</text>
Page({

 /**
  * 页面的初始数据
  */
 data: {
    info:"hello world"
 },
........

在这里插入图片描述
属性绑定

<!-- 数据绑定 -->

<!-- 动态绑定 -->
<view>{{info}}</view>
<text>{{info}}</text>
<!-- 属性绑定-->
<image src="{{src}}"></image>
data: {
    info:"hello world",
    src:"/images/8.jpg"
 },

在这里插入图片描述
数据运算

在这里插入图片描述

data: {
    info:"hello world",
    src:"/images/8.jpg",
    randomnum:Math.random() *10 //生成10以内的随机数
 },

事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理
在这里插入图片描述
小程序中常用的事件
在这里插入图片描述
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示
在这里插入图片描述
bindtap 的语法格式
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。
通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:
在这里插入图片描述
在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e) 来接收:
在这里插入图片描述
在这里插入图片描述

在事件处理函数中为 data 中的数据赋值

通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:
在这里插入图片描述

事件传参

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作:
在这里插入图片描述

因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123) 的事件处理函数。

在这里插入图片描述

可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:

info 会被解析为参数的名字
数值 2 会被解析为参数的值

在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:

在这里插入图片描述
之后实现一个案例来完成通过参数的传递来实现count值加2

<!--按钮绑定事件-->
<button type="primary" bindtap="btnTapHander">按钮</button>

<view>{{count}}</view>

<button type="warn" plain="true" bindtap="increase">自增</button>

<button bindtap="increase2" data-info="{{count}}">值加二</button>

increase(e){
    this.setData({
        count:this.data.count+1
    })
 },

increase2(e){
    this.setData({
        count: e.target.dataset.info+2
    })
},

 btnTapHander(e){
    console.log(e);
 },

在这里插入图片描述

数据同步

bindinput 的语法格式

在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:
通过 bindinput,可以为文本框绑定输入事件:
在这里插入图片描述

在这里插入图片描述

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

实现步骤:

  1. 定义数据
  2. 渲染结构
  3. 美化样式
  4. 绑定 input 事件处理函数

类似与vue指令中的双向绑定

<text>{{msg}}</text>
<input bindinput="bind2" value="{{msg}}"></input>
data: {
    count:1,
    msg:'helloWorld',
 },
bind2(e){
    this.setData({
        msg:e.detail.value
    })
 },

在这里插入图片描述

模板语法

条件渲染

条件渲染类似于vue中的v:if指令
wx:if
在小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:
在这里插入图片描述
也可以用 wx:elif 和 wx:else 来添加 else 判断:
在这里插入图片描述
如果要一次性控制多个组件的展示与隐藏,可以使用一个 标签将多个组件包装起来,并在 标签上使用 wx:if 控制属性,示例如下:

<!-- w:if测试 -->
<view wx:if="{{condition}}">True</view>

<!-- w:if else测试 -->
<view wx:if="{{type ===1}}"></view>
<view wx:elif="{{type ===2}}"></view>
<view wx:else>保密</view>

<block wx:if="true">
    <view>view1</view>
    <view>view2</view>
    <view>view3</view>
</block>

注意: 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。

在小程序中,直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏:

在这里插入图片描述

列表渲染

列表渲染 wx:for 通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
在这里插入图片描述

<!-- w:for指令测试 -->
<view wx:for="{{array}}" wx:for-index='idex' wx:for-item="itemname">
    <text>索引是{{idex}}</text>
    <text>当前项是{{itemname}}</text>
</view>
data: {
    array:['苹果','华为','小米']
 },

类似于 Vue 列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值,从而提高渲染的效率,示例代码如下:

<!-- w:for指令测试 -->
<view wx:for="{{array}}" wx:key="id">
    {{item.id}} {{item.name}}
</view>
data: {
    array:[
       {id:1,name:'小旭'},
       {id:2,name:'小明'},
       {id:3,name:'小李'}
    ]
 },

在这里插入图片描述

WXSS 模板样式

WXSS (WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中的 CSS。

XSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。
与 CSS 相比,WXSS 扩展的特性有:

  • rpx 尺寸单位
  • @import 样式导入

在这里插入图片描述
什么是 rpx 尺寸单位?
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。

rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,在宽度上等分为 750 份(即:当前屏幕的总宽度为 750rpx)。
在较小的设备上,1rpx 所代表的宽度较小
在较大的设备上,1rpx 所代表的宽度较大

小程序在不同设备上运行的时候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。

rpx 与 px 之间的单位换算*

在 iPhone6 上,屏幕宽度为375px,共有 750 个物理像素,等分为 750rpx。则:
750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1物理像素

在这里插入图片描述

样式导入

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

在这里插入图片描述

/*common.wxss*/
view{
	color: red;
}
/* list.wxss*/

@import "common.wxss";

在这里插入图片描述

全局样式和局部样式

在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。

注意:
当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式.

举报

相关推荐

0 条评论