首先看下这个页面的wxml代码：
<view class="bg-img">
<image src="https://7472-treasure-applet-9gwf709829eeb305-1310751728.tcb.qcloud.la/images/bj1.jpeg?sign=8a8a8e085bc534b63d27aec3fdd525c2&t=1661330012" class="bg-image" mode="scaleToFill"></image>
<view class="container">
<view class="header" style="position: fixed;top: 0;width: 600rpx;">
<image src="/pages/images/add.png" bindtap="addTodoHandle"></image>
<input type="text" placeholder="输入今天要完成的事吧..." value="{{input}}" bindinput="inputChangeHandle" bindconfirm="addTodoHandle">
</input>
</view>
<block wx:if="{{todos.length}}">
<view class="todos" style="position: fixed;top: auto;width: 600rpx;">
<view class="item{{item.complete?' complete':' '}}" wx:for="{{todos}}" bindtap="toggleToHandle" data-index="{{index}}"><!--wx:for的任务就是遍历数组的对象个数-->
<!-- 图标显示 -->
<icon type="{{item.complete?'success':'circle'}}"></icon>
<text>{{item.name}}</text>
<icon type="clear" size="16" catchtap="DeleteHandle" data-index="{{index}}"></icon> <!--图标的大小利用size属性即可调整-->
</view>
<view>
<text wx:if="{{leftCount}}">还有 {{leftCount}} {{leftCount>1?'未完成':'未完成'}} 事件</text>
</view>
</view>
<view class="footer" style="position: fixed;bottom:0;width: 600rpx;">
<button style="width: auto;" bindtap="toggleAllHandle">全选</button>
<button style="width: auto;" bindtap="clearHandle">清除</button>
</view>
</block>
<view wx:else>
<text>您还没有开始记录任何事件哦</text>
</view>
</view>
</view>首先是添加了一个背景图片，通过<image>标签中的src属性，传入背景图片的url，这个图片我也是保存在腾讯云上的，所以现在也是看不到了，淡淡的忧桑！！！
然后就是加入<input>标签了，这里是作为内容输入的地方，并且绑定了两个事件：inputChangeHandle和addTodoHandle
这两个事件写在对应的js文件里：
//1,先让按钮点击时执行一段代码
addTodoHandle:function(){
//点击按钮之后执行事件
//console.log(this.data.input) //拿到文本框的值
if(!this.data.input) return
var todos=this.data.todos
console.log("todos------------------",todos)
todos.push({
name:this.data.input,
complete:false,
allComplete:false
})
wx.setStorage({
key:"todos",
data:todos
})
console.log(wx.getStorageSync('todos'))
//必须显式的通过setData来改变数据，这样界面才会得到变化
this.setData({todos:todos,input:'',leftCount: this.data.leftCount+1})
},
//2，拿到文本框里面的值
//2.1由于小程序的数据绑定是单向的，必须要给文本注册改变事件
inputChangeHandle:function(e){
// console.log(e.detail)
this.setData({
input:e.detail.value
})
},点击按钮后，执行addTodoHandle事件，将数据通过微信的wx.setStorage方法存储到手机本地，赋值通过key和value形式保存，然后通过setData方法将保存的数据显示在页面上，然后就是勾选已完成的事件，绑定的方法为DeleteHandle
DeleteHandle:function(e){
//删除任务操作
console.log(e.currentTarget)
var todos=this.data.todos
//item就是splice方法中删除掉的元素
var item=todos.splice(e.currentTarget.dataset.index,1)[0] //删除数组中对象的方法，1是从固定下标开始删除几个数组元素
var leftCount=this.data.leftCount-(item.complete?0:1)
this.setData({todos:todos,leftCount:leftCount})
},最后就是页面下方全选：toggleAllHandle和清除：clearHandle的两个按钮绑定的事件了：
toggleAllHandle:function(){
//this在这里永远指向的当前的页面对象
this.data.allComplete=!this.data.allComplete
var todos=this.data.todos
var that=this
todos.forEach(function(item){ //for循环
item.complete=that.data.allComplete
})
var leftCount=this.data.allComplete?0:this.data.todos.length
this.setData({todos:todos,leftCount:leftCount})
},
clearHandle:function(){
var todos=[] //定义空数组
//这里是执行清除缓存的操作，正常这一行不用加哈，加了你每次点击就把本地缓存直接清除了，下次打开就不显示上次的数据了
wx.clearStorage({
success: (res) => {},
})
this.data.todos.forEach(function(item){
if(!item.complete){
todos.push(item) //把所有未完成的任务存储到一个新的数组
}
})
this.setData({ todos:todos })
},OK，这样就是记事本基本的实现逻辑了，只能说很基本的功能实现吧，很简陋只是为了过审
好的，我们把整个js文件的代码一起贴下吧：
Page({
//设置可被分享
onShareAppMessage(){
return{title:'记事本'}
},
onShareTimeline(){
return{title:'记事本'}
},
data:{
//文本框的数据模型
input :'',
//任务清单数据模型
todos:[
],
leftCount:0
},
//1,先让按钮点击时执行一段代码
addTodoHandle:function(){
//点击按钮之后执行事件
//console.log(this.data.input) //拿到文本框的值
if(!this.data.input) return
var todos=this.data.todos
console.log("todos------------------",todos)
todos.push({
name:this.data.input,
complete:false,
allComplete:false
})
wx.setStorage({
key:"todos",
data:todos
})
console.log(wx.getStorageSync('todos'))
//必须显式的通过setData来改变数据，这样界面才会得到变化
this.setData({todos:todos,input:'',leftCount: this.data.leftCount+1})
},
//2，拿到文本框里面的值
//2.1由于小程序的数据绑定是单向的，必须要给文本注册改变事件
inputChangeHandle:function(e){
// console.log(e.detail)
this.setData({
input:e.detail.value
})
},
toggleToHandle:function(e){
//切换当前点中item的完成状态
//console.log(e.currentTarget)
var item=this.data.todos[e.currentTarget.dataset.index]
item.complete=!item.complete
var leftCount=this.data.leftCount+(item.complete?-1:1)
//console.log(item)
this.setData({todos:this.data.todos,leftCount:leftCount})
},
//这个方面需要注意冒泡问题
DeleteHandle:function(e){
//删除任务操作
console.log(e.currentTarget)
var todos=this.data.todos
//item就是splice方法中删除掉的元素
var item=todos.splice(e.currentTarget.dataset.index,1)[0] //删除数组中对象的方法，1是从固定下标开始删除几个数组元素
var leftCount=this.data.leftCount-(item.complete?0:1)
this.setData({todos:todos,leftCount:leftCount})
},
toggleAllHandle:function(){
//this在这里永远指向的当前的页面对象
this.data.allComplete=!this.data.allComplete
var todos=this.data.todos
var that=this
todos.forEach(function(item){ //for循环
item.complete=that.data.allComplete
})
var leftCount=this.data.allComplete?0:this.data.todos.length
this.setData({todos:todos,leftCount:leftCount})
},
clearHandle:function(){
var todos=[] //定义空数组
wx.clearStorage({
success: (res) => {},
})
this.data.todos.forEach(function(item){
if(!item.complete){
todos.push(item) //把所有未完成的任务存储到一个新的数组
}
})
this.setData({ todos:todos })
},
//页面重新加载
onLoad:function(optinons){
// var todos=this.data.todos1
var todos=[]
todos=wx.getStorageSync('todos')||[]
console.log(wx.getStorageSync('todos'))
this.setData({todos:todos,input:'',leftCount: this.data.leftCount+1})
}
})
按这样写基本上没啥问题，可以正常提交代码了，嗯，这一次终于没让我失望审核终于通过了，不容易啊！！！
上线后终于可以高枕无忧迎接海量的访问量了吗？？？
很傻很天真，你以为真的有很多人访问吗？
你以为就是你以为的？
是的？现实很骨感。
下一篇看数据吧！
