小白开发微信小程序之路（2）js、wxml 简述

小技巧

Shift+Alt+ ↓ 复制当前行

demo03.js

js文件中的 data 其实就相当于储存变量，定义一些值，在后期可以通过名称来调用。

// pages/demo03/demo03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  msg:"hello mina",
  num:10000,
  isGirl:false,
  person:{
    age:18,
    height:158,
    weight:90,
    name:"某女生"
  },
  ischecked:false,
  list:[{id:0,name:"猪八戒"},{id:1,name:"天蓬元帅"},{id:0,name:"悟能"}]
  }
})

demo03.wxml

调用在data中存储的数据的方法就是两个花括号加变量名称

基础控件

<!--text 相当于以前web中的 span标签 行内元素 不会换行-->
<!--view 相当于以前web中的 div标签 块级元素 会换行-->
<!-- checkbox相当于以前的复选框 -->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>

元素类型

<!-- 1 字符串 -->
<view >{{msg}}</view>
<!-- 2 数字类型 -->
<view >{{num}}</view>
<!-- 3 布尔类型 -->
<view >是否是女生：{{isGirl}}</view>
<!-- 4 object类型 -->
<view >{{person.age}}</view>
<view >{{person.height}}</view>
<view >{{person.weight}}</view>
<view >{{person.name}}</view>
<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}">自定义属性</view>
<!-- 6 使用bool类型充当属性 
         字符串和花括号之间一定不要有空格，否则会导致识别失败，
         注意下面两行的区别以及效果区别-->
<view >
<checkbox checked="{{isGirl}}"></checkbox>
<checkbox checked=" {{isGirl}}"></checkbox></view>

运算表达式

<!-- 7 运算 => 表达式
    1 可以在花括号中 加入表达式--“语句”
    2 表达式指的是一些简单的数字运算、字符串拼接、逻辑运算等
      还可以使用三元表达式
    3 语句
    a) 复杂的代码段 如 循环、switch -->
<view >{{1+1}}</view>
<view >{{"1"+"1"}}</view>
<view>
    {{10%2==0?'偶数':'奇数'}}
    {{11%2==0?'偶数':'奇数'}}
</view>

循环（列表、对象）

<!-- 8 列表循环
      a) wx:for="{{数组或对象}}"  
         wx:for-item="循环项的名称"
         wx:for-index="循环项的索引"
      b) wx:key="唯一的值"用来提高列表渲染的性能
        1） wx:key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性
        2)  wx:key="*this" 就表示你的数组是一个普通的数组 *this代表循环项
            如：[1,2,3,44,5]或["da","wd","a","csa"]
      c) 当出现数组的嵌套循环时，尤其注意 以下绑定的名称不要重名
         wx:for-item="item"
         wx:for-index="index"
      d)默认情况下，我们不写 wx:for-item="item" wx:for-index="index"
        小程序也会默认把循环项的名称和索引的名称叫做item和index
       所以只有一重循环渲染时，这两句可以省略 
    -->
      
<view>
    <view 
    wx:for="{{list}}"
    wx:for-item="item"
    wx:for-index="index" 
    wx:key="id">
    索引:{{index}}
    --
    值:{{item.name}}
  </view>
</view>
<!-- 9 对象循环
      a)wx:for={{对象}} 
        wx:for-item="对象的值"
        wx:for-index="对象的属性"
      b)循环对象的时候，最好把item和index的名称都修改一下
        wx:for-item="value"
        wx:for-index="key" -->
<view>
    <view> 对象循环</view>
    <view 
    wx:for="{{person}}"
    wx:for-item="value"
    wx:for-index="key"
    wx:key='name'>
    属性:{{key}}
    --
    值:{{value}}
  </view>
</view>

block、条件渲染

<!-- 10 block
        占位符的标签
        写代码时存在
        页面渲染时小程序会把它移除 -->
<view>
    <block
    wx:for="{{list}}"
    wx:for-item="item"
    wx:for-index="index" 
    wx:key="id"
    class='my_list'>
    索引:{{index}}
    --
    值:{{item.name}}
  </block>
</view>

<!-- 11 条件渲染
       a) wx:if="{{true/false}}" 控制显示或隐藏
         1) if,else,if else
            wx:if
            wx:elif
            wx:else
       b) hidden
         1) 在标签上直接加入属性 hidden
         2)hidden="{{true}}"
       c) 什么场景用什么
         1） 当标签不是频繁的切换显示时，优先使用wx:if
             wx:if  工作机理：直接把标签移除
         2)  当标签频繁的切换显示时，优先使用hidden
             hidden 工作机理：为标签添加样式 display：none;
             所以 hidden 属性不要和display一起使用，会被覆盖
      -->
<view >
<view >条件渲染</view>
<view wx:if="{{false}}">显示</view>
<view wx:elif="{{false}}">隐藏</view>
<view wx:else="{{false}}">darling</view>
</view>
<view >
<view >----------</view>
<view hidden >hidden</view>
<view hidden="{{true}}"></view>

</view>