? 上節(jié)詳細(xì)描述了小程序環(huán)境搭建，承諾了這節(jié)講todolist，我猜大家都是學(xué)習(xí)過(guò) vue 或者 react 之后才學(xué)習(xí)小程序的，對(duì)于todolist 的邏輯問(wèn)題我暫不做詳細(xì)描述，如果遇到些許問(wèn)題，請(qǐng)及時(shí)留言或評(píng)論在下方，本人常在。

---

? 上面是todolist 的效果圖，功能介紹：
? 單擊添加按鈕新建任務(wù)清單，添加任務(wù)附帶當(dāng)前時(shí)間，左滑可以對(duì)任務(wù)清單進(jìn)行操作，已完成任務(wù)不可以轉(zhuǎn)換未完成 ，每次操作后自動(dòng)刷新頁(yè)面，更新任務(wù)清單。
? 在index.wxml 中可以把我的公眾號(hào)注釋，祝大家學(xué)業(yè)有成，日進(jìn)斗金。

? 大家按照我昨天的教程把微信開(kāi)發(fā)者工具安裝好以后，雙擊打開(kāi)，點(diǎn)擊新建項(xiàng)目，如圖所示：

---

?這里的 AppID 在你創(chuàng)建小程序賬號(hào)時(shí)就自動(dòng)注冊(cè)了，如果你沒(méi)有注冊(cè)小程序賬號(hào)

“ 請(qǐng)點(diǎn)擊這里 ”

? 之后我們?cè)谶@里獲取 AppID

---

? 填入之后，進(jìn)入到開(kāi)發(fā)頁(yè)面，我們操作的文檔主要是 index 文件，我們還要在 pages 目錄下新建文件夾 wxs ，在 wxs 中新建文件 subString.wxs ，這里存放我們的腳本語(yǔ)言，負(fù)責(zé)任務(wù)清單的寫入和溢出省略，我們?cè)?index.wxml 中引入它。整理好的文件目錄如圖所示：

---

subString.wxs中寫入以下腳本： var sub =function(val) {if (val == undefined || val.length == 0) {return;}if (val.length > 10) {return val.substring(0, 10) + "..."} else {return val;} }module.exports={sub:sub }

index.wxml 負(fù)責(zé)渲染 dom 節(jié)點(diǎn)，存放小程序標(biāo)簽：

<!--index.wxml--> <wxs src="./../wxs/subString.wxs" module="tools"/> <view class="container"><view class="userinfo"><view class="addDiv {{addShow?'':'hide'}}"><view class="addDivContent"><input bindinput='bindAddText' placeholder="請(qǐng)輸入內(nèi)容" focus="{{inputFocus}}" value="{{addText}}" class="addDivInput" /><view class="addDivButton"><button class="addDivButtonMargin" bindtap="addTodo" type="primary" size="mini">確定添加</button><button bindtap="cancelTodo" type="default" size="mini">取消</button></view></view></view><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button><block wx:else><image style="width:240rpx;height:240rpx" src="https://img-blog.csdnimg.cn/20200926230056268.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgyMDQ0NA==,size_16,color_FFFFFF,t_70#pic_center"></image></block><view class="listDivTop"><view class="listDivType"><view class="{{(todoTabId=='tab1'?'listDivTypeSelected':'')}}" data-id="tab1" bindtap="onChangeSelect">全部</view><view class="{{(todoTabId=='tab2'?'listDivTypeSelected':'')}}" data-id="tab2" bindtap="onChangeSelect">已完成</view><view class="{{(todoTabId=='tab3'?'listDivTypeSelected':'')}}" data-id="tab3" bindtap="onChangeSelect">未完成</view></view><view><button type="primary" size="mini" bindtap="addDivShow">添加</button></view></view><view class="listDivContent"><view class="items"><view wx:for="{{todoDtBind}}" wx:key="{{index}}" class="listDivItem"><view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" data-state="{{item.state}}" data-index="{{index}}" style="{{item.txtStyle}}" class="inner txt"><view class="listDivRow"><view>{{index+1}}.{{tools.sub(item.content)}}</view><view class="itemTime">{{item.addTime}}</view></view></view><view wx:if="{{item.state==2}}" data-index="{{index}}" bindtap="finishItem" class="inner finish">標(biāo)記完成</view><view data-index="{{index}}" bindtap="delItem" class="inner del">刪除</view></view></view></view></view> </view>

index.js 負(fù)責(zé)處理頁(yè)面邏輯：

