微信小程序入门（三）
2024-08-31 18:57:38
11.开发框架基本介绍
四个组成部分，其它三个前面介绍过了，主要WXS：
WXS:对wxml增强的一种脚本语言，可以对请求的数据进行filter或者做计算处理，帮助wxml快速构建出页面结构。
12.WXML之语法
概念
WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合组件、WXS和时间系统，可以构建出页面的结构。
语法
<标签名 属性名=“属性名1” 属性名=“属性名2”...>
...
</标签名>
简单例子
<view>
Hello World!
<view>
hello china!
</view>
</view>
13.WXML特性之数据绑定
WXML四个特性
- 数据绑定
- 列表渲染
- 条件渲染
- 模板引用
简单实例
第一种
index.wxml
<view>
<text>{{message}}</text>
</view>
index.js
Page({
data:{
message:"Hello World"
}
})
第二种
index.wxml
<view hidden='{{flag ? true : false}}'>
Hidden
</view>
Page({
data:{
flag: false
}
})
WXML属性
14.WXML特性之列表渲染
实例：
index.wxml
<view>
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
<view>{{index}}:{{item.name}}</view>
</block>
</view>
index.js
Page({
data:{
items: [
{name:"商品A"},
{ name: "商品B" },
{ name: "商品C" },
{ name: "商品D" },
{ name: "商品E" }
]
}
})
显示结果
说明
- 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
- 使用 wx:for-item 可以指定数组当前元素的变量名，
- 使用 wx:for-index 可以指定数组当前下标的变量名：
- wx:key 来指定列表中项目的唯一的标识符。
15.WXML特性之条件渲染
实例
index.wxml
<view>今天吃什么？</view>
<view wx:if="{{condition === 1}}">饺子</view>
<view wx:if="{{condition === 2}}">馒头</view>
<view wx:else>米饭</view>
index.js
Page({
data:{
condition:Math.floor(Math.random()*3+1)
}
})
随机结果：
最新文章
- 使用bootstrap 弹出效果演示
- 为什么PCB上的单端阻抗控制50欧姆
- 关于 Maven 的插件maven-war-plugin
- 建模算法（四）——动态规划
- c#中的partial关键字(转)
- [原创]java WEB学习笔记78：Hibernate学习之路---session概述，session缓存(hibernate 一级缓存)，数据库的隔离级别，在 MySql 中设置隔离级别，在 Hibernate 中设置隔离级别
- Ubuntu下手动安装VMware Tools步骤
- repeater复杂表格的显示
- 一个简单的ORM制作(SQL帮助类)
- CSS3立体文字最佳实践
- C语言实现通讯录
- VSTO 学习笔记（十二）自定义公式与Ribbon
- 转每天一个linux命令（7）：mv命令
- 第六周java学习总结
- jsp+servlet include引入文件指令
- 关于读取excel 和 写excel
- 一个RDBMS左连接SQL执行计划解析
- 深深感受 Promise.all 带来的速度提升
- 查看当前正在运行的python进程
- Inside The C++ Object Model(三)