小程序简易留言板（可存取数据）

写在前面

作为一个前端菜鸟，最近学习微信小程序开发，关注智能社轻松玩转微信小程序开发的视频，一边看一边跟着做，最后老师留了个作业，自己摸索着也算是基本实现了功能，简单记录一下，如果有不对的地方还请各位大神指正。下面直接贴代码，关于小程序的开发准备就不细说了~

1.index.wxml

  
  
    
    添加
  
  暂无留言...
  
  
    
      {{item.msg}}
      
    
  

2.index.wxss

/**index.wxss**/
.msg-box{
  padding: 20px;
}
.send-box{
  display: flex;
}
.input{
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
}
.place-input{
  color: #ff0000;
}
.msg-info{
  display: block;
  margin: 10px 0 0 0;
  color: #339999;
}
.list-view{
  margin: 20px 0 0 0;
}
.item{
  overflow: hidden;
  /* clear: both; */
  border-bottom: 1px dashed #ccc;
  height: 30px;
  line-height: 30px;
}
.text1{
  float: left;
}
.close-btn{
  float: right;
  margin:5px 5px 0 0;
}

3.index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    inputVal:'',
    msgData:[
      // { msg: 'x00000xxx' },
      // { msg: '1111' },
      // { msg: 'xx22222222222xx' }
    ]
  },
  changeInputVal(ev){
    this.setData({
      inputVal:ev.detail.value
    });
  },
  delMsg(ev){
    // console.log(ev.target.dataset.index);
    var n = ev.target.dataset.index;
    var list = this.data.msgData;
    list.splice(n,1);
    this.setData({
      msgData: list
    });
    wx.setStorage({
      key: "msgData",
      data: list,
      success: function (res) {
        console.log('存储缓存成功')
      }
    });
  },
  addMsg(){
    // console.log(this.data.inputVal);
    // this.data.msgData.push({
    //   msg:this.data.inputVal
    // });
    var list = this.data.msgData;
    list.push({
      msg: this.data.inputVal
    });
    //更新
    this.setData({
      inputVal: '',
      msgData:list
    });
    wx.setStorage({
      key: "msgData",
      data: list,
      success: function (res) {
        console.log('存储缓存成功')
      }
    });
  },

  //事件处理函数
  onLoad: function (options) {
    console.log('onLoad')
    console.log('读取缓存成功')
    var that = this;
    wx.getStorage({
      //获取数据的key
      key: 'msgData',
      success: function (res) {
        that.setData({
          msgData: res.data
        })
      }
    });
  }
})

4.实现效果展示

eWbg2.gif