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

article/2025/1/9 16:37:49

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

文章目录

  • 微信小程序项目实例——备忘录
  • 一、项目展示
  • 二、项目介绍
  • 三、核心代码

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


一、项目展示

在这里插入图片描述

二、项目介绍

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

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

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

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

三、核心代码

<!--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>

项目已上传,点击下载(关注可私聊拿代码)
点击下载!!!

在这里插入图片描述


http://chatgpt.dhexx.cn/article/TlUxat8h.shtml

相关文章

微信小程序项目实例——幸运大转盘

微信小程序项目实例——幸运大转盘 文章目录 微信小程序项目实例——幸运大转盘一、项目展示二、抽奖页三、领奖页文末&#xff1a;项目代码 项目代码见文字底部&#xff0c;点赞关注有惊喜 一、项目展示 幸运大转盘是一个简单的抽奖小程序 参与用户点击抽奖便可抽取轮盘的奖品…

微信小程序项目实例——狼人杀

微信小程序项目实例——狼人杀 文章目录 微信小程序项目实例——狼人杀一、项目展示二、首页三、游戏页四、特殊角色文末 项目代码见文字底部&#xff0c;点赞关注有惊喜 一、项目展示 狼人杀是一款多人参与的&#xff0c;通过语言描述推动、较量口才和分析判断能力的策略类桌…

project实操——项目实例

1. 新建项目 2. 设置项目日历 可以设置每周工作几天&#xff0c;每天工作几小时 点击 项目 -> 更改工作时间 在弹出窗口上&#xff0c;选择下方的“”工作周“选项卡&#xff0c;点击右侧的【详细信息】按钮 系统打开的详细信息窗口上&#xff0c; 选中左侧列表中的“周六…

Android Studio同步远程Git代码到本地

前一篇文件说如何将本地代码同步到远程Git服务器&#xff08;将代码同步到远程Git服务器&#xff09;&#xff0c;这篇说说如何在Android Studio中将远程代码同步到本地。 环境说明&#xff1a; 1、本地需要安装有git环境 2、Android Studio 3、存放项目的远程服务器地址&a…

git 同步远程和本地的同名分支

首先正常创建一个本地仓库&#xff0c;添加内容&#xff0c;跟远程关联 git init git add . git commit -m "" git remote add origin 远程仓库地址 如果在本地创建了一个新的分支 git checkout -b branch_one 然后将该分支直接推动到远程进行同步 git push -u …

使用git 实现本地文件和远程代码仓的互相同步

一、关于Git的安装与配置&#xff0c;可以参考这两篇文章 Git 详细安装教程&#xff08;详解 Git 安装过程的每一个步骤&#xff09; GitHub的安装与配置 二、同步本地文件与代码仓常规流程 1、在github上创建项目2、使用git clone https://github.com/xxxxxxx/xxxxx.git 克…

git(实现代码存档和同步)

远程仓库就是github&#xff0c;码云这些之类的&#xff0c;所有人都以远程仓库的文件作为最新版本 每个人都有自己的工作区&#xff08;本地电脑里面的一个文件夹&#xff09;&#xff0c;每个人都可以用clone把最新版本的文件复制到本地 比如我现在有四个文件&#xff0c;但…

[Git] 本地代码库和远程同步

一 前言 这本来不是一个很严重的问题, 有很多办法可以处理, 但是对于Git新手来说, 会觉得非常可怕, 因为不知道怎么恢复之前的状态, 不知道当前状态上传上去会造成什么影响, 最怕的是影响到master之类的主分支, 然后把别人的工作搞丢, 那就完蛋了. 我刚开始接触Git的时候, 上…

git操作之同步代码到仓库

1、先创建一个仓库&#xff0c;然后把创建的空仓库克隆到本地&#xff1b;2、把程序拷贝到本地的仓库中&#xff0c;然后再进行下列操作&#xff1b;&#xff08;1&#xff09;git add . 保存全部内容&#xff08;2&#xff09;git commit -m "项目描述"(3) git pu…

