微信小程序数据绑定与模板语法
微信小程序数据与模板配置
总述: 对应的语法格式与vue的语法格式类似
wxml数据绑定
WXML 模板语法 - 数据绑定。数据绑定的基本原则
- 在 data 中定义数据
- 在 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 之间的数据同步
实现步骤:
- 定义数据
- 渲染结构
- 美化样式
- 绑定 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 语法,可以导入外联的样式表。
@import 的语法格式
/*common.wxss*/
view{color: red;
}
/* list.wxss*/@import "common.wxss";
全局样式和局部样式
在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
注意:
当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式.
微信小程序数据绑定与模板语法相关推荐
- 微信小程序学习day01-WXML 模板语法
目录 WXML 模板语法 - 数据绑定: 1.数据绑定的基本原则 2. 在 data 中定义页面的数据 3. Mustache 语法的格式 4. Mustache 语法的应用场景 5. 动态绑定内容 ...
- 微信小程序开发02(模板语法与事件绑定)
模板语法与事件绑定
- 【微信小程序】WXML模板语法 —— 数据绑定
1.1.数据绑定的基本原则 (1)在data中定义数据 (2)在WXML中使用数据 1.2.在data中定义页面的数据 1.2.1.动态绑定数据 //在页面对应的.js文件中,把数据定义到data对象 ...
- 【微信小程序】-- WXML 模板语法 - 数据绑定(九)
- 【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap input (十)
- 微信小程序:WXML 模板
微信小程序:WXML 模板 一.WXML 模板 网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来 ...
- TP5之微信小程序推送模板消息
TP5之微信小程序推送模板消息 1.获取formId并且存储起来,获取formId方法见: https://blog.csdn.net/u010481239/article/details/78239 ...
- 32套企业店铺展示微信小程序源码模板集合
32套企业店铺展示微信小程序源码模板集合,前端小程序模板,有门锁.水果.母婴等行业 源码优势 此版本微信小程序为开发版,没有错误,上传就可以用.(无后台!不用后台服务器!) 如果你不想那么麻烦,就想展 ...
- 微信小程序基础篇-模板与配置
本篇学习目标 使用WXML渲染模板语法渲染页面结构 使用WXSS样式美化结构 使用app.json对项目进行全局配置 使用page.json对页面进行个性化配置 如何发起网络请求 1.WXML模板语法 ...
最新文章
- java struts2配置_Struts2初始化配置的问题
- python爬虫获取的网页数据为什么要加[0-python爬虫解析页面数据的三种方式
- 数据结构和算法分析: 第五章 散列
- [YTU]_2353 ( 长方柱类【C++ 类定义】)
- 数字图像处理:第十章 离散图象变换
- python 计时器 timeit repeat 计算(语句)(函数)耗时 时间 运行时长
- android string json,安卓之String json解析
- 课程2 谈论音乐行业的趋势
- 关于android Intent意图的一点心得
- Linux操纵零碎下设置JSP开发环境的方式
- 风控分析秘籍R-I-S-K
- JavaBean的实用工具Lombok(省去get、set等方法)
- c语言吧五子棋纯干货注释,请帮我注释下这个五子棋程序
- 用MSYS2编译diction程序
- 投票丨鹿晗关晓彤曝光恋情 是如何搞垮新浪服务器的
- 电脑计算机无法找到脚本文件夹,电脑开机老是提醒无法找到脚本文件的处理方法...
- 一文掌握Pandas可视化图表
- linux 下动手实现bash -lR 命令
- 超好用的PDF在线编辑方法
- Google Earth Engine(GEE)——ASTER全球水体数据库(ASTWBD)第1版