微信小程序项目实例——备忘录

失散多年的哥哥

已于 2022-05-29 14:12:38 修改

阅读量1.5w

点赞数 92

分类专栏：微信小程序项目实例文章标签：微信小程序小程序安卓移动开发 ios

于 2022-02-27 16:07:02 首次发布

本文链接：https://blog.csdn.net/ws15168689087/article/details/123165543

版权

微信小程序项目实例专栏收录该内容

30 篇文章 278 订阅

订阅专栏

本文档详细介绍了如何创建一个微信小程序备忘录应用，包括文字记录、计时和提醒功能。用户可以输入事件并设定时间，完成或未完成时可进行确认或删除。核心代码展示了WXML结构，包括输入框、时间选择器、开关按钮以及提交和清空按钮等交互元素。此外，还提供了列表展示、编辑和删除功能，以及全选完成和删除操作。项目代码可供下载，适合初学者实践。

摘要由CSDN通过智能技术生成

微信小程序项目实例——备忘录

项目代码见文字底部，点赞关注有惊喜

一、项目展示

在这里插入图片描述

二、项目介绍

项目是一个备忘录，拥有记录文字、计时和提醒的基本功能

项目只有一个页面，整体简约便捷

用户可以输入相关事件，并设立时间，便可完成备忘

当完成或未按期完成时，可以自行确认或删除

三、核心代码

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="header">    
    欢迎<text class="userinfo-nickname">{{userInfo.nickName}}</text>使用
  </view>
<form bindsubmit="formSubmit" bindreset="formReset">
 <view class="input-wrap">    
      <input type="text" value='{{curIpt}}' returnKeyType='send' placeholder="请输入待做的事" class="ipt-main"  bindinput='iptChange' />     
      <view class="flex-row flex-time" wx:if="{{curIpt}}">
            <picker range='{{curRange}}' value='{{curBegin}}' bindchange='beginChange'  class="pick-time time">
                <text>
                    开始时间：{{curRange[curBegin]}}
                </text>
            </picker>  
            <picker range='{{curRange}}' value='{{curFinish}}' bindchange='finishChange'  class="pick-time time">
                <text>
                    结束时间：{{curRange[curFinish]}}
                </text>
            </picker>  
            <label class="time"><switch class="switch" checked bindchange="switch1Change" />提醒</label>
        </view>
        <view class="flex-row" wx:if="{{curIpt}}">        
          <button class="btn btn-submit" formType="submit" hover-class="btn-hover">提交</button>
          <button class="btn btn-cancel" formType="reset">清空</button>
       </view>
  </view>
  </form>
  <view class="list-wrap" wx:if="{{lists.length>0}}">
    <view wx:for="{{lists}}" wx:if="{{showAll ||(!showAll && !item.done)}}" id="{{item.id}}" class="{{item.done?'done list':'list'}}">        
        <text>{{index+1}}:</text>
        <text data-id ="{{index}}"  class="cnt" bindtap="toChange" >{{item.content}}</text>
        <view hidden="{{!item.editing}}" class="edit-wrap">
            <input class="ipt-edit" value="{{item.content}}"  data-id="{{index}}" bindinput='iptEdit' />
            <button class="btn btn-edit" data-id="{{index}}" bindtap="saveEdit">修改</button>
        </view>
        
        <text class="time"> {{item.beginTime}}-{{item.finishTime}}</text>
        <icon class="ico-done" bindtap="setDone" data-id="{{index}}" type="success_no_circle" size='18' color="{{item.done?'#d7d7d7':'#6fa6cf'}}" />
        <icon class="ico-delete" bindtap="toDelete" data-id="{{index}}" type='cancel' size='20' color="#6fa6cf" />
    </view>
    <view class="footer">
        <view class="ft-area">
            <text>{{lists.length}}条</text>
        </view>
         <view class="ft-area ft-mid">
            <text wx:if="{{showAll}}" bindtap="showUnfinished" class="ft-action">显示未完成</text>
            <text wx:else bindtap="showAll" class="ft-action">显示全部</text>
        </view>
        <view class="ft-area">
            <text bindtap="doneAll" class="ft-action">全部完成</text>
            <text bindtap="deleteAll" class="ft-action">全删</text>
        </view>
    </view>
  </view>
  <view class="input-wrap mt" wx:if="{{lists.length>0}}">
    <button class="btn btn-save" bindtap="saveData">保存数据</button>
  </view>
</view>