自学微信小程序开发第六天- TODOS案例

最新推荐文章于 2024-07-25 21:27:06 发布
最新推荐文章于 2024-07-25 21:27:06 发布
阅读量271 收藏 3
点赞数
分类专栏： 自学 笔记 文章标签： 微信小程序 css 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/runsong911/article/details/124776177
版权

自学微信小程序开发第六天- TODOS案例


TODOS是一个待办事项的小程序，用这个来测试我们之前学到的内容。

页面呈现

准备达成的目标界面如图所示，按照这个图来设计页面。
在这里插入图片描述

界面结构

首先，最上方标题文字更改和最下方的 tagbar 在 app.json 里更改。

{
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "TODOS",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "tabBar": {
        "list": [{
            "pagePath": "pages/index/index",
            "text": "todos",
            "iconPath": "images/todos.png",
            "selectedIconPath": "images/todos-active.png"
        },{
            "pagePath": "pages/logs/logs",
            "text": "日志",
            "selectedIconPath": "images/logs-active.png",
            "iconPath": "images/logs.png"
        }]
    }
}

再就是页面布局结构，这里很多应该是根据后台呈现的内容，先不管，把整体结构先规划出来，之后再进行更改。

<!--index.wxml-->
<view class="container">
    <!-- 增加项目 -->
    <view class="add">
        <image src="../../images/plus.png"></image>
        <input type="text" placeholder="准备做的事" />
    </view>
    <!-- 需要做的事 -->
    <view class="todos">
        <view class="item">
            <icon type="circle"></icon>
            <text>做界面布局</text>
            <icon type="clear"></icon>
        </view>
        <view class="item">
            <icon type="success"></icon>
            <text>抽象业务数据</text>
            <icon type="clear"></icon>
        </view>
        <view class="item">
            <icon type="circle"></icon>
            <text>等等</text>
            <icon type="clear"></icon>
        </view>
    </view>
    <!-- 页脚 -->
    <view class="footer">
        <text>切换全部</text>
        <text>剩余2件事</text>
        <text>清除完成项</text>
    </view>
</view>

添加界面样式

界面样式主要是在 .wxss 里完成，不过页面中使用了 <icon> 标签，这个标签的大小使用标签的 size 来调整。其他的均使用样式表。

<icon type="clear" size="32rpx"></icon>

/**index.wxss**/
/* 页面容器 */
.container{
    border-top: 1rpx solid #e0e0e0;     /* 最上方的横线，以上边框的形式呈现 */
}
/* 增加项目栏 */
.add{
    border: 1rpx solid #e0e0e0;     /* 边框 */
    border-radius: 10rpx;       /* 边框圆角 */
    box-shadow: 0 0 10rpx #e0e0e0;   /* 阴影 */
    align-items: center;    /* 侧轴对齐 */
    display: flex;    /* 设置为flex盒子 */
    padding: 20rpx;     /* 内边距 */
    margin: 20rpx;      /* 外边距 */
}
/* 增加项目栏下的图片 */
.add image{
    width: 40rpx;       /* 宽 */
    height: 40rpx;      /* 高 */
    margin-right: 20rpx;        /* 右侧外边距 */
}
/* 需要做到事项区域 */
.todos{
    border: 1rpx solid #e0e0e0;     /* 边框 */
    border-radius: 10rpx;       /* 边框圆角 */
    box-shadow: 0 0 10rpx #e0e0e0;   /* 阴影 */
    align-items: center;    /* 子元素侧轴对齐 */
    margin: 20rpx;      /* 外边距 */
}
/* 任务项 */
.todos .item{
    padding: 20rpx;     /* 内边距 */
    border-bottom: 1rpx solid #e0e0e0;      /* 底部边框 */
    display: flex;      /* 设置为flex盒子 */
    align-items: center;    /* 子元素侧轴对齐 */
}
/* 最后一个任务项，不需要底部边框 */
.todos .item:last-child{
    padding: 20rpx;     /* 内边距 */
    display: flex;      /* 设置为flex盒子 */
    align-items: center;     /* 子元素侧轴对齐 */
}
/* 任务项里的文本 */
.todos .item text{
    flex: 1;        /* 获取全部剩余空间 */
    font-size: 30rpx;   /* 字体大小 */
    color: #444;        /* 字体颜色 */
    margin-left: 20rpx;     /* 左侧外边距 */
}
/* 页脚 */
.footer{
    font-size: 30rpx;       /* 字体大小 */
    margin: 20rpx;      /* 外边距 */
    display: flex;      /* 设置为flex盒子 */
    justify-content: space-between;     /* 子元素主轴对齐 */
    color: #333;    /* 字体颜色 */
}

界面交互

抽象数据模型

页面设计好了，就要抽象数据模型了。抽象数据模型就是根据页面情况，确定添加哪些数据成员。即，确定哪个数据在程序使用过程中会改变，将其设计成变量。