如何将git服务器同步到本地文件夹,使用git在服务器上部署git仓库并实现提交代码时同步代码到生产环境...

最近由于需要对正在运行的系统进行新功能添加&#xff0c;本来是可以通过github进行代码维护&#xff0c;但是由于这个项目涉及一些问题&#xff0c;目前还不能开源&#xff0c;所以只能是手动覆盖bug文件&#xff0c;生产环境上的代码反而是最新的了。 之前有个思路&#xff0…

git 项目代码上传到服务器上,git 上传代码到服务器

一、建立本地git仓库 1、cd到你项目根目录下 git init 二、将本地所有文件添加到暂存区 git add . . 表示所有文件 如果想添加项目中的指定文件,那就把.改为指定文件名或者目录即可,多个目录用空格隔开 三、将暂存区的文件提交到本地仓库 git commit -m 注释 四、在码云上创建…

git如何拉去开发的 最新代码_git拉取代码到本地

git拉取代码到本地的方法是:首先打开git命令窗口,输入命令【git clone github仓库地址】;然后回车即可拉取代码到本地仓库。 第一步:拉取远程代码git clone https://github.com/…/PrettyGirls.git 第二步:查看本地分支和远程分支1、cd PrettyGirls 到工程目录下; 2、git…

git配置及同步项目代码到本地

长久不用git发现自己都忘记了。。。在此记录下git配置&#xff0c;以便日后查看。 git配置 配置本地仓库账号和邮箱 git config --global user.name "YourName" git config --global user.email "your-emailexample.com"生成ssh密钥 ssh-keygen -t rsa -…

Git克隆仓库代码至本地

目录 1、本地新建文件夹&#xff1a; 2、文件夹右击&#xff0c;点击&#xff1a;Git Bash Here 3、本地仓库初始化&#xff0c;输入&#xff1a;git init 4、复制仓库代码地址 5、代码克隆&#xff0c;输入&#xff1a;git clone 复制的地址 6、打开文件夹&#xff0c;…

Git代码拉取与同步

1、git clone [email protected]:xxx/xxx.git 2、git checkout -b dev origin/dev 创建本地dev分支 并与远程dev分支关联 3、git remote add upstream 远程公库地址 关联到远程的公库 4、git pull upstream dev 从远程公库拉取dev分支代码 远程公库新建了bug分支&#xff…

在WebStorm里面搜索文件中出现的中文字符

ctrfF或者ctflshiftF 搜索[\u0100-\uffff]

处理webStorm中文字体样式大小不一,难看的问题

修改前样式&#xff1a; 修改后样式&#xff1a; 具体操作设置如下: File→Settings→Appearance & Behavior→Appearance&#xff0c;Theme 选择Darcula&#xff08;主题可自行选择&#xff09; File→Settings→Editor→Font&#xff0c; Font 选择Consolas&#xff…

WebStorm安装教程【2022年新版图解】

对于入门JavaScript 开发的者&#xff0c;最重要的就是安装WebStorm软件&#xff0c;一款非常优秀的JavaScript工具&#xff0c;在互联网上查询目前还没有一篇写得比较详细的WebStorm教程。今天我将使用WebStorm最新2022年版本&#xff0c;从下载到安装以及创建项目带大家完整的…

关于webstorm中TS如何设置中文提示

如下图所示&#xff0c;默认提示为英文 如果需要切换为中文提示&#xff0c;可按如下操作&#xff1a; 在选项中输入参数&#xff1a;--locale zh-CN&#xff0c;然后重启webstorm。 让我们来看看效果&#xff1a; 大功告成&#xff01;✌️

NodeJS + WebStorm 中文显示乱码

当使用 WebStorm 运行 NodeJS 代码时&#xff0c; 使用 response.write 有中文的时候&#xff0c;会显示乱码&#xff0c;如下图&#xff1a; server.on(request,function (request, response) {console.log(收到客户端的请求了&#xff0c;请求路径是&#xff1a; request.u…