Home > WeChat Applet > Mini Program Development > Implementation method of a conversation memo applet

Implementation method of a conversation memo applet

小云云
Release: 2018-01-27 10:29:42
Original
5510 people have browsed it

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 method of a conversation memo applet

Implementation method of a conversation memo applet

Implementation method of a conversation memo applet

##Implementation steps ( Personal version):

1. Register the WeChat applet and get the appid

Registration URL: https://mp.weixin.qq.com

2. 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. html

3. 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
Copy after login

4. Function module

Memo addition

//保存标题、内容和编辑时间到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'
    })
  }
},
Copy after login

Data acquisition

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
  })
};
Copy after login

Data editing

//编辑备忘录后重新保存 
  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
        })
      }
    }
  },
Copy after login

Data deletion

// 删除单条备忘记录
 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: &#39;memoLists&#39;
                      });  
                   }else{
                   for(var i=0; i<delValue.length; i++){
                       try {
                         that.data.memoLists[0].splice(delValue[i] - 1, 1);   //删除指定下标的值
                         wx.setStorageSync(&#39;memoLists&#39;, that.data.memoLists[0]);   //异步更新列表缓存
                         wx.showToast({
                           title: &#39;删除成功&#39;,
                           icon: &#39;success&#39;,
                           duration: 500
                         });
                       } catch (e) { }
                     }
                   }
                   // 删除后刷新页面
                   setTimeout(function () {
                     wx.redirectTo({
                       url: &#39;/pages/index/index&#39;
                     });
                   }, 500);
                 } else {
                   wx.showToast({
                     title: &#39;获取数据失败&#39;,
                     icon: &#39;none&#39;,
                     duration: 1000
                   });
                 }
               } catch (e) {
                 wx.showToast({
                   title: &#39;删除失败&#39;,
                   icon: &#39;none&#39;,
                   duration: 1500
                 })
               }
             }
           } 
       })
     } catch (e) {
       wx.showToast({
         title: &#39;删除失败&#39;,
         icon: &#39;none&#39;,
         duration: 1500
       })
     }
 }
Copy after login

Sharing function

const shareData = require(&#39;../../utils/shareData.js&#39;)   //引入自定义分享标题
// 分享
  onShareAppMessage: function (res) {
    return {
      title: shareData[Math.round(Math.random() * (shareData.length - 1))],  //从数据中随机备选一条
      path: &#39;/pages/index/index&#39;,
      imageUrl: &#39;../../assets/images/share.jpg&#39;,
      success: function (res) {
        console.log(&#39;已转发&#39;)
      },
      fail: function (res) {
        console.log(&#39;用户取消转发&#39;)
      }
    }
  }
Copy after login

Related recommendations:

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template