// index.js
Page({
    data: {
        // 文本框数据
        add: '',
        // 任务列表
        todos: [
            { name: '', completed: false }
        ],
        // 剩余数量
        leftCount: 0
    }
})

界面数据绑定

数据模型建立好了，则要和相应的元素进行绑定。这里有个需注意的地方：需要做的事中具体项目的图标类型和文本样式会改变，使用三元表达式进行判断，然后随之进行改变。

<!--index.wxml-->
<view class="container">
    <!-- 增加项目 -->
    <view class="add">
        <image src="../../images/plus.png"></image>
        <input type="text" placeholder="准备做的事" value="{{add}}" />
    </view>
    <!-- 需要做的事 -->
    <view class="todos">
        <view class="item{{item.completed ? ' completed' : ''}}" wx:for="{{todos}}" >
            <icon type="{{item.completed ? 'success' : 'circle'}}"></icon>
            <text>{{item.name}}</text>
            <icon type="clear" size="32rpx"></icon>
        </view>
    </view>
    <!-- 页脚 -->
    <view class="footer">
        <text>切换全部</text>
        <text>剩余{{leftCount}}件事</text>
        <text>清除完成项</text>
    </view>
</view>

新增样式，已完成任务的文本样式，改变字体颜色，增加删除线。

/* 任务项里已完成任务的文本 */
.todos .item.completed text{
    flex: 1;        /* 获取全部剩余空间 */
    font-size: 30rpx;   /* 字体大小 */
    color: #888;        /* 字体颜色 */
    margin-left: 20rpx;     /* 左侧外边距 */
    text-decoration: line-through;  /* 中划线 */
}

界面交互的操作

文本框输入数据，添加至列表

因为小程序的数据流是单向的，所以要绑定事件，来获取文本框输入的内容。点击 “+” 也要绑定事件，来向列表数组添加数据。

    <!-- 增加项目 -->
    <view class="add">
        <image src="../../images/plus.png" bindtap="addTodo"></image>
        <input type="text" placeholder="准备做的事" value="{{add}}" bindinput="textChange" bindconfirm="addTodo" focus />
    </view>

    // 将文本框的数据添加至任务列表数组
    addTodo: function () {
        if (!this.data.add) return		// 如果文本框是空的，则终止执行
        var todos = this.data.todos
        todos.push({
            name: this.data.add,
            completed: false
        })
        this.setData({ todos: todos, add: '' })
    },
    // 文本有改变，改变相应数据成员
    textChange: function (e) {
        this.setData({ add: e.detail.value })
    }

切换任务完成状态

切换任务状态需要给每个 item 项绑定个点击事件，且绑定个 data 数据，以便获取点击的项的索引号进行操作。

    <!-- 需要做的事 -->
    <view class="todos">
        <view class="item{{item.completed ? ' completed' : ''}}" wx:for="{{todos}}" bindtap="toggleState" data-index="{{index}}">
            <icon type="{{item.completed ? 'success' : 'circle'}}"></icon>
            <text>{{item.name}}</text>
            <icon type="clear" size="32rpx"></icon>
        </view>
    </view>

    // 切换单项任务状态
    toggleState: function (e) {
        var item = this.data.todos[e.currentTarget.dataset.index]	// 获取当前点击元素的索引号，确定具体 item 项
        item.completed = !item.completed	// 单项的完成情况取非
        this.setData({ todos: this.data.todos })	//刷新数据绑定
    }

剩余数量的实时改变

剩余数量绑定了数据成员 leftCount ，即需要在新增项、删除、切换等操作时维护此数据成员。已经完成了新增、切换的操作，所以先在这两个操作中进行维护。另在呈现的时候，如果 leftCount 为 0 ，则剩余的文本不显示，可以使用三元表达式进行判断。

    <!-- 页脚 -->
    <view class="footer">
        <text>切换全部</text>
        <text hidden="{{leftCount == 0 ? true : false}}">剩余{{leftCount}}件事</text>
        <text>清除完成项</text>
    </view>

    // 将文本框的数据添加至任务列表数组
    addTodo: function () {
        if (!this.data.add) return
        var todos = this.data.todos
        todos.push({
            name: this.data.add,
            completed: false
        })
        this.setData({
            todos: todos,
            add: '',
            leftCount: this.data.leftCount + 1
        })
    },
    // 切换单项任务状态
    toggleState: function (e) {
        // 根据参数获得的索引号，确定具体项目
        var item = this.data.todos[e.currentTarget.dataset.index]
        item.completed = !item.completed
        // 根据当前任务状态决定增加还是减少
        var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
        this.setData({ todos: this.data.todos, leftCount: leftCount })
    }

删除任务

