擼一個(gè)會(huì)話備忘錄的小程序（白山羊備忘錄）

發(fā)布時(shí)間：2018-05-04 16:01 所屬欄目：小程序開發(fā)教程

說明：數(shù)據(jù)在本地緩存中操作，純前端無后臺(tái)，不用擔(dān)心信息泄露問題

實(shí)現(xiàn)步驟（個(gè)人版）：

1、注冊微信小程序，獲取appid

注冊網(wǎng)址： https://mp.weixin.qq.com

2、下載新版微信開發(fā)者工具，新建備忘錄項(xiàng)目，填寫appid，確定后自動(dòng)生成初始化代碼

開發(fā)者工具下載： https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

3、目錄結(jié)構(gòu)


+-- assets          //靜態(tài)文件夾
|   +-- 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、功能模塊

備忘錄添加


//保存標(biāo)題、內(nèi)容和編輯時(shí)間到storage中
saveMemo: function(){
  var that = this;
  var stamp = +new Date();  //獲取時(shí)間戳
  var time = util.format(stamp);  // 轉(zhuǎn)換成標(biāo)準(zhǔn)時(shí)間格式
  var title = that.data.title;
  var memo_value = that.data.value;

  if (title == ''){
    wx.showToast({
      title: '請輸入標(biāo)題',
      icon: 'none',
      duration: 1000
    })
  }
  // else if (memo_value == '' ){
  //   wx.showToast({
  //     title: '請輸入內(nèi)容',
  //     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'
    })

  }
},

數(shù)據(jù)獲取


var that = this;
//異步獲取storage中保存的數(shù)組
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: '獲取數(shù)據(jù)失敗',
    icon: 'none',
    duration: 1500
  })
};

數(shù)據(jù)編輯


//編輯備忘錄后重新保存 
  saveMemo: function () {
    var that = this;
    var stamp = +new Date();  //獲取時(shí)間戳
    var time = util.format(stamp);  // 轉(zhuǎn)換成標(biāo)準(zhǔn)時(shí)間格式
    var title = that.data.title;
    var memo_value = that.data.value;
    var editMemo = that.data.memoLists[that.data.id];

    //標(biāo)題不能為空
    if (title == '') {
      wx.showToast({
        title: '請輸入標(biāo)題',
        icon: 'none',
        duration: 800
      })
    }
    // else if (memo_value == '') {
    //   wx.showToast({
    //     title: '請輸入內(nèi)容',
    //     icon: 'none',
    //     duration: 800
    //   })
    // }
    else {
      //如果標(biāo)題和內(nèi)容都沒改，編輯時(shí)間不變，否則時(shí)間更改
      if(editMemo.title != title || editMemo.text != memo_value){
        editMemo.time = time;
      }else{
        editMemo.time = that.data.time;
      }

      //更新標(biāo)題和內(nèi)容
      editMemo.title = title;
      editMemo.text = memo_value;

      //異步更新數(shù)組
      try {
        wx.setStorageSync('memoLists', that.data.memoLists);
        wx.redirectTo({
          url: '/pages/index/index'
        })
      } catch (e) {
        wx.showToast({
          title: '保存失敗',
          icon: 'error',
          duration: 2000
        })
      }
    }
  },

數(shù)據(jù)刪除


// 刪除單條備忘記錄
 delMemoLists: function(e) {
   var that = this;
     try {
       wx.showModal({
         title: '',
         content: '確認(rèn)刪除這' + that.data.checkboxLength+'條嗎?',
         success: function (res) {
           if (res.confirm) {
               try {
                 var delValue = wx.getStorageSync('delLists');
                 // 數(shù)組從大到小排序
                 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);   //刪除指定下標(biāo)的值
                         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: '獲取數(shù)據(jù)失敗',
                     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')   //引入自定義分享標(biāo)題
// 分享
  onShareAppMessage: function (res) {

    return {
      title: shareData[Math.round(Math.random() * (shareData.length - 1))],  //從數(shù)據(jù)中隨機(jī)備選一條
      path: '/pages/index/index',
      imageUrl: '../../assets/images/share.jpg',
      success: function (res) {
        console.log('已轉(zhuǎn)發(fā)')
      },
      fail: function (res) {
        console.log('用戶取消轉(zhuǎn)發(fā)')
      }
    }
  }

實(shí)現(xiàn)界面圖