小程序入门教程

13. WXML特性之数据绑定

数据绑定
Page对象的data属性

<!--index.wxml-->
<view>
  <text>{{message}}</text>
</view>

//index.js
Page({
  data: {
    message : "hello, word"
  },
})

flag=false，不隐藏

<!--index.wxml-->
<view hidden='{{flag ? true : false}}'>
  hidden
</view>

//index.js
Page({
  data: {
    flag: false
  },
})

公共属性为

14. WXML特性之列表渲染

<!--index.wxml-->
<view>
  <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
    <view>{{index}}:{{item.name}}</view>
  </block>
</view>

//index.js
Page({
  data: {
    items: [
      { name: "商品A"},
      { name: "商品B" },
      { name: "商品C" },
      { name: "商品D" }
    ]
  }
})

15. WXML特性之条件渲染

<!--index.wxml-->
<view>今天吃什么？</view>
<view wx:if="{{condition === 1}}">
  饺子
</view>
<view wx:elif="{{condition === 2}}">
  米饭
</view>
<view wx:else>
  面食
</view>

//index.js
Page({
  data: {
    // 生成一个1到3的随机整数
    // Math.random()生成[0,1)的浮点随机数
    // Math.floor()下取整
    condition: Math.floor(Math.random() * 3 + 1)
  }
})

16. WXML特性之模板及引用

<!--index.wxml-->
<template name="tempItem">
  <view>
    <view>收件人: {{name}}</view>
    <view>联系方式: {{phone}}</view>
    <view>地址: {{address}}</view>
  </view>
</template>
<template is="tempItem" data="{{...item}}"></template>

//index.js
Page({
  data: {
    item: {
      name: "张三",
      phone: "15515561556",
      address: "中国"
    }
  }
})

文件引用
import 引入目标文件中模板代码块的内容

<!--index.wxml-->
<import src="a.wxml"></import>
<template is="a"></template>

<!--a.wxml-->
<view>Hello, word</view>
<template name="a">
  Hello,wixin
</template>

import有作用域的概念，避免死循环，只会引入模板中的内容，不会引入模块中的模板内容

include 引入目标文件中除了模块代码块的所有内容

<!--index.wxml-->
<include src="a.wxml"></include>
<template is="a"></template>

<!--a.wxml-->
<view>Hello, word</view>
<template name="a">
  Hello,wixin
</template>

19. WXSS特性之选择器

选择器的优先级

27. 生命周期

29. 小程序事件流

<!--index.wxml-->
<view class='container-A' bindtap='clickA'>
  container-A
  <view class='container-B' bindtap='clickB'>
    container-B
    <view class='container-C' bindtap='clickC'>
      container-C
    </view>
  </view>
</view>

//index.js
Page({
  clickA() {
    console.log('click container-A')
  },
  clickB() {
    console.log('click container-B')
  },
  clickC() {
    console.log('click container-C')
  }
})

微信小程序基础内容组件之icon

参考博客

[1]