删除任务是点任务列表里单项文本后面的叉号进行删除，除了需要绑定事件，还需要操作数组，维护数据成员。另，叉号的事件必须阻止冒泡。

    <!-- 需要做的事 -->
    <view class="todos">
        <view class="item{{item.completed ? ' completed' : ''}}" wx:for="{{todos}}" wx:key="name" bindtap="toggleState" data-index="{{index}}">
            <icon type="{{item.completed ? 'success' : 'circle'}}"></icon>
            <text>{{item.name}}</text>
            <icon type="clear" size="32rpx" catchtap="deleteItem" data-index="{{index}}"></icon>
        </view>
    </view>

    // 删除单项任务
    deleteItem: function (e) {
        var todos = this.data.todos
        // 根据索引号查找是否完成,决定leftCount是否改变
        var item = this.data.todos[e.currentTarget.dataset.index]
        var leftCount = this.data.leftCount + (item.completed ? 0 : -1)
        // 根据索引号删除数组中的元素
        todos.splice(e.currentTarget.dataset.index, 1)
        this.setData({ todos: todos, leftCount: leftCount })
    }

切换全部

点击后是切换成完成还是未完成，需要设置个标记变量来判断。

    <!-- 页脚 -->
    <view class="footer">
        <text bindtap="toggleAll">切换全部</text>
        <text hidden="{{leftCount == 0 ? true : false}}"> 剩余{{leftCount}}件事 </text>
        <text>清除完成项</text>
    </view>

    data: {
        // 文本框数据
        add: '',
        // 任务列表
        todos: [],
        // 剩余数量
        leftCount: 0,
        allCompleted: false
    },
    // 切换全部任务状态
    toggleAll: function () {
        // 切换全部任务的状态为
        this.data.allCompleted = !this.data.allCompleted
        var todos = this.data.todos
        // this在函数内部使用出错，不是指page对象
        var that = this
        // 历遍todos更改completed状态
        todos.forEach(function (item) {
            item.completed = that.data.allCompleted
        })
        // 更改剩余数量
        var leftCount = (this.data.allCompleted ? 0 : todos.length)
        // 刷新值
        this.setData({ todos: todos, leftCount: leftCount })
    }

另外切换状态也涉及了 allCompleted ，所以也需要增加判断。

    // 切换单项任务状态
    toggleState: function (e) {
        // 根据参数获得的索引号，确定具体项目
        var item = this.data.todos[e.currentTarget.dataset.index]
        // 切换状态
        item.completed = !item.completed
        // 根据当前任务状态决定剩余数增加还是减少
        var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
        // 判断是否全部完成
        var todos = this.data.todos
        var completed = item.completed
        // 如果切换后状态为true，则历遍todos，发现false则completed赋值false
        if (completed) {
            for (var i = 0; i < todos.length; i++) {
                if (!todos[i].completed) {
                    completed = false
                    break
                }
            }
        }
        this.data.allCompleted = completed
        // 刷新值
        this.setData({ todos: this.data.todos, leftCount: leftCount })
    }

清除完成项

清除完成项的思路很简单，历遍数组，将所有 completed 的值为 true 的项删掉。或者新建个空数组，将所有 completed 为 false 的项添加至新数组。因为前一种方法在历遍时还需要考虑到删除时索引号的改变，所以使用后一种方法较为简单明了。

    <!-- 页脚 -->
    <view class="footer">
        <text bindtap="toggleAll">切换全部</text>
        <text hidden="{{leftCount == 0 ? true : false}}">剩余{{leftCount}}件事</text>
        <text bindtap="clearCompleted">清除完成项</text>
    </view>

即使1种思路，实现方法也有多个，这里写2个。

    //清除完成项
    clearCompleted: function () {
        // 创建新列表，将所有老列表completed为false的项添加到新列表
        // 方法1：使用forEach历遍
        // var todos=[]
        // this.data.todos.forEach(function(item){
        //     if(!item.completed){
        //         todos.push(item)
        //     }
        // })
        // 方法2：使用filter过滤，根据条件(函数)过滤，返回值为true则添加到新数组
        var todos = this.data.todos.filter(function (item) {
            return !item.completed
        })
        // 刷新值
        this.setData({ todos: todos })
    }

再就是考虑到，没有完成项的时候，就不显示清除完成项了。思路是比对todos.length 和 leftCount 。

    <!-- 页脚 -->
    <view class="footer">
        <text bindtap="toggleAll">切换全部</text>
        <text hidden="{{leftCount == 0 ? true : false}}">剩余{{leftCount}}件事</text>
        <text bindtap="clearCompleted" hidden="{{todos.length == leftCount ? true : false}}" >清除完成项</text>
    </view>

当没有待办项时隐藏列表和页脚

