We have shared many articles about WeChat mini programs before, including WeChat mini programs imitating Zhihu. Today we continue to share with you the implementation of a mini program that can obtain a conversation memo. I hope you like it.
Note: Data is operated in local cache, pure front-end without backend, no need to worry about information leakage.
Let’s take a look at the implementation interface diagram first:
##Implementation steps ( Personal version): 1. Register the WeChat applet and get the appidRegistration URL: https://mp.weixin.qq.com2. Download the new version of WeChat Developer tools, create a new memo project, fill in the appid, and automatically generate the initialization code after confirmation Developer tool download: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download. html3. Directory structure+-- 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
//保存标题、内容和编辑时间到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<delValue.length; 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('用户取消转发') } } }
WeChat mini program to play tricks with text (barrage)
A WeChat mini program version of Zhihu example sharing
A summary of problems encountered in the development of WeChat mini programs
The above is the detailed content of Implementation method of a conversation memo applet. For more information, please follow other related articles on the PHP Chinese website!