微信小程序（二）模板语法&&样式

最新推荐文章于 2025-07-25 08:00:00 发布

原创

最新推荐文章于 2025-07-25 08:00:00 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文详细介绍了微信小程序中的模板语法，包括数据绑定、运算表达式、列表渲染（数组循环与对象循环）、条件渲染及事件绑定，并强调了在使用hidden属性时的注意事项。此外，还探讨了WXSS样式，如尺寸单位、样式导入、选择器支持以及如何在小程序中使用Less预处理器。

模板语法

数据绑定

WXML 是框架设计的⼀套标签语言，结合基础组件、事件系统，可以构建出页面的结构（建议：在vscode安装插件 => 小程序开发助手）

text：相当于span标签行内元素不换行

view：相当于div标签块级元素会换行

<view> {
  
  { message }} </view>
<view> {
  
  { number }} </view>
<view> <checkbox checked = "{
  
  {isCheck}}"></checkbox></view>
<!--不要直接写checked=false，其计算结果是⼀个字符串-->
<view> {
  
  { person.age }} </view>
<view> {
  
  { person.name }} </view>

Page({
   
   
    data: {
   
   
        message::'Hello MINA!' 
        number:1000
        isCheck:false  //此时checkbox复选框 => 未被选中
        person:{
   
   
        	age:18,
        	height:175cm,
        	weight:60kg,
        	name:"帅哥"
    	}
    }
})

运算（表达式）

<!--1.三元运算-->
<view hidden="{
    
    {flag ? true : false}}"> Hidden </view>
<!--2.算术运算-->
<view> {
  
  {a + b}} + {
  
  {c}} + d </view>
<!--3.逻辑判断-->
<view