一个会话备忘录小程序的实现方法

前面我们分享过很多微信小程序的文章，包括微信小程序仿知乎，今天我们继续和大家分享一个有取得小程序：一个会话备忘录的小程序的实现，希望大家喜欢。

说明： 数据在本地缓存中操作，纯前端无后台，不用担心信息泄露问题。

我们先看一下实现界面图：

实现步骤（个人版）：

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 == #39; #39;){
 wx.showToast({
 title: #39;请输入标题 #39;,
 icon: #39;none #39;,
 duration: 1000
 // else if (memo_value == #39; #39; ){
 // wx.showToast({
 // title: #39;请输入内容 #39;,
 // icon: #39;none #39;,
 // duration: 1000
 // })
 // }
 else{
 //后编辑的放在前面
 that.data.memoLists.unshift({ title : title, text : memo_value, time : time });
 //异步保存到storage中
 try {
 wx.setStorageSync( #39;memoLists #39;, that.data.memoLists)
 } catch (e) {
 wx.showToast({
 title: #39;保存失败 #39;,
 icon: #39;error #39;,
 duration: 2000
 wx.redirectTo({
 url: #39;/pages/index/index #39;
},

数据获取

var that = this;
//异步获取storage中保存的数组
try {
 var value = wx.getStorageSync( #39;memoLists #39;);
 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: #39;获取数据失败 #39;,
 icon: #39;none #39;,
 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 == #39; #39;) {
 wx.showToast({
 title: #39;请输入标题 #39;,
 icon: #39;none #39;,
 duration: 800
 // else if (memo_value == #39; #39;) {
 // wx.showToast({
 // title: #39;请输入内容 #39;,
 // icon: #39;none #39;,
 // 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( #39;memoLists #39;, that.data.memoLists);
 wx.redirectTo({
 url: #39;/pages/index/index #39;
 } catch (e) {
 wx.showToast({
 title: #39;保存失败 #39;,
 icon: #39;error #39;,
 duration: 2000
 },

数据删除

// 删除单条备忘记录
 delMemoLists: function(e) {
 var that = this;
 try {
 wx.showModal({
 title: #39; #39;,
 content: #39;确认删除这 #39; + that.data.checkboxLength+ #39;条吗? #39;,
 success: function (res) {
 if (res.confirm) {
 try {
 var delValue = wx.getStorageSync( #39;delLists #39;);
 // 数组从大到小排序
 delValue.sort(function (a, b) {
 return a 
 if (delValue) {
 if (that.data.allLength == that.data.checkboxLength) {
 //直接清空缓存
 wx.removeStorage({
 key: #39;memoLists #39;
 }); 
 }else{
 for(var i=0; i delValue.length; i++){
 try {
 that.data.memoLists[0].splice(delValue[i] - 1, 1); //删除指定下标的值
 wx.setStorageSync( #39;memoLists #39;, that.data.memoLists[0]); //异步更新列表缓存
 wx.showToast({
 title: #39;删除成功 #39;,
 icon: #39;success #39;,
 duration: 500
 } catch (e) { }
 // 删除后刷新页面
 setTimeout(function () {
 wx.redirectTo({
 url: #39;/pages/index/index #39;
 }, 500);
 } else {
 wx.showToast({
 title: #39;获取数据失败 #39;,
 icon: #39;none #39;,
 duration: 1000
 } catch (e) {
 wx.showToast({
 title: #39;删除失败 #39;,
 icon: #39;none #39;,
 duration: 1500
 } catch (e) {
 wx.showToast({
 title: #39;删除失败 #39;,
 icon: #39;none #39;,
 duration: 1500
 }

分享功能

const shareData = require( #39;../../utils/shareData.js #39;) //引入自定义分享标题
// 分享
 onShareAppMessage: function (res) {
 return {
 title: shareData[Math.round(Math.random() * (shareData.length - 1))], //从数据中随机备选一条
 path: #39;/pages/index/index #39;,
 imageUrl: #39;../../assets/images/share.jpg #39;,
 success: function (res) {
 console.log( #39;已转发 #39;)
 fail: function (res) {
 console.log( #39;用户取消转发 #39;)
 }

相关推荐：

微信小程序把文字玩出花样（弹幕）

一个微信小程序版知乎实例分享

微信小程序开发遇到的问题汇总

以上就是一个会话备忘录小程序的实现方法的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。