微信小程序(二)-语法学习

语法学习

一 模板语法

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

1.数据代码

// pages/block/block.js 本幢事宜
Page({
  /*页面的初始数据*/
  data: {
    msg:"本幢事宜",
    num:10000,
    isGirl:false,
    person:{
      name:"小明",
      age:18,
      height:168
    },
    list:[
      {
        id:0,
        name:"小明"
      },
      {
        id:1,
        name:"小强"
      }
    ]
  }
})

block.js

2.模版代码

<!--pages/block/block.wxml-->
<!-- 1.字符串显示 -->
<view>msg:{{msg}}</view>
<!-- 2.数定类型 -->
<view>num:{{num}}</view>
<!-- 3.布尔值 -->
<view>isGirl:{{isGirl}}</view>
<!-- 4.对象 -->
<view>person:{{person}}</view>
<view>age:{{person.age}}</view>
<!-- 5.在标签的属性中使用,控制台Wxml中查看 -->
<view data-num="{{num}}">自定义属性使用</view>
<!-- 6.使用bool类型充当属性 checked -->
<view>
  <!-- 未选中 -->
  <view><checkbox >默认未选中</checkbox></view>
  <!-- 选中 -->
  <view><checkbox checked>默认选中</checkbox></view>
  <!-- 改变属性,未选中, 属性写法中不能用空格-->
  <view><checkbox checked="{{isGirl}}">改变属性</checkbox></view>
</view>
<view>-------------------------</view>
<!-- 7.运算 ==> 表达示/语句
    1.可以在花括号中加入表达式
    2.指的是简单的运算(数字运算/字符串拼接/逻辑运算等),
      1.数字的加减
      2.字符串的拼接
      3.三元表达式
    3.语句,代码段
      1.if else
      2.switch
      3.do while
      4.for
-->
<view>{{1+2}}</view>
<view>{{"1"+"2"}}</view>
<view>-------------------------</view>
<!-- 8.列表循环
1.wx:for="{{数组}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"
2.wx:key="唯一值",用来提同渲染性能
  1.wx:key 绑定一个普通字符串的时候,这个字符串是循环数组中不重复的对象
  2.wx:key="*this" 表示是一个普通数组 *this表是是循环项
3.只有一层循环时可以不用写(wx:for-item="item" wx:for-index="index")这两项
-->
<view>列表循环</view>
<view wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">
  索引:{{index+1}}--姓名:{{item.name}}
</view>
<view>-------------------------</view>
<!-- 只有一层循环时可以不用写(wx:for-item="item" wx:for-index="index")这两项-->
<view wx:for="{{list}}"
wx:key="id">
  索引:{{index+1}}--姓名:{{item.name}}
</view>
<view>-------------------------</view>
<!-- 9.对象循环
1.wx:for="{{对象}}" wx:for-item="对象的值value" wx:for-index="对象的属性key"
-->
<view>对象循环</view>
<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="name">
{{key}}:{{value}}
</view>
<!-- 10.block占位标签写代码时有,渲染时就没有了 -->
<!-- 11.条件渲染 if, else, if else
1.wx:if="{{true/false}}"
  wx:elif="{{true/false}}"
  wx:else
2.hidden:true隐藏/false为显示
3.使用场景
  1.当标签不频繁切换显示优先使用(直接把标签从结构中移除) wx:if
  2.当标签频繁切换显示优先使用 hidden
    1.通过样式切换显示,display: none;
    2.hidden属性不能与样式display一起使用,否则会被覆盖,hidden就不起作用了
-->
<view>-------------------------</view>
<view>条件渲染</view>
<view wx:if="{{true}}">true显示</view>
<view wx:if="{{false}}">false不显示</view>
<view>-------------------------</view>
<view wx:if="{{false}}">false不显示</view>
<view wx:elif="{{false}}">false不显示</view>
<view wx:else>else显示</view>
<view>-------------------------</view>
<view hidden="{{false}}">hidden为true隐藏/false为显示</view>
<view hidden>hidden为true隐藏/false为显示</view>

block.wxml

微信小程序(三)-事件绑定