微信小程序开发

生命周期

小程序的生命周期包含小程序应用生命周期和小程序页面生命周期

数据绑定

<view>{{msg}}<view> <!--简单绑定-->
<view id='{{id}}'>测试</view> <!--属性绑定-->
<view wx:if='{{condition}}'>测试</view> <!--控制绑定-->
<view wx:if='{{false}}'>测试1</view> <!--关键字绑定-->

<!--运算绑定-->
<view hidden='{{result ? true : false}}'>该组件将被隐藏</view> 
<view> {{a + b}} + {{c}} + d </view>
<view wx:if="{{x > 5}}">该组件将被显示</view>
<view> {{'你好'+name}}</view>
<view>{{object.key1}} {{array[1]}}</view>
data: {
      object: {
        key1: 'Hello ',
        key2: 'Goodbye '
      },
      array: ['2018', '2019', '2020']
      }

<!--组合绑定-->
<view wx:for='{{[1,2,x,4]}}'>{{item}}</view>
Page({
    data: {
      x : 3
    }
})

数据渲染

这是循环遍历数组

<view wx:for='{{array}}'>学生{{index}}：{{item}}</view>
//JS
Page({
    data:{
        array:[ '张三', '李四', '王五']
    }
})

也可以使用wx:for-item和wx:for-index自定义当前元素和下标的变量名。

<view wx:for='{{array}}' wx:for-index='stuID' wx:for-item='stuName'>
      学生{{stuID}}：{{stuName}}
</view>

//JS
Page({
    data:{
        array:[ '张三', '李四', '王五']
    }
})

<block wx:for="{{[ '张三', '李四', '王五']}}"> 
<!--数组也可以直接写在wx:for中-->
  <view> 学号：{{index}} </view>
  <view> 姓名：{{item}} </view>
</block>