【愚公系列】2022年10月 微信小程序-优购电商项目-小程序模板语法
文章目录
- 前言
- 一、数据绑定
- 1. 普通写法
- 2. 组件属性
- 3. bool类型
- 二、运算
- 1. 三元运算
- 2. 算数运算
- 3. 逻辑判断
- 4. 字符串运算
- 5. 注意
- 三、列表渲染
- 1. wx:for
- 2. block
- 四、条件渲染
- 1. wx:if
- 2. hidden
- 3. hidden和wx:if
前言
WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构
建出⻚⾯的结构。
一、数据绑定
1. 普通写法
<view> {{ message }} </view>
Page({data: {message: 'Hello MINA!'}
})
2. 组件属性
<view id="item-{{id}}"> </view>
Page({data: {id: 0}
})
3. bool类型
不要直接写 checked=“false”，其计算结果是⼀个字符串
<checkbox checked="{{false}}"> </checkbox>
二、运算
1. 三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
2. 算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({data: {a: 1,b: 2,c: 3}
})
3. 逻辑判断
<view wx:if="{{length > 5}}"> </view>
4. 字符串运算
<view>{{"hello" + name}}</view>
Page({data:{name: 'MINA'}
})5. 注意
花括号和引号之间如果有空格，将最终被解析成为字符串
三、列表渲染
1. wx:for
项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名
下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能
wx:key 绑定的值 有如下选择
- string 类型，表⽰ 循环项中的唯⼀属性 如
list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"
- 保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是 唯⼀的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"
代码如下：
<view wx:for="{{array}}" wx:key="id">{{index}}: {{item.message}}
</view>
Page({data: {array: [{id:0,message: 'foo',}, {id:1,message: 'bar'}]}
})
2. block
渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素
<block wx:for="{{[1, 2, 3]}}" wx:key="*this" ><view> {{index}}: </view><view> {{item}} </view>
</block>
四、条件渲染
1. wx:if
在框架中，使⽤ wx:if=“{{condition}}” 来判断是否需要渲染该代码块：
<view wx:if="{{false}}">1</view><view wx:elif="{{true}}">2</view><view wx:else>3</view>
2. hidden
<view hidden="{{condition}}"> True </view>
3. hidden和wx:if
wx:if会重新渲染节点，hidden只是隐藏。
【愚公系列】2022年10月 微信小程序-优购电商项目-小程序模板语法相关推荐
- 【愚公系列】2022年10月 微信小程序-优购电商项目-商品分类
文章目录 前言 一.商品分类 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品分类代码 1.相关代码 2.效果 前言 商品分类是指根据一定的管理目的,为满足商品生产.流通.消费活动的全部或部 ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-首页设计
文章目录 前言 一.首页设计 1.首页的业务逻辑 2.涉及的接口数据 3.关键技术 二.首页相关代码 1.⾃定义组件搜索框 2.wx.request封装 3.首页页面 4.效果 前言 对于小程序电商首 ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品支付页面
文章目录 前言 1. 商品⽀付页面设计规范 一.商品支付页面 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品购物车页面相关代码 1.页面代码 2.效果 前言 1. 商品⽀付页面设计规范 第 ...
- 【愚公系列】2022年10月 微信小程序-优购电商项目-⾃定义组件传参
文章目录 前言 一.id和data-xxx传参 二.导航传值 三.父子组件传值 前言 组件传参是小程序中非常重要的一个功能,因为小程序大多都是组件形式存在的. 一.id和data-xxx传参 view ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-授权页面
文章目录 前言 1. 授权页面 一.授权页面 1.业务逻辑 2.涉及的接口数据 二.授权页面相关代码 1.页面代码 2.效果 前言 前言:由于微信官方修改了 getUserInfo 接口,所以现在无法 ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品收藏⻚⾯
文章目录 前言 一.商品收藏⻚⾯ 1.业务逻辑 2. 关键技术 二.商品收藏⻚⾯代码 1.页面代码 2.效果 前言 商品收藏其实是可以衡量商品好坏和受欢迎程度的一个标准,根据标准可以设置商品权重. 商 ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品详情页面
文章目录 前言 一.商品详情⻚⾯ 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品详情⻚⾯相关代码 1.页面代码 2.效果 前言 商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流 ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-意见反馈页面
文章目录 前言 一.意见反馈页面 1. 业务逻辑 2. 关键技术 二.意见反馈页面代码 1.图片上传组件 2.页面代码 3.效果 前言 对于需要收集产品上线后用户实际使用感受的,意见反馈绝对是一个很好 ...
- 【愚公系列】2022年10月 微信小程序-电商项目-商品购物车功能实现
文章目录 前言 一.商品购物车功能实现 二.效果 前言 在电商的核心交易流程中,购物车是其中非常重要的一环,它承担商品加购.价格计算.促销活动展示等功能,与会员系统.商品系统.库存系统.订单系统等紧密 ...
最新文章
- 修改360浏览器 标题栏 显示的文字
- CString 用法
- 复习webpack4之Code Splitting
- 2.3.0配置 spark_配置scala 2.11.12的spark-2.3.0 maven依赖项的问题
- python3爬取数据存入mysql_Python3爬虫爬取数据并存入mysql
- 揭秘硅谷传奇：惠普的创业故事
- c语言程序设计自学网进阶,谭浩强老师C语言教程程序设计
- Linux 档案与目录管理
- AI智能写作指导：Wordhero AI写作英语长文流程
- python基础学习总结
- Ubuntu 建立局域网
- 安全站点导航（感谢backlion整理）
- ps里面怎么插入流程图_Photoshop制作网站流程图详细过程
- 刺激战场春节版年兽全网最详细位置，另附刺激战场更新内容
- 创造与魔法服务器在哪里显示,创造与魔法监狱在哪里 创造与魔法监狱坐标
- ORB-SLAM2 --- KeyFrame::AddConnection函数
- Oracle 的表以及表基本操作
- 机器学习之十大算法入门
- 快速传超大文件的解决方案
- Axure-中继器结构与原理详解