“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 26 天，点击查看活动详情”

1.WXML模板语法-数据绑定

1.算数运算

页面数据如下：

页面结构如下：

代码如下：

// index.js
// 获取应用实例
// const app = getApp()

// Page({
//   data: {
//     motto: 'Hello World',
//     userInfo: {},
//     hasUserInfo: false,
//     canIUse: wx.canIUse('button.open-type.getUserInfo'),
//     canIUseGetUserProfile: false,
//     canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
//   },
//   // 事件处理函数
//   bindViewTap() {
//     wx.navigateTo({
//       url: '../logs/logs'
//     })
//   },
//   onLoad() {
//     if (wx.getUserProfile) {
//       this.setData({
//         canIUseGetUserProfile: true
//       })
//     }
//   },
//   getUserProfile(e) {
//     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
//     wx.getUserProfile({
//       desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
//       success: (res) => {
//         console.log(res)
//         this.setData({
//           userInfo: res.userInfo,
//           hasUserInfo: true
//         })
//       }
//     })
//   },
//   getUserInfo(e) {
//     // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
//     console.log(e)
//     this.setData({
//       userInfo: e.detail.userInfo,
//       hasUserInfo: true
//     })
//   }
// })
Page({

  data:{
    info: 'heollo world',
    randomNum1: Math.random()*10,
    randomNum2: Math.random().toFixed(2)
  }
})

<!--index.wxml-->
<!-- <view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view> -->
<view>{{info}}</view>
<view>{{randomNum1 >=5 ? '数字大于或者等于5':'数字小于5'}}</view>

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

运行结果如下：

2.WXML模板语法-事件绑定

1.什么是事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

2.小程序中常用的事件

3.事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示:

4.target和currentTarget的区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。

举例如下：

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。

此时，对于外层的view来说：

e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件。
e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件。

5.bindtap的语法格式

在小程序中，不存在 HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

通过bindtap,可以为组件绑定tap触摸事件，语法如下：

在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event (一般简写成e）来接收。