主要思路就是判断 todos.length ，当值为 0 时不显示，或显示其他提示。

    <!-- 判断是否需要显示列表和页脚 -->
    <block wx:if="{{todos.length}}">
        <!-- 需要做的事 -->
        <view class="todos">
        </view>
        <!-- 页脚 -->
        <view class="footer">
        </view>
    </block>
    <!-- 不显示列表和页脚 -->
    <block wx:else>
        <view class="empty">
            <text class="title">恭喜你</text>
            <text class="content">没有剩余的工作了</text>
        </view>
    </block>

/* 列表空 */
.empty {
    display: flex;
    /* 设置为flex盒子 */
    flex-direction: column;
    /* 主轴设置为纵轴 */
    align-items: center;
    /* 子元素侧轴对齐方式 */
    justify-content: center;
    /* 子元素主轴对齐方式 */
}
/* 列表空时显示的标题 */
.empty .title {
    font-size: 120rpx;
    margin: 200rpx 50rpx 50rpx;
    color: #444;
}
/* 列表空时显示的内容 */
.empty .content {
    font-size: 40rpx;
    color: #666;
    text-align: center;
}

数据保存

到这里结构、界面就都完成了，作为一个应用程序，还有一道工具就是数据处理，即后台工作。对于 todos 这个程序来说，大部分的后台工作其实就是界面交互的控制，剩余的后台工作就只剩下数据保存了。

我们的小程序测试时发现目前无法保存数据，每次重新加载时数据是重置的，所以就需要进行数据保存。

在小程序中，我们可以使用API函数 wx.setStorageSync 以键值对的形式保存数据到缓存中，使用 wx.getStorageSync 函数来进行读取。在 onLoad 事件中进行读取，在数据有变动时进行保存，即达到了存储数据的目的。

    // 保存数据
    save: function () {
        wx.setStorageSync('todo_list', this.data.todos)
    },
    // 读取数据
    load: function () {
        var todos = wx.getStorageSync('todo_list')
        // 判断是否获得数据，并根据获得数据重新计算剩余数量
        if (todos) {
            var leftCount = todos.filter(function (item) {
                return !item.completed
            }).length
            if (leftCount == 0) this.data.allCompleted = true
            // 刷新值
            this.setData({ todos: todos, leftCount: leftCount })
        }
    },
    // 页面加载事件
    onLoad: function () {
        this.load()
    }

最后就是每个设计数据变动的函数最后都增加 this.save()

日志

记录日志信息

在希望达成目标的界面中，还有个日志页面。这就需要在每次数据有改动时记录日志，日志内容初步设计为记录操作行为（增加、删除、改变状态、全部改变状态、删除已完成）、操作时间及操作项目。同时需要保存日志到缓存中。（这里只写相关代码）

//读取数据时
var logs = wx.getStorageSync('todo_logs')	// 读取日志
if (logs) this.setData({ logs: logs })		// 如果读取到日志，刷新值
// 保存数据
save: function () {
	wx.setStorageSync('todo_list', this.data.todos)
	wx.setStorageSync('todo_logs', this.data.logs)
},
//清除完成项
var logs = this.data.logs	// 写日志
logs.push({
	timestamp: new Date(), action: '清除', item: '所有完成项'
})
// 切换全部任务状态
var logs = this.data.logs	// 写日志
logs.push({
	timestamp: new Date(), action: this.data.allCompleted ? '完成' : '重启', item: '所有列表项'
})
// 删除单项任务
var logs = this.data.logs	// 写日志
logs.push({
	timestamp: new Date(), action: '删除', item: item.name
})
// 切换单项任务状态
var logs = this.data.logs	// 写日志
logs.push({
	timestamp: new Date(), action: item.completed ? '完成' : '重启', item: item.name
})
// 新增列表项
var logs = this.data.logs		// 写日志
logs.push({
	timestamp: new Date(), action: '新增', item: this.data.add
})

日志页面

日志页面比较简单，就是一个列表框，显示所有列表项。日志列表只有3个元素：内容、行为、时间。

<!--pages/logs/logs.wxml-->
<!-- 页面容器 -->
<view class="container" >
    <!-- 日志列表 -->
    <view class="logs" wx:if="{{logs}}">
        <!-- 列表项目 -->
        <view class="item" wx:for="{{logs}}" wx:key="{{index}}">
            <text class="content">{{item.item}}</text>
            <text class="action">{{item.action}}</text>
            <text class="timestamp">{{item.timestamp}}</text>
        </view>
    </view>
</view>

/* pages/logs/logs.wxss */
/* 日志列表 */
.logs{
    border: 1rpx solid #e0e0e0;
    border-radius: 10rpx;
    box-shadow: 0 0 10rpx #e0e0e0;
}
.logs .item{
    border-bottom: 1rpx solid #e0e0e0;
    padding: 30rpx;
    font-size: 30rpx;
}
.logs .item .content{
    width: 70%;
    color: #aa0;
    display: inline-block;
}
.logs .item .action{
    display: inline-block;
    text-align: right;
    color: #f40;
    width: 30%;
}
.logs .item .timestamp{
    display: block;
    color: #888;
    margin-top: 20rpx;
}

