微信小程序ToDoList

开始学习微信小程序了，TodoList不知道哪位大佬发明出来的，这个项目真的是太棒，考察基础知识，能把这个项目写出来就算入门了；怕忘了做个笔记

知识点：

• 插值表达式: {{ variable }}
• 事件绑定: bindtap="tapName"
• 属性传值: data-*="{{ value }}"
• 列表渲染: wx:for="{{array}}" wx:key="index"
• 响应式数据: index.js -> Page({ data: { text: "This is page data." } })
• 事件: index.js -> Page({ handleInput(){} })，与date同级

代码

index.wxml

<view class="container">
  <view class="header">
    <input class="ipt" type="text" placeholder="新增待办事项" model:value="{{val}}" bindconfirm="handleInput"/>
  </view>
  <view class="item" wx:for="{{ list }}" wx:key="index">
    <text>{{ item }}</text>
    <view class="close" bind:tap="del" data-index="{{index}}">×</view>
  </view>
</view>

index.js

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

Page({
  data: {
    val: '',
    list: [
      '待办事项1',
      '待办事项2'
    ]
  },

  // 新增待办事项
  handleInput() {
    // var currArr = this.data.arr.push(this.data.val) // TypeError: currArr.push is not a function
    var currList = this.data.list
    currList.push(this.data.val)
    this.setData({
      list: currList,
      val: ''
    })
 
    console.log(this.data.list)
  },
  // 删除待办事项
  del(e) {
    var { index } = e.currentTarget.dataset
    var currList = this.data.list
    currList.splice(index, 1)
    this.setData({
      list: currList
    })
    console.log(this.data.list)
  },

  // 事件处理函数
  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
    })
  }
})

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20rpx 50rpx;
  box-sizing: border-box;
}

.header {
  margin-bottom: 30rpx;
}

.ipt {
  padding: 8rpx 20rpx;
  border: 1px solid #dddddd;
  border-radius: 3px;
  color: #555555;
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 8rpx 0;
  color: #555555;
}

.close {
  display: block;
  margin-left: 20rpx;
  height: 50rpx;
  width: 50rpx;
  text-align: center;
  border: 1px solid #eeeeee;
  border-radius: 50rpx;
  font-size: 50rpx;
  line-height: .8;
  background-color: #eeeeee;
}