//index.js //獲取應(yīng)用實(shí)例 const app = getApp()Page({data: {addShow: false, //添加輸入面板是否顯示inputFocus: false,//是否選中addText: '',//新增內(nèi)容todoTabId: 'tab1',//tab選中totalCount: 9,//總數(shù)據(jù)pageSize: 15,//顯示行數(shù)pageNum: 2,//頁(yè)碼todoDtBind: [],//綁定的數(shù)據(jù)集合todoList: [],//數(shù)據(jù)集合(所有的)delBtnWidth: 60, //刪除按鈕寬度finishBtnWidth: 80, //刪除按鈕寬度startX: "", //觸摸開(kāi)始滑動(dòng)的位置userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo')},//事件處理函數(shù)bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onShow: function() {this.setData({pageNum: 1})this.getBindDtInfo("正在加載中");this.setBindDtInfo(this.data.todoTabId);},/*** 獲取綁定數(shù)據(jù)* @param msg:加載信息*/getBindDtInfo: function(msg) {wx.showLoading({title: msg,})setTimeout(function() {wx.hideLoading()}, 2000)var vNum = this.data.pageNum;var count = vNum * this.data.pageSize;//頁(yè)碼乘以行數(shù)得到的理論條數(shù)var showCount = 0;//顯示條數(shù)if (count <= this.data.totalCount) {showCount = count;} else {showCount = this.data.totalCount;vNum = vNum - 1;}let objItem = {};let dtInfo = [];//創(chuàng)造數(shù)據(jù)for (var i = 0; i < showCount; i++) {objItem = {id: i + 1,content: '課程目錄' + (i + 1).toString(),addTime: this.getStrDate(Date.parse(new Date()) / 1000),state: (i < 6) ? 2 : 1,//前6行顯示為未完成txtStyle: ''}dtInfo.push(objItem)}this.setData({todoList: dtInfo,pageNum: vNum});},/*** 頁(yè)面上拉觸底事件*/onReachBottom: function() {if (this.data.todoList.length <= this.data.totalCount) {let vNum = this.data.pageNum + 1;this.setData({pageNum: vNum})// this.getBindDtInfo("正在加載中");this.setBindDtInfo(this.data.todoTabId);} else {wx.showToast({title: '沒(méi)有更多數(shù)據(jù)',icon: 'none',duration: 2000})}},/*** 通過(guò)時(shí)間戳獲取時(shí)間表達(dá)式*/getStrDate: function(vTime) {var res = /^\d+$/;if (!res.test(vTime)) {return vTime;}var date = new Date(vTime * 1000);var Y = date.getFullYear(); //年var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); //月var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); //日var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(); //時(shí)var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); //分var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); //秒var strDate = Y + "/" + M + "/" + D + " " + h + ":" + m + ":" + s;return strDate;},/*** 添加按鈕事件*/addDivShow: function() {this.setData({addShow: true,inputFocus: true});},//輸入內(nèi)容綁定至數(shù)據(jù)bindAddText: function(e) {this.setData({addText: e.detail.value})},//確定新增按鈕事件addTodo: function() {var content = this.data.addText;if (content.trim() == "") {wx.showToast({title: '添加的內(nèi)容信息不能為空!',icon: 'none',duration: 2000})return;}var dtInfo = this.data.todoList;var objAdd = {id: dtInfo.length + 1,content: content,addTime: this.getStrDate(Date.parse(new Date()) / 1000),state: 2,txtStyle: ''}dtInfo.unshift(objAdd);var count = this.data.totalCount + 1;this.setData({todoList: dtInfo,totalCount: count,addShow: false,inputFocus: false,addText: ''});this.setBindDtInfo(this.data.todoTabId)},//取消按鈕事件cancelTodo: function() {this.setData({addShow: false,inputFocus: false,addText: ''});},//設(shè)置綁定數(shù)據(jù)集合setBindDtInfo: function(vTabId) {var dtInfo = [];if (vTabId == "tab1") {dtInfo = this.data.todoList;} else if (vTabId == "tab2") {for (var i = 0; i < this.data.todoList.length; i++) {if (this.data.todoList[i].state == 1) {dtInfo.push(this.data.todoList[i]);}}} else {for (var i = 0; i < this.data.todoList.length; i++) {if (this.data.todoList[i].state == 2) {dtInfo.push(this.data.todoList[i]);}}}this.setData({todoDtBind: dtInfo,todoTabId: vTabId});},/*** 類型選中事件(全部,已完成,未完成)*/onChangeSelect: function(e) {var dtInfo = this.data.todoList;dtInfo.forEach(function(item) {item.txtStyle = "";})var self = this;var id = e.currentTarget.dataset.id;this.setBindDtInfo(id);},// 滑動(dòng)開(kāi)始touchStart: function(e) {var dtInfo = this.data.todoDtBind;dtInfo.forEach(function(item) {item.txtStyle = "";})if (e.touches.length == 1) {this.setData({//設(shè)置觸摸起始點(diǎn)水平方向位置startX: e.touches[0].clientX,todoDtBind: dtInfo});}},//滑動(dòng)touchMove: function(e) {if (e.touches.length == 1) {//移動(dòng)時(shí)水平方向位置var moveX = e.touches[0].clientX;var dValueX = this.data.startX - moveX; //差值:手指點(diǎn)擊開(kāi)始的X坐標(biāo)位置減去移動(dòng)的水平位置坐標(biāo)var operBtnWidth = this.data.delBtnWidth;var state = e.currentTarget.dataset.state;if (state == 2) {operBtnWidth = this.data.delBtnWidth + this.data.finishBtnWidth;}var txtStyle = "";//沒(méi)有移動(dòng)或者向右滑動(dòng)不進(jìn)行處理if (dValueX == 0 || dValueX < 0) {txtStyle = "left:0px";} else {txtStyle = "left:-" + dValueX + "px";}if (dValueX >= operBtnWidth) {//文本移動(dòng)的最大距離txtStyle = "left:-" + operBtnWidth + "px";}var index = e.currentTarget.dataset.index;var dtInfo = this.data.todoDtBind;dtInfo[index].txtStyle = txtStyle;this.setData({todoDtBind: dtInfo})}},//滑動(dòng)結(jié)束touchEnd: function(e) {if (e.changedTouches.length == 1) {var endX = e.changedTouches[0].clientX;var dValueX = this.data.startX - endX;var operBtnWidth = this.data.delBtnWidth;var state = e.currentTarget.dataset.state;if (state == 2) {operBtnWidth = this.data.delBtnWidth + this.data.finishBtnWidth;}var txtStyle = ""if (dValueX > operBtnWidth / 2) {txtStyle = "left:-" + operBtnWidth + "px";} else {txtStyle = "left:0px"}var index = e.currentTarget.dataset.index;var dtInfo = this.data.todoDtBind;dtInfo[index].txtStyle = txtStyle;this.setData({todoDtBind: dtInfo})}},//標(biāo)記完成finishItem: function(e) {var index = e.currentTarget.dataset.index;var dtInfo = this.data.todoDtBind;dtInfo[index].state = 1;dtInfo[index].txtStyle = "left:0px";this.setData({todoDtBind: dtInfo})this.setBindDtInfo(this.data.todoTabId);wx.showToast({title: '已完成成功',icon: 'success',duration: 2000})},//刪除按鈕事件delItem: function(e) {var index = e.currentTarget.dataset.index;var dtInfo = this.data.todoDtBind;var dtInfoList = this.data.todoList;var removeIndex = -1;for (var i = 0; i < dtInfoList.length; i++) {if (dtInfoList[i].id == dtInfo[index].id) {removeIndex = i;}}dtInfoList.splice(removeIndex, 1);var count = this.data.totalCount - 1;this.setData({todoList: dtInfoList,totalCount: count})this.setBindDtInfo(this.data.todoTabId);wx.showToast({title: '刪除成功',icon: 'success',duration: 2000})},onLoad: function() {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse) {// 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回// 所以此處加入 callback 以防止這種情況app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在沒(méi)有 open-type=getUserInfo 版本的兼容處理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})} })

