Heim > WeChat-Applet > Mini-Programmentwicklung > Implementierungsmethode eines Konversationsnotiz-Applets

Implementierungsmethode eines Konversationsnotiz-Applets

小云云
Freigeben: 2018-01-27 10:29:42
Original
5510 Leute haben es durchsucht

Wir haben bereits viele Artikel über WeChat-Miniprogramme geteilt, darunter WeChat-Miniprogramme, die Zhihu nachahmen. Heute teilen wir Ihnen weiterhin die Implementierung eines Miniprogramms mit, mit dem Sie ein Gesprächsmemo erhalten können.

Hinweis: Die Daten werden im lokalen Cache verarbeitet, reines Front-End ohne Backend, Sie müssen sich keine Sorgen über Informationslecks machen.

Werfen wir zunächst einen Blick auf das Implementierungsschnittstellendiagramm:

Implementierungsmethode eines Konversationsnotiz-Applets

Implementierungsmethode eines Konversationsnotiz-Applets

Implementierungsmethode eines Konversationsnotiz-Applets

Implementierungsschritte (persönliche Version):

1. Registrieren Sie das WeChat-Applet und erhalten Sie die App-ID

Registrierungs-URL: https://mp.weixin.qq.com

2 . Laden Sie die neue Version der WeChat-Entwicklertools herunter, erstellen Sie ein neues Memoprojekt, geben Sie die App-ID ein und generieren Sie nach der Bestätigung automatisch den Initialisierungscode

Entwicklertool-Download: https://mp.weixin.qq.com /debug/wxadoc/dev/devtools/download.

3. Verzeichnisstruktur

+-- 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
Nach dem Login kopieren
4. Funktionsmodul

Datenerfassung

//保存标题、内容和编辑时间到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'
    })
  }
},
Nach dem Login kopieren

Datenbearbeitung

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
  })
};
Nach dem Login kopieren

Datenlöschung

//编辑备忘录后重新保存 
  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
        })
      }
    }
  },
Nach dem Login kopieren

Sharing-Funktion

// 删除单条备忘记录
 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
       })
     }
 }
Nach dem Login kopieren

Verwandte Empfehlungen:

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;)
      }
    }
  }
Nach dem Login kopieren

WeChat-Applet Streiche mit Text spielen (Sperrfeuer)

Eine WeChat-Miniprogrammversion der Zhihu-Beispielfreigabe

Bei der Entwicklung von WeChat-Miniprogrammen aufgetretene Probleme Zusammenfassung

Das obige ist der detaillierte Inhalt vonImplementierungsmethode eines Konversationsnotiz-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage