最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 一个会话备忘录小程序的实现方法_小程序开发教程


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

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

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

    1.jpg

    2.jpg

    3.jpg

    实现步骤(个人版):

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

    相关推荐:

    微信小程序把文字玩出花样(弹幕)

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

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

    以上就是一个会话备忘录小程序的实现方法的详细内容,更多请关注liyege.cn其它相关文章!

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 1173会员总数(位)
    • 111858资源总数(个)
    • 2本周发布(个)
    • 0 今日发布(个)
    • 245稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    侵权联系邮箱[email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