视图层

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'
}]
}
})

注:内容摘自 小猿取经

微信小程序 - 视图层 | 基础语法的更多相关文章

  1. 微信小程序视图层介绍及用法

    一. 视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 1.1. 数据绑定 1.1.1. 普通写法 <vi ...

  2. 某客的《微信小程序》从基础到实战视频教程

    第 1 部分 微信小程序从基础到实战课程概要   第 1 节 微信小程序从基础到实战课程概要   1.1微信小程序从基础到实战课程概要   第 2 部分 初识微信小程序    第 1 节 微信小程序简 ...

  3. 微信小程序WXML页面常用语法(讲解+示例)

    (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...

  4. 支付宝小程序与微信小程序开发功能和语法糖不同

    最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...

  5. 微信小程序遮罩层覆盖input失效

    问题:微信小程序中,我们常使用遮罩层,如点击按钮弹出下拉框.弹框等等.若在遮罩层下存在input.textarea.canvas.camera.map.video等标签时,会出现遮罩层覆盖失效的问题. ...

  6. 微信小程序 逻辑层

    1. 注册程序小程序APP在小程序的根目录下有一个app.js文件.有App(Object),App() 函数用来注册一个小程序.接受一个 Object 参数,其内便是小程序的生命周期.App() 必 ...

  7. 前端微信小程序云开发基础讲解

    什么是云开发 云开发与传统模式的对比 云开发能力介绍云开发对小程序开发的变革 云开发是微信团队联合腾讯云提供的原生serverless云服务,致力于帮助更多的开发者快速实现小程序业务的开发,快速迭代. ...

  8. 微信小程序-视图事件

    事件 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 ...

  9. 微信小程序-视图数据绑定

    数据绑定 在逻辑层设置数据例如: Page({ data: { message: 'Hello MINA!' } })//设置了一个属性,名称是message 值为Hello MINA! 在视图显示数 ...

随机推荐

  1. 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 ...

  2. 赞!这款国产的SSH工具,好用到爆!

    之前分享 MobaXterm 时 有小伙伴留言说到了 FinalShell 我本来是一脸蒙蔽的 网上搜了一下 它们家的官网 打开官网 我一度怀疑自己进错了网站 简单(jianlou)的排版 像极了上个 ...

  3. 《Web前端开发》等级考试样题~以国家“1+X”职业技能证书为标准,厚溥推出Web前端开发人才培养方案

    1+x证书Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ 1+x证书Web前端开发初级实操考试样题2019 http ...

  4. Python字典(Dictionary)update()方法

    原文连接:https://www.runoob.com/python/att-dictionary-update.html Python字典(dictionary)update()函数把字典dict2 ...

  5. vuex 源码分析(五) action 详解

    action类似于mutation,不同的是Action提交的是mutation,而不是直接变更状态,而且action里可以包含任意异步操作,每个mutation的参数1是一个对象,可以包含如下六个属 ...

  6. 【题解】ADAGRAFT - Ada and Graft [SP33331]

    [题解]ADAGRAFT - Ada and Graft [SP33331] 传送门:\(\text{Ada and Graft}\) \(\text{[SP33331]}\) [题目描述] 给出一颗 ...

  7. 个性化你的 Git Log 的输出格式

    个性化你的 Git Log 的输出格式

  8. ubuntu 换源 aliyun

    sudo sed -i 's/archive.ubuntu.com/mirrors.aliyun.com/g' /etc/apt/sources.list sudo sed -i 's/securit ...

  9. 2019-11-25-加强版在国内分发-UWP-应用正确方式-通过win32安装UWP应用

    原文:2019-11-25-加强版在国内分发-UWP-应用正确方式-通过win32安装UWP应用 title author date CreateTime categories 加强版在国内分发 UW ...

  10. Grafana的Docker部署方式

    docker run -d -p : --name=grafana544 -v D:/grafana/grafana-/data:/var/lib/grafana -v D:/grafana/graf ...