微信小程序开发基础

1.标签

1.text相当于以前web中的span标签 行内元素 不会换行
2.view相当于以前web中国的div标签 块级元素 会换行
3.checkbox 以前的复选框标签

<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>

效果：

2.数字类型

<!-- 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类型充当属性 checked
    1.字符串和花括号之间一定不要存在空格否则会导致识别失败 -->
 <view>
  <checkbox checked="{{isChecked}}"></checkbox>
</view>

js

Page({
  data: {
    msg: "hello mina",
    num: 1000,
    isGirl: false,
    person: {
      age: 18,
      height: 177,
      weight: 106,
      name: '大姐姐'
    }
})

效果:

3.列表循环

1.wx:for = "{{数组或对象}}"" wx:for-item="循环项的名称" wx-for-index="循环项的索引"

2.wx:key = "唯一的值"用来提高列表渲染的性能
1.wx:key 绑定一个普通的字符串的时候 那么这个字符串名称肯定是 循环数组中的对象的唯一属性
2.wx:key ="this”就表示I你的数组是一个普通的数组this表示是循环项
[1,2,3,44,5]
["1", "222", "adfdf"]

3.当出现数组的嵌套循环的时候尤其要注意以下绑定的名称不要重名
wx :for-item="item" wx :for-index="index"

4.默认情况下我们不写 wx : for-item="item" wx : for-index="index" 小程序也会把循环项的名称和索引的名称item和index 只有一层循环的话（wx:for-item="item" wx:for-index="index"）可以省略

<view>
  <view 
  wx:for="{{list}}" 
  wx:for-item="item" 
  wx:for-index="index"
  wx:key="id"
  >
    索引:{{index}}
    --
    值:{{item.name}}
  </view>
</view> 

4.对象循环

1.wx:for="{{对象}} wx:for-item="对象的值" wx-for-index="对象的属性"
2.循环对象的时候最好把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="age"
  >
    属性:{{key}}
    --
    值:{{value}}
  </view>
</view>

5.block

1.占位符的标签
2.写代码的时候 可以看到这个标签存在
3.页面渲染 小程序会把它移除掉

<view>
  <block 
  wx:for="{{list}}" 
  wx:for-item="item" 
  wx:for-index="index"
  wx:key="id"
  class="my_list"
  >
    索引:{{index}}
    --
    值:{{item.name}}
  </block>
</view>

6.条件渲染

1.wx:if ="{{true/flase}}"
wx:elif

2.hidden
1.在标签上直接加入属性 hidden
2.hidden="{{true}}"

3.什么场景下用哪个
1.当标签不是频繁地切换显示 优先使用 wx:if。 直接把把标签从 页面结果给移除掉
2 当标签频繁地切换显示时 优先使用hidden。通过添加样式的方式来切换显示