微信小程序 - 视图层 | 基础语法
视图层
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
类似前端HTML
一.数据绑定
普通语法
test.wxml
<view>{{ msg }}</view> # 类似Vue插值表达式 渲染test.js文件中Page中data对象中对应变量的值
test.js
Page({
data: {
msg: 'Hello WeChat!'
}
})
组件属性
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
bool类型
不要直接写 checked="false",其计算结果是一个字符串
<checkbox checked="{{false}}"> </checkbox> # 单选框不选中
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view> # 此时不渲染Hidden
Page({
data: {
flag: true,
}
})
算数运算
<view> {{a + b}} + {{c}} + d </view> # 3 + 3 + d
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
逻辑判断
<view wx:if="{{length > 5}}">hello</view> # hello
Page({
data:{
length : 6,
}
})
字符串运算
<view>{{"hello" + name}}</view> # helloword
Page({
data:{
name: 'word'
}
})
wx:for
项的变量名默认为 item
wx:for-item
可以指定数组当前元素的变量名
下标变量名默认为 index
wx:for-index
可以指定数组当前下标的变量名
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
注:内容摘自 小猿取经
微信小程序 - 视图层 | 基础语法的更多相关文章
- 微信小程序视图层介绍及用法
一. 视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 1.1. 数据绑定 1.1.1. 普通写法 <vi ...
- 某客的《微信小程序》从基础到实战视频教程
第 1 部分 微信小程序从基础到实战课程概要 第 1 节 微信小程序从基础到实战课程概要 1.1微信小程序从基础到实战课程概要 第 2 部分 初识微信小程序 第 1 节 微信小程序简 ...
- 微信小程序WXML页面常用语法(讲解+示例)
(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...
- 支付宝小程序与微信小程序开发功能和语法糖不同
最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...
- 微信小程序遮罩层覆盖input失效
问题:微信小程序中,我们常使用遮罩层,如点击按钮弹出下拉框.弹框等等.若在遮罩层下存在input.textarea.canvas.camera.map.video等标签时,会出现遮罩层覆盖失效的问题. ...
- 微信小程序 逻辑层
1. 注册程序小程序APP在小程序的根目录下有一个app.js文件.有App(Object),App() 函数用来注册一个小程序.接受一个 Object 参数,其内便是小程序的生命周期.App() 必 ...
- 前端微信小程序云开发基础讲解
什么是云开发 云开发与传统模式的对比 云开发能力介绍云开发对小程序开发的变革 云开发是微信团队联合腾讯云提供的原生serverless云服务,致力于帮助更多的开发者快速实现小程序业务的开发,快速迭代. ...
- 微信小程序-视图事件
事件 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 ...
- 微信小程序-视图数据绑定
数据绑定 在逻辑层设置数据例如: Page({ data: { message: 'Hello MINA!' } })//设置了一个属性,名称是message 值为Hello MINA! 在视图显示数 ...
随机推荐
- Moving x86 assembly to 64-bit (x86-64)
While 64-bit x86 processors have now been on the market for more than 5 years, software support is o ...
- 赞!这款国产的SSH工具,好用到爆!
之前分享 MobaXterm 时 有小伙伴留言说到了 FinalShell 我本来是一脸蒙蔽的 网上搜了一下 它们家的官网 打开官网 我一度怀疑自己进错了网站 简单(jianlou)的排版 像极了上个 ...
- 《Web前端开发》等级考试样题~以国家“1+X”职业技能证书为标准,厚溥推出Web前端开发人才培养方案
1+x证书Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ 1+x证书Web前端开发初级实操考试样题2019 http ...
- Python字典(Dictionary)update()方法
原文连接:https://www.runoob.com/python/att-dictionary-update.html Python字典(dictionary)update()函数把字典dict2 ...
- vuex 源码分析(五) action 详解
action类似于mutation,不同的是Action提交的是mutation,而不是直接变更状态,而且action里可以包含任意异步操作,每个mutation的参数1是一个对象,可以包含如下六个属 ...
- 【题解】ADAGRAFT - Ada and Graft [SP33331]
[题解]ADAGRAFT - Ada and Graft [SP33331] 传送门:\(\text{Ada and Graft}\) \(\text{[SP33331]}\) [题目描述] 给出一颗 ...
- 个性化你的 Git Log 的输出格式
个性化你的 Git Log 的输出格式
- ubuntu 换源 aliyun
sudo sed -i 's/archive.ubuntu.com/mirrors.aliyun.com/g' /etc/apt/sources.list sudo sed -i 's/securit ...
- 2019-11-25-加强版在国内分发-UWP-应用正确方式-通过win32安装UWP应用
原文:2019-11-25-加强版在国内分发-UWP-应用正确方式-通过win32安装UWP应用 title author date CreateTime categories 加强版在国内分发 UW ...
- Grafana的Docker部署方式
docker run -d -p : --name=grafana544 -v D:/grafana/grafana-/data:/var/lib/grafana -v D:/grafana/graf ...