扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下如何实现一个会话备忘录小程序,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联专注于虞城网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供虞城营销型网站建设,虞城网站制作、虞城网页设计、虞城网站官网定制、成都小程序开发服务,打造虞城网络公司原创品牌,更为您提供虞城网站排名全网营销落地服务。说明: 数据在本地缓存中操作,纯前端无后台,不用担心信息泄露问题。
我们先看一下实现界面图:
实现步骤(个人版):
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分享功能
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('用户取消转发') } } }看完了这篇文章,相信你对“如何实现一个会话备忘录小程序”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前名称:如何实现一个会话备忘录小程序-创新互联
文章分享:http://kswjz.com/article/dsoipd.html
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流