微信小程序基本操作

新建test文件夹

一、数据绑定

在test.js中定义数据

data: {
    name:'tom',
  },

在test.wxml中使用

<text>{{name}}</text>

二、三元运算符

在test.js中定义数据

data: {
    score:90,
}

在test.wxml中使用

<view>{{score>=60?'及格':'不及格'}}</view>

三、算数运算

在test.js中定义数据

data:{
    num:23.44,
}

在test.wxml中使用

乘除都可以

注意：+是拼接

<text>{{num*100}}</text>

四、事件绑定

4.1点击更改数据

在test.js中定义数据

data:{
    num:80,
}

在test.wxml中使用

<text>{{num}}</text>
<button bindtap="getRes">点击+1</button>

点击button按钮+1

在test.js中

data: {
    num:80
},
getRes(){
  this.setData({
      num:this.data.num+1
  })
}

事件中更改data中的数据需要用this.setData方法

4.2事件传值

给按钮绑定事件

<button bindtap="getTotal" data-id="{{10}}">点击</button>

在test.js中

  getTotal(event){
    console.log(event)//触发的事件对象
    let id= event.target.dataset.id;//获取点击事件中传递的参数
    console.log(id)
  }

4.3input数据绑定

wxml中标签如下：

<input value="{{msg}}" bindinput="handleInput" class="inp"></input>
<view>{{msg}}</view>

js中的data定义数据如下：

  data: {
    msg:'hello'
  },
  handleInput(e){
   console.log(e.detail.value)
   this.setData({
    msg:e.detail.value
   })
  },

此时用户输入什么内容，view标签就显示什么内容

4.4bindtap和catchtap的区别

bindtap和catchtap都可以绑定事件，区别是bindtap绑定事件会发生冒泡现象，catchtap不会。

例如：

用bindtap

在wxml中：

<view class="outer" bindtap="outerClick">
  外部按钮
  <view class="inner"  bindtap="innerClick">内部按钮</view>
</view>

js中方法定义如下：

outerClick(){
    console.log('父元素被点击了')
  },
  innerClick(){
    console.log('子元素被点击了')
  },

用catchtap

<view class="outer" catchtap="outerClick">
  外部按钮
  <view class="inner"  catchtap="innerClick">内部按钮</view>
</view>

 五、循环

5.1默认item和index

在wxml中：

<view wx:for="{{goodList}}" wx:key="index">
   <view>{{item.id}}</view>
   <view>{{item.pname}}</view>
   <view>{{item.price}}</view>
</view>

在js中的data中定义：

data: {
    goodList:[
      {id:1,pname:'洗衣机',price:5000},
      {id:2,pname:'电冰箱',price:3000},
      {id:3,pname:'彩电',price:5000},
      {id:4,pname:'空调',price:6000}
    ]
  }

5.2自定义

wx:for-index="    " wx:for-item="     "

<view wx:for="{{goodList}}" wx:for-index="idx" wx:for-item="myitem">
   <view>{{myitem.id}}</view>
   <view>{{myitem.pname}}</view>
   <view>{{myitem.price}}</view>
</view>

六、条件渲染

6.1布尔类型控制元素的显示和隐藏

<view wx:if="{{isShow}}">显示</view>
<view wx:else>隐藏</view>

data中定义数据：

 data: {
    isShow:false
  }

6.2多个条件

wx:if        wx:elif        wx:else

data中定义数据如下：

  data: {
    score:90
  },

wxml中视图如下：

<view wx:if="{{score>=80}}">优异</view>
<view wx:elif="{{score>=60}}">良</view>
<view wx:else>差劲</view>

 6.3block

在页面上不会显示，只是为了集中控制

wxml中视图内容如下：

<block wx:if="{{isShow}}">
  <text>我是标题内容</text>
  <view>我是主体内容</view>
</block>

data中数据如下：

  data: {
    isShow:true
  }

 6.4hidden

data中定义布尔值如下：

  data: {
    isShow:true
  },

wxml中视图内容如下：

<view hidden="{{isShow}}">我是页面上面的内容</view>

data中数据是true，那么view标签的内容就会隐藏，如果data中的数据为false，那么view标签的内容就会显示。

6.5wx:if和hidden的区别

1. 运行方式不同 wx:if是动态创建和移除元素的方式来实现元素的显示和隐藏，hidden是通过更改元素的display:block；和display:none；来控制元素的显示和隐藏。
2. 效率不同 频繁切换时候建议使用hidden，但是如果条件较多的时候建议使用wx:if等。