php在线备忘录,一个会话备忘录小程序的实现方法
前面我们分享过很多微信小程序的文章,包括微信小程序仿知乎,今天我们继续和大家分享一个有取得小程序:一个会话备忘录的小程序的实现,希望大家喜欢。
说明: 数据在本地缓存中操作,纯前端无后台,不用担心信息泄露问题。
我们先看一下实现界面图:
实现步骤(个人版):
1、注册微信小程序,获取appid
注册网址: https://mp.weixin.qq.com
2、下载新版微信开发者工具,新建备忘录项目,填写appid,确定后自动生成初始化代码
开发者工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
3、目录结构+-- assets //静态文件夹
| +-- font //字体文件
| +-- iconfont.eot
| +-- iconfont.svg
| +-- iconfont.ttf
| +-- iconfont.woff
| +-- images
| +-- share.jpg
+-- pages //页面
| +-- add //添加备忘录
| +-- add.js
| +-- add.json
| +-- add.wxml
| +-- add.wxss
| +-- edit //编辑备忘录
| +-- edit.js
| +-- edit.json
| +-- edit.wxml
| +-- edit.wxss
| +-- index //首页
| +-- index.js
| +-- index.json
| +-- index.wxml
| +-- index.wxss
| +-- logs //日志
| +-- logs.js
| +-- logs.json
| +-- logs.wxml
| +-- logs.wxss
+-- utils //公用js
| +-- shareData.js //分享短句
| +-- util.js
+-- app.js
+-- app.json
+-- app.wxss
+-- project.config.json
4、功能模块
备忘录添加//保存标题、内容和编辑时间到storage中
saveMemo: function(){
var that = this;
var stamp = +new Date(); //获取时间戳
var time = util.format(stamp); // 转换成标准时间格式
var title = that.data.title;
var memo_value = that.data.value;
if (title == ''){
wx.showToast({
title: '请输入标题',
icon: 'none',
duration: 1000
})
}
// else if (memo_value == '' ){
// wx.showToast({
// title: '请输入内容',
// icon: 'none',
// duration: 1000
// })
// }
else{
//后编辑的放在前面
that.data.memoLists.unshift({ "title": title, "text": memo_value, "time": time });
//异步保存到storage中
try {
wx.setStorageSync('memoLists', that.data.memoLists)
} catch (e) {
wx.showToast({
title: '保存失败',
icon: 'error',
duration: 2000
})
}
wx.redirectTo({
url: '/pages/index/index'
})
}
},
数据获取var that = this;
//异步获取storage中保存的数组
try {
var value = wx.getStorageSync('memoLists');
if (value) {
that.data.memoLists.push(value)
that.setData({
memoLists: that.data.memoLists,
allLength: util.count(that.data.memoLists[0]),
isNull: false
})
}
} catch (e) {
wx.showToast({
title: '获取数据失败',
icon: 'none',
duration: 1500
})
};
数据编辑//编辑备忘录后重新保存
saveMemo: function () {
var that = this;
var stamp = +new Date(); //获取时间戳
var time = util.format(stamp); // 转换成标准时间格式
var title = that.data.title;
var memo_value = that.data.value;
var editMemo = that.data.memoLists[that.data.id];
//标题不能为空
if (title == '') {
wx.showToast({
title: '请输入标题',
icon: 'none',
duration: 800
})
}
// else if (memo_value == '') {
// wx.showToast({
// title: '请输入内容',
// icon: 'none',
// duration: 800
// })
// }
else {
//如果标题和内容都没改,编辑时间不变,否则时间更改
if(editMemo.title != title || editMemo.text != memo_value){
editMemo.time = time;
}else{
editMemo.time = that.data.time;
}
//更新标题和内容
editMemo.title = title;
editMemo.text = memo_value;
//异步更新数组
try {
wx.setStorageSync('memoLists', that.data.memoLists);
wx.redirectTo({
url: '/pages/index/index'
})
} catch (e) {
wx.showToast({
title: '保存失败',
icon: 'error',
duration: 2000
})
}
}
},
数据删除// 删除单条备忘记录
delMemoLists: function(e) {
var that = this;
try {
wx.showModal({
title: '',
content: '确认删除这' + that.data.checkboxLength+'条吗?',
success: function (res) {
if (res.confirm) {
try {
var delValue = wx.getStorageSync('delLists');
// 数组从大到小排序
delValue.sort(function (a, b) {
return a < b;
})
if (delValue) {
if (that.data.allLength == that.data.checkboxLength) {
//直接清空缓存
wx.removeStorage({
key: 'memoLists'
});
}else{
for(var i=0; i
try {
that.data.memoLists[0].splice(delValue[i] - 1, 1); //删除指定下标的值
wx.setStorageSync('memoLists', that.data.memoLists[0]); //异步更新列表缓存
wx.showToast({
title: '删除成功',
icon: 'success',
duration: 500
});
} catch (e) { }
}
}
// 删除后刷新页面
setTimeout(function () {
wx.redirectTo({
url: '/pages/index/index'
});
}, 500);
} else {
wx.showToast({
title: '获取数据失败',
icon: 'none',
duration: 1000
});
}
} catch (e) {
wx.showToast({
title: '删除失败',
icon: 'none',
duration: 1500
})
}
}
}
})
} catch (e) {
wx.showToast({
title: '删除失败',
icon: 'none',
duration: 1500
})
}
}
分享功能const shareData = require('../../utils/shareData.js') //引入自定义分享标题
// 分享
onShareAppMessage: function (res) {
return {
title: shareData[Math.round(Math.random() * (shareData.length - 1))], //从数据中随机备选一条
path: '/pages/index/index',
imageUrl: '../../assets/images/share.jpg',
success: function (res) {
console.log('已转发')
},
fail: function (res) {
console.log('用户取消转发')
}
}
}
相关推荐:
php在线备忘录,一个会话备忘录小程序的实现方法相关推荐
- 基于Vue实现一个简易的小程序框架,浅谈kafka | 每日掘金第 194 期
Hello,又到了每天一次的下午茶时间.酱酱们的下午茶新增优质作者介绍和码上掘金板块,专注于发掘站内优质创作者和优质内容,欢迎大家多提宝贵意见! 酱酱们的下午茶全新改版,欢迎大家多提宝贵意见! 本文字 ...
- 微店铺是什么?做一个微店铺小程序的流程
微店铺是什么? 微店铺是指在微信平台上主要通过微信小程序方式创建的一个在线店铺.微店铺和传统的电商平台相比,具有更低的成本.更好的管理.更便捷的体验等优点,同时也有利于商家与用户之间的互动和沟通. 如 ...
- 用开源博客系统wordpress打造一个连载漫画小程序
*爱书者小程序2.0/3.0开源设计稿和源代码(前后端)去公众号[APP比比]自取 市面上一个看小说小程序随随便便上千块.于是乎自学代码还有设计终于磕磕碰碰完成了我的爱书者小程序4.0. 这次,我把所 ...
- 应用篇|如何精准搜索一个答题考试小程序
应用篇|如何精准搜索一个答题考试小程序 在线考试是一种非常节约成本的考试方式,考生通过微信扫码即可参加培训考试,不受时间.空间的限制,近几年越来越受企事业单位的青睐. 比如有以下场景:为落实反电信网络 ...
- java聊天室小程序论文_在Java项目中利用continue与break制作一个聊天室小程序
在Java项目中利用continue与break制作一个聊天室小程序 发布时间:2020-12-08 16:03:27 来源:亿速云 阅读:98 作者:Leah 在Java项目中利用continue与 ...
- java恶作剧小程序_一个Java恶搞小程序
运用Java程序控制某个应用程序的运行(以网易云音乐为例),步骤如下 1.建立bat文件分别是start.bat(控制程序的运行)和kill.bat(控制程序的结束): start.bat 的内容如下 ...
- python文件分发_python 写一个文件分发小程序
一.概述 该小程序实现从源端到目标端的文件一键拷贝,源端和目标段都在一台电脑上面,只是目录不同而已 二.参数文件说明 1. settings.txt的说明 a. 通过配置settings.txt,填源 ...
- 3.2 Lucene实战:一个简单的小程序
在讲解Lucene索引和检索的原理之前,我们先来实战Lucene:一个简单的小程序! 一.索引小程序 首先,new一个java project,名字叫做LuceneIndex. 然后,在project ...
- 以前给客户开发了一个本地同城小程序
以前给客户开发了一个本地同城小程序,今天客户联系我,想在小程序上加外卖功能,然后我告诉客户,以前开发这个小程序没多少钱,功能相对来说也不复杂,如果现在要加外卖功能的话就完全不一样了,开发外卖功能的开发 ...
最新文章
- Mysql学习总结(4)——MySql基础知识、存储引擎与常用数据类型
- 屏幕滚动控件Scrollview
- 条款14:在资源管理类中心copying行为(Think carefully about copying behavior in resource-manage classes)...
- Jsp传值方式(乱码问题的解决)
- php java c_当PHP、Java、C、C++ 这几种编程语言变成汽车是什么样的场景?
- 调整Linux磁盘分区大小
- 解决Zarp报错,成功运行
- PHP安装Xdebug调试工具
- 面向对象程序设计语言和面向过程程序设计
- 教你用illustrator画十二色环
- 怎么设置html表格的最小宽度,HTML表格的宽度怎么设置
- python学习笔记 BeautifulSoup趴数据
- windows 重置路由表
- 剪印去水印-剪印怎么去除水印?
- 领域驱动设计战术模式:领域事件
- 01马氏链及其平稳分布
- 360无线网卡linux驱动下载,如何在Linux下写无线网卡的驱动
- HyperLynx SI信号完整性仿真分析技术
- 爬取《水门桥》电影评论生成可视化数据及词云
- 视频会议系统/在线教育系统/企业远程视频办公通话会议系统EasyRTC,如何替换域名数字证书?
热门文章
- PMP-【第11章 项目风险管理】-2021-2-16(220页-251页)
- python arp脚本_Python scapy 实现一个简易 arp 攻击脚本
- java四子棋实验报告_Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
- 佳铁怎样传输程序_佳铁传输4.0工具下载|佳铁传输4.0软件 4.0 官方最新版
- c++ 遍历list_数据结构之图的遍历,一篇文章get全部考点
- mysql 备份锁表_mysql 不停机 短时间锁表 备份 主备同步 新增备份机器
- Jenkins之gitlab配置
- ngx_lua 模块
- Selenium3自动化测试——21.数据驱动应用
- php猜数游戏63,PHP实现猜数游戏的代码实例分享