小程序模块与配置

1、数据绑定

1.1绑定内容

1.1.1 在wxml中用mustache语法将数据包裹起来：

<view>
  {{info}}
</view>

1.1.2 在对应的.js中，把数据定义到data对象中即可：

Page({
  data: {
    info: "hello miniprogram"
  }
})

1.1.3 效果展示

1.2 绑定属性

1.2.1 在wxml中用mustache语法使用数据：

<image src="{{imageSrc}}" mode=""/>

1.2.2 在对应的.js中，把数据定义到data对象中即可：

Page({
  data: {
    imageSrc:"./1.png"
  }
})

1.2.3 效果展示

1.3 三元运算

1.3.1 list.wxml 代码演示：

<view>
  {{randomNumber1*10 >= 5 ? '大于或等于5':'小于5'}}
</view>

1.3.2 在data中定义一个随机数：

Page({
  data: {
  /*生成一个随机数*/
    randomNumber1:Math.random()
  }
})

1.4 算数运算

1.4.1 mustache语法中可以添加算术运算：

<view>
 {{randomNumber2*100}}
</view>

1.4.2 在.js 中定义：

Page({
  data: {
  /*生成一个随机数 并保留两位小数*/
    randomNumber2:Math.random().toFixed(2)
  }
})

2、事件绑定

2.1 小程序中常用的事件

2.1.1 点击按钮的处理函数

在list.wxml 定义一个按钮：

<!-- 按钮的处理函数 -->
<button type="primary" bindtap="clickBtnHandle">点击</button>

在list.js 定义一个函数：

Page({
  clickBtnHandle(e){
    console.log(e);
  }
})

2.1.2 点击按钮 +1 的处理函数 this.setData()

在.wxml 中使用 bindtap绑定事件名称：

<button type="primary" bindtap="changeData">点击 +1</button>

在.js 中定义对应的函数：

Page({
  data: {
    count: 0
  },
  changeData() {
    this.setData({
      count: this.data.count + 1;    
    })
    console.log(this.data.count);
  }
})

3.条件渲染

3.1 使用wx:if=“{{contain}}” 来判断是否需要渲染该代码块

3.1.1 wx:if，wx:elif，wx:else的使用：

<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>

3.1.2 list.js 代码演示：

Page({
  data: {
    type:1
  }
})

3.1.3 效果展示

3.2 结合 < block > 使用 wx:if

3.2.1 < block > 不是一个标签，而是一个容器，不会渲染在页面上

<block wx:if="{{false}}">
  <view> view </view>
  <view> view </view>
  <view> view </view>
</block>

3.3 < hidden > 也可以控制元素的显示与隐藏

• true为隐藏 false为显示

<view hidden="{{flag}}">
  <view> view </view>
  <view> view </view>
  <view> view </view>
</view>

Page({
  data: {
    flag:false
  }
)}

3.3 wx:for 循环遍历

3.3.1 wx:for="{{数组名}}，默认 index 为索引，item 为循环的每一项

<view wx:for="{{array1}}">
  索引是：{{index}}, item项是：{{item}}
</view>

3.3.2 在data中定义数组

Page({
  data: {
   array1:['apple','orange','strawberry']
  }
)}

3.3.3 效果展示

3.4 wx:for 中手动指定索引名和当前项的变量名

3.4.1 使用 wx:for-index=“新的索引名称”，wx:for-item=“新的变量名称”>

<view wx:for="{{array1}}" wx:for-index="idx" wx:for-item="itemName">
  索引是：{{idx}}, item项是：{{itemName}}
</view>

3.5 wx：key的使用

3.5.1 wx:key=“指定key的值”

<view wx:for="{{student}}" wx:key="id">
  你好，我叫 {{item.name}}
</view>

3.5.2 在.js中定义一个新的数组

data: {
   student:[
     {id:1,name:'lyl'},
     {id:2,name:'ly'},
     {id:3,name:'l'}
   ]

3.5.3 效果展示