日志的数据绑定

日志页面只是呈现日志列表，不需要复杂的交互。只是需注意的是，加载缓存需要在页面呈现事件中，而不能在页面加载事件中。

// pages/logs/logs.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        logs: []
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.load()
    },
    load: function () {
        // 读取日志
        var logs = wx.getStorageSync('todo_logs')
        // 如果读取到日志，刷新值(因为数组是按时间最早的在最下方，所以呈现时候需逆序)
        if (logs) this.setData({ logs: logs.reverse() })
    }
})

整个项目代码

/**app.wxss**/
/* 页面容器 */
.container {
    border-top: 1rpx solid #e0e0e0;
    /* 最上方的横线，以上边框的形式呈现 */
    padding: 20rpx;
}

app.json

{
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "TODOS",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "tabBar": {
        "list": [{
            "pagePath": "pages/index/index",
            "text": "todos",
            "iconPath": "images/todos.png",
            "selectedIconPath": "images/todos-active.png"
        },{
            "pagePath": "pages/logs/logs",
            "text": "日志",
            "selectedIconPath": "images/logs-active.png",
            "iconPath": "images/logs.png"
        }]
    }
}

// app.js
App({})

// index.js
Page({
    data: {
        // 文本框数据
        add: '',
        // 任务列表
        todos: [],
        // 剩余数量
        leftCount: 0,
        // 是否全部完成
        allCompleted: false,
        // 日志
        logs: []
    },
    // 新增列表项
    addTodo: function () {
        // 如果文本框为空
        if (!this.data.add) return
        // 增加到数组最后
        var todos = this.data.todos
        todos.push({
            name: this.data.add,
            completed: false
        })
        // 写日志
        var logs = this.data.logs
        logs.push({
            timestamp: new Date(), action: '新增', item: this.data.add
        })
        // 刷新值
        this.setData({
            todos: todos,
            add: '',
            leftCount: this.data.leftCount + 1,
            logs: logs
        })
        this.save()
    },
    // 文本有改变，改变相应数据成员
    textChange: function (e) {
        this.setData({ add: e.detail.value })
    },
    // 切换单项任务状态
    toggleState: function (e) {
        // 根据参数获得的索引号，确定具体项目
        var item = this.data.todos[e.currentTarget.dataset.index]
        // 切换状态
        item.completed = !item.completed
        // 根据当前任务状态决定剩余数增加还是减少
        var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
        // 判断是否全部完成
        if (leftCount == 0) this.data.allCompleted = true
        // 写日志
        var logs = this.data.logs
        logs.push({
            timestamp: new Date(), action: item.completed ? '完成' : '重启', item: item.name
        })
        // 刷新值
        this.setData({ todos: this.data.todos, leftCount: leftCount, logs: logs })
        this.save()
    },
    // 删除单项任务
    deleteItem: function (e) {
        var todos = this.data.todos
        // 根据索引号删除数组中的元素,返回值为删除的元素数组
        var item = todos.splice(e.currentTarget.dataset.index, 1)[0]
        // 根据删除元素的完成状态,决定leftCount是否改变
        var leftCount = this.data.leftCount + (item.completed ? 0 : -1)
        // 判断是否全部完成
        if (leftCount == 0) this.data.allCompleted = true
        // 写日志
        var logs = this.data.logs
        logs.push({
            timestamp: new Date(), action: '删除', item: item.name
        })
        // 刷新值
        this.setData({ todos: todos, leftCount: leftCount, logs: logs })
        this.save()
    },
    // 切换全部任务状态
    toggleAll: function () {
        // 切换全部任务的状态为
        this.data.allCompleted = !this.data.allCompleted
        var todos = this.data.todos
        // this在函数内部使用出错，不是指page对象
        var that = this
        // 历遍todos更改completed状态
        todos.forEach(function (item) {
            item.completed = that.data.allCompleted
        })
        // 更改剩余数量
        var leftCount = this.data.allCompleted ? 0 : todos.length
        // 写日志
        var logs = this.data.logs
        logs.push({
            timestamp: new Date(), action: this.data.allCompleted ? '完成' : '重启', item: '所有列表项'
        })
        // 刷新值
        this.setData({ todos: todos, leftCount: leftCount, logs: logs })
        this.save()
    },
    //清除完成项
    clearCompleted: function () {
        // 创建新列表，历遍老列表，将completed为false项添加到新列表
        // 使用forEach历遍
        // var todos=[]
        // this.data.todos.forEach(function(item){
        //     if(!item.completed){
        //         todos.push(item)
        //     }
        // })
        // 使用filter过滤，根据条件(函数)过滤，返回值为true则添加到新数组
        var todos = this.data.todos.filter(function (item) {
            return !item.completed
        })
        // 写日志
        var logs = this.data.logs
        logs.push({
            timestamp: new Date(), action: '清除', item: '所有完成项'
        })
        // 刷新值
        this.setData({ todos: todos, logs: logs })
        this.save()
    },
    // 保存数据
    save: function () {
        wx.setStorageSync('todo_list', this.data.todos)
        wx.setStorageSync('todo_logs', this.data.logs)
    },
    // 读取数据
    load: function () {
        var todos = wx.getStorageSync('todo_list')
        // 判断是否获得列表数据，并根据获得数据重新计算剩余数量
        if (todos) {
            var leftCount = todos.filter(function (item) {
                return !item.completed
            }).length
            if (leftCount == 0) this.data.allCompleted = true
            // 刷新值
            this.setData({ todos: todos, leftCount: leftCount })
        }
        // 读取日志
        var logs = wx.getStorageSync('todo_logs')
        // 如果读取到日志，刷新值
        if (logs) this.setData({ logs: logs })
    },
    // 页面加载事件
    onLoad: function () {
        this.load()
    }
})    

