如何实现一个会话备忘录小程序
创始人
2024-11-24 23:00:17
0次

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

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

如何实现一个会话备忘录小程序

如何实现一个会话备忘录小程序

如何实现一个会话备忘录小程序

实现步骤(个人版):

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('用户取消转发')
      }
    }
  }

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...