index.wxss 負(fù)責(zé)存放 CSS 樣式：

/**index.wxss**/.userinfo {width: 100%;display: flex;flex-direction: column;align-items: center;position: relative; }.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%; }.userinfo-nickname {color: #aaa; }.addDiv {position: absolute;top: 0;left: 0;right: 0;background-color: #fff;z-index: 999; }.addDivContent {padding: 10px; }.addDivInput {border: solid 1px gainsboro;border-radius: 6px;height: 60px;margin-bottom: 10px; }.addDivButtonMargin {margin-right: 20px; }.hide {display: none; }.listDivTop {display: flex;flex-direction: row;justify-content: space-between;padding-top: 10px;padding-bottom: 10px;width: 96%;border-bottom: 1px solid gainsboro; }.listDivType {display: flex;flex-direction: row;justify-content: space-around;width: 60%;color: #999; }.listDivTypeSelected {color: #333;font-weight: 600; }.listDivContent {width: 100%;color: #666;margin: 0 auto;padding: 40rpx 0;position: absolute;top: 150px; }.items {width: 100%; }.listDivRow {width: 98%;display: flex;flex-direction: row;justify-content: space-between; }.listDivItem {position: relative;height: 80rpx;line-height: 80rpx;overflow: hidden; }.inner {position: absolute;top: 0; }.inner.txt {width: 100%;z-index: 5;transition: left 0.2s ease-in-out;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background-color: lightcyan; }.itemTime {font-size: 12px; }.inner.del {width: 60px;text-align: center;z-index: 4;right: 0;background-color: red; }.inner.finish {width: 80px;text-align: center;z-index: 4;right: 60px;background-color: skyblue; }

? 至于 index.json 我們沒(méi)有用到，這里不做細(xì)講。如果你的任務(wù)清單遇到了一些難題，不妨評(píng)論在下方或私信我解決，前端的學(xué)習(xí)從不缺乏樂(lè)趣，但需要持之以恒才能有所收獲，“不積跬步無(wú)以至千里”，加油！

推薦閱讀：小程序怎么學(xué)？

總結(jié)

以上是生活随笔為你收集整理的小程序todolist的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。