<!--index.wxml-->
<view class="container">
    <!-- 增加项目 -->
    <view class="add">
        <image src="../../images/plus.png" bindtap="addTodo"></image>
        <input type="text" placeholder="准备做的事" value="{{add}}" bindinput="textChange" bindconfirm="addTodo" />
    </view>
    <!-- 判断是否需要显示列表和页脚 -->
    <block wx:if="{{todos.length}}">
        <!-- 需要做的事 -->
        <view class="todos">
            <view class="item{{item.completed ? ' completed' : ''}}" wx:for="{{todos}}" wx:key="name" bindtap="toggleState" data-index="{{index}}">
                <icon type="{{item.completed ? 'success' : 'circle'}}"></icon>
                <text>{{item.name}}</text>
                <icon type="clear" size="32rpx" catchtap="deleteItem" data-index="{{index}}"></icon>
            </view>
        </view>
        <!-- 页脚 -->
        <view class="footer">
            <text bindtap="toggleAll">切换全部</text>
            <text hidden="{{leftCount == 0 ? true : false}}">剩余{{leftCount}}件事</text>
            <text bindtap="clearCompleted" hidden="{{todos.length == leftCount ? true : false}}">清除完成项</text>
        </view>
    </block>
    <!-- 不显示列表和页脚 -->
    <block wx:else>
        <view class="empty">
            <text class="title">恭喜你</text>
            <text class="content">没有剩余的工作了</text>
        </view>
    </block>
</view>

/**index.wxss**/
/* 增加项目栏 */
.add {
    border: 1rpx solid #e0e0e0;
    /* 边框 */
    border-radius: 10rpx;
    /* 边框圆角 */
    box-shadow: 0 0 10rpx #e0e0e0;
    /* 阴影 */
    align-items: center;
    /* 侧轴对齐 */
    display: flex;
    /* 设置为flex盒子 */
    padding: 20rpx;
    /* 内边距 */
}

/* 增加项目栏下的图片 */
.add image {
    width: 40rpx;
    /* 宽 */
    height: 40rpx;
    /* 高 */
    margin-right: 20rpx;
    /* 右侧外边距 */
}

/* 需要做到事项区域 */
.todos {
    border: 1rpx solid #e0e0e0;
    /* 边框 */
    border-radius: 10rpx;
    /* 边框圆角 */
    box-shadow: 0 0 10rpx #e0e0e0;
    /* 阴影 */
    align-items: center;
    /* 子元素侧轴对齐 */
}

/* 任务项 */
.todos .item {
    padding: 20rpx;
    /* 内边距 */
    border-bottom: 1rpx solid #e0e0e0;
    /* 底部边框 */
    display: flex;
    /* 设置为flex盒子 */
    align-items: center;
    /* 子元素侧轴对齐 */
}

/* 最后一个任务项，不需要底部边框 */
.todos .item:last-child {
    padding: 20rpx;
    /* 内边距 */
    display: flex;
    /* 设置为flex盒子 */
    align-items: center;
    /* 子元素侧轴对齐 */
}

/* 任务项里的文本 */
.todos .item text {
    flex: 1;
    /* 获取全部剩余空间 */
    font-size: 30rpx;
    /* 字体大小 */
    color: #444;
    /* 字体颜色 */
    margin-left: 20rpx;
    /* 左侧外边距 */
}

/* 任务项里已完成任务的文本 */
.todos .item.completed text {
    flex: 1;
    /* 获取全部剩余空间 */
    font-size: 30rpx;
    /* 字体大小 */
    color: #888;
    /* 字体颜色 */
    margin-left: 20rpx;
    /* 左侧外边距 */
    text-decoration: line-through;
    /* 中划线 */
}
/* 页脚 */
.footer {
    font-size: 30rpx;
    /* 字体大小 */
    margin: 10rpx;
    /* 外边距 */
    display: flex;
    /* 设置为flex盒子 */
    justify-content: space-between;
    /* 子元素主轴对齐 */
    color: #333;
    /* 字体颜色 */
}
/* 列表空 */
.empty {
    display: flex;
    /* 设置为flex盒子 */
    flex-direction: column;
    /* 主轴设置为纵轴 */
    align-items: center;
    /* 子元素侧轴对齐方式 */
    justify-content: center;
    /* 子元素主轴对齐方式 */
}
/* 列表空时显示的标题 */
.empty .title {
    font-size: 120rpx;
    margin: 200rpx 50rpx 50rpx;
    color: #444;
}
/* 列表空时显示的内容 */
.empty .content {
    font-size: 40rpx;
    color: #666;
    text-align: center;
}

// pages/logs/logs.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        logs: []
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.load()
    },
    load: function () {
        // 读取日志
        var logs = wx.getStorageSync('todo_logs')
        // 如果读取到日志，刷新值(因为数组是按时间最早的在最下方，所以呈现时候需逆序)
        if (logs) this.setData({ logs: logs.reverse() })
    }
})

<!--pages/logs/logs.wxml-->
<!-- 页面容器 -->
<view class="container" >
    <!-- 日志列表 -->
    <view class="logs" wx:if="{{logs}}">
        <!-- 列表项目 -->
        <view class="item" wx:for="{{logs}}" wx:key="{{index}}">
            <text class="content">{{item.item}}</text>
            <text class="action">{{item.action}}</text>
            <text class="timestamp">{{item.timestamp}}</text>
        </view>
    </view>
</view>

/* pages/logs/logs.wxss */
/* 日志列表 */
.logs{
    border: 1rpx solid #e0e0e0;
    border-radius: 10rpx;
    box-shadow: 0 0 10rpx #e0e0e0;
}
.logs .item{
    border-bottom: 1rpx solid #e0e0e0;
    padding: 30rpx;
    font-size: 30rpx;
}
.logs .item .content{
    width: 70%;
    color: #aa0;
    display: inline-block;
}
.logs .item .action{
    display: inline-block;
    text-align: right;
    color: #f40;
    width: 30%;
}
.logs .item .timestamp{
    display: block;
    color: #888;
    margin-top: 20rpx;
}

重要参考：

B站上找到的开发教程视频，Up主不知道叫啥……

runsong911
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序入门之构建一个简单TODOS应用
03-29
作者：Eraser's，来自授权地址最近，由于工作需要开始了解微信小程序，虽然小程序已经出了很久了，刚出的那段时间很火，看到很多关于小程序的技术文章，不过现在似乎没那么火了，anyway，我们还是可以学习下的。一、 ...       最近，由于工作需要开始了解微信小程序，虽然小程序已经出了很久了，刚出的那段时间很火，看到很多关于小程序的技术文章，不过现在似乎没那么火了，anyway，我们还是可以学习下的。     最近，由于工作需要开始了解微信小程序，虽然小程序已经出了很久了，刚出的那段时间很火，看到很多关于小程序的技术文章，不过现在似乎没那么火了，anyway，我们还是可以学习下的。 一、
TODOS案例
Yous的博客
08-16 743
TodoHead.vue 输入框 --键盘事件—回车。子传父 把任务 —App.vue中 加入到数组中。1：创建3个组件和里面的代码还有样式。数组改变，所有用到数组的地方都会更新。点击全选 —小选框状态和全选状态一样。小选框都选中(手选)—全选会自动选中。2：APP.vue中引入三个组件。输入框为空，提示用户必须输入内容。点击清空按钮，把已完成的任务清空。点击底部切换，点谁谁有边框样式。对应切换不同的数据展示。哪天需要了，可以去下载。页面刷新后数据还存在。...
9、backbone实例todos分析（三）总结
the_fire的技术博客
04-18 8572
在前两篇文章中，我们已经对这个todos的功能、数据模型以及各个模块的实现细节进行了分析，这篇文章我们要对前面的分析进行一个整合。前面我们说过，有了肉和菜，剩下的就是要怎么吃。我个人倾向于菜和肉一起吃，这样不会觉得腻  首先让我们来回顾一下我们分析的流程：先对页面功能进行了分析，然后又分析了数据模型，最后又对view的功能和代码进行了详解。你是不是觉得这个分析里面少了点什么？没错了，就知道经
一个简单微信小程序TODOS应用
08-10
一个简单微信小程序TODOS应用
微信小程序实现todos功能wxAppTodos-master.zip
09-25
微信小程序实现todos功能wxAppTodos-master.zip
微信小程序学习笔记(5) -- todos案例
baidu_21349635的专栏
06-27 605
文章目录TODOS案例:项目介绍样式书写导航栏todosfooter数据绑定抽象数据模型界面数据绑定界面交互操作新增新增逻辑优化切换任务完成状态剩余任务数量展示删除任务逻辑切换全部任务状态(全选)清空已完成任务细节优化和总结bindconfirm事件呈现问题--block真机演示 TODOS案例: 项目介绍 https://github.com/zce/weapp-todos 样式书写 导航栏 效果： 具体代码: <view class="search"> <image s
微信小程序--Todos案例
Jy123_的博客
01-21 714
开始 Todos 案例 分析 页面布局 功能分析 点击+号添加一条任务清单 点击任务清单可以切换状态 点击x号删除这一条任务清单 1 item left跟随着变化三种状态 当任务清单只有一条时，为1 item left 当任务清单为0时，为空（消失） 当任务清单为>1时，为 x items left Toggle all 表示全选和全不选 clear completed 表示清除所有已完...
TODO：小程序的使用体验
weixin_34194087的博客
01-09 143
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序实现todolist
weixin_48210599的博客
09-23 1960
微信小程序复习第二天 自己实现一个todolist的效果，首先是wxml页面布局 <!--pages/home/home.wxml--> <view> <view class="box_top">TODOLIST</view> <view class="box_center"> <input value="{{value}}" bindinput="changevalue" class="todolist_input"><
关于微信小程序 todolist 实现
hao9101111的博客
08-16 7888
wxml 部分： &lt;input type='text' placeholder='请输入内容' bindinput='getval' value='{{val}}'&gt;&lt;/input&gt; &lt;button bindtap='add'&gt;添加&lt;/button&gt; &lt;view wx:for="{{list}}" wx:key="{{index}}"&a
【微信小程序实战教程】之微信小程序原生开发详解
柯晓楠
07-24 1342
在实际的项目开发中，小程序的内置组件不一定能满足所有的需求，为了实现更高效的代码复用，小程序还允许开发者自行扩充组件，这些由开发者自行设计的组件被称为自定义组件。在小程序中，每个组件都具有独立的逻辑空间，分别拥有自己的独立数据和setData方法调用。在使用自定义组件的小程序页面中，Exparser框架将接管所有的自定义组件注册和实例化。小程序的基础库中提供了Page和Component两个构造器，自定义组件使用的是Component构造器。
微信小程序结合后端php发送模版消息
quweiie的专栏
07-25 346
结合后端php,发送微信小程序模版消息
基于微信小程序的自习室选座系统/基于Java的自习室选座系统/自习室管理系统的设计与实现
weixin_47958760的博客
07-24 1000
本课题所设计的小程序自习室选座系统，使用微信开发者与java进行开发，它的优点代码不能从浏览器查看，保密性非常好，比其他的自习室选座系统更具安全性。小程序还容易修改和调试，毕竟自习室选座是在不断发展过程中，难免有更多需求，这点很重要。而且，本系统除了对自习室预约管理，还添加了对学生的资料管理，这也是为了满足自习室选座更深层次的需求。除了上述优势外，本系统还具有：查询迅速，搜索资料方便，可靠性强等等。
微信小程序之计算器
最新发布
ch_s_t的专栏
07-25 1001
data-*是微信小程序的自定义属性，由data-前缀加上自定义的属性名，自定义属性值表示要传递的数据 ，在事件处理函数中通过targert或currentTarget对象的datasett属性获取数据。
微信小程序实现聊天界面，发送功能
番茄Salad
07-24 1868
【代码】微信小程序实现聊天界面，发送功能。
微信小程序 setData方法踩的坑！！！
weixin_44692308的博客
07-24 379
在微信小程序中，setData是用于更新组件数据的方法。调用setData后，小程序框架会触发页面的重新渲染，并将更新后的数据反映到视图上。
【微信小程序实战教程】之微信小程序的配置文件详解
柯晓楠
07-25 1030
对于有过服务端开发的程序员来说，肯定对“约定优于配置”并不陌生，这是一种按约定编程的软件设计范式，目的在于减少软件开发者做决定的数量。而微信小程序正好与这种软件设计范式的理念相反，小程序是一种“配置优于约定”的软件设计范式，处于对安全性的考虑，开发者必须在相应的配置文件中对小程序部分界面和功能进行配置，例如窗口的导航栏设计、底部tabBar设计等。本章主要对微信小程序的全局、页面等配置文件做详细的讲解，通过学习配置文件的配置项，可以掌握更多的小程序功能设计。
CSS前端面试题——CSS 中，有哪些方式可以隐藏页面元素？有什么区别?
lbcbjtlhmjq的博客
07-25 388
这些方式的区别在于是否占据空间和是否可见，开发者可以根据实际情况选择不同的方式来隐藏页面元素。
写一段基于微信云开发的微信小程序代码
09-19
以下是一段简单的微信小程序代码，基于微信云开发： ``` // pages/index/index.js Page({ data: { message: 'Hello World' }, onLoad: function() { wx.cloud.callFunction({ name: 'getData', success: ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值