微信小程序模板语法

模板语法

view 块级元素 相当于div
text 行内元素 一行多个 相当于span

数组数据循环显示

1.wx:for
2. wx:key
1.普通数组 wx;key=“*this”
2.对象数组 wx:key=某个唯一的属性名
3.默认循环项{{item}}
4.默认索引项{{index}}

html：

<view wx:for="{{list3}}" wx:key="country">
{{item.country}}:
<span wx:for="{{item.citys}}" wx:for-item="item2" wx:for-index="index2" wx:key="index2">
    {{index2+1}}:{{item2}} 
</span>
</view>

js：

 list3:[
        {
          country:"中国",
          citys:[
            "北京","上海"
          ]
        },
        {
          country:"美国",
          citys:[
            "纽约","洛杉矶"
          ]
        }
      ]

效果：

3.wx：if

<view wx:if="{{age<18}}">
  未成年
</view>
<view wx:elif="{{age>=18&&age<60}}">
成年
</view>
<view wx:else>
老年人
</view>

age：100，效果：

事件

wxml：

<!-- 
  1 绑定事件关键字 bind  + 事件名   tap
  2 bindtap="函数名称"  可以随便起名字
  3 回到js文件中 定义 事件函数 需要做什么业务
 -->
<view bindtap="getTime">点击 打印时间</view>

js：

Page({
  // 事件函数
  getTime() {
    console.log(formatTime(new Date()))
  }
})

小例子：

wxml：

<view>{{num}}</view>
<!-- <button bindtap="add" >+10</button>
<button bindtap="add100">+100</button> -->

<!-- 
  h5 有规定 如果想要自己定义一些标签的数据 建议 data- 开头 
  事件传递参数
  1 wxml中   data-unit="10"
  2 js中     event.currentTarget.dataset.num
 -->
<!-- data-* 属性用于存储页面或应用程序的私有自定义数据。
存储的数据能够被页面的 JavaScript 中利用，以创建更好的用户体验。 -->

<button data-add="{{10}}"  bindtap="add" >+10</button>
<button data-add="100"  bindtap="add">+100</button>

js：

Page({
  data: {
    num: 0
  },
  // add(){
  // 获取到data中num的值
  //   var num = this.data.num;
  // 对num进行加法计算
  //   num = num + 10;
  // 把num增加后的值重新设置回data中
  //   this.setData({
  //     num:num
  //   })
  // },
  
  add(e) {
    // 事件源对象 存放点击事件触发的时候的一些信息
    // 你点击的是谁 button标签 标签上有什么数据 data-add=10    

    // 获取要增加的数量的值
    console.log(e);
    var data = +e.currentTarget.dataset.num
    this.setData({
      num: this.data.num + data
    })
  }
})