动手写一个微信小程序留言demo

发布于 / web前端 / 5 条评论/ 最后更新:17-10-16

前言

看了一天的文档,加上一些教学视频,总算对微信小程序有个初步的了解,所以写了这个简单的留言板demo。

页面展示

支持的功能:
1. 添加留言功能
2. 删除留言功能
3. 添加后自动保存到Storage
3. 刷新后从自动Storage自动读取内容

结构

具体结构

app.json

index.js

//index.js
Page({
  onLoad: function (options) {
    var that = this;
    //获取本地数据 https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html#wxremovestorageobject
    wx.getStorage({
      key: 'msgData',
      success: function (res) {
        // console.log(res.data);
        that.setData({ msgData: res.data });
      }
    });
  },
  data: {
    msgData: []
  },
  changeInput(ev) {
    // console.log(ev);
    this.setData({
      inputVal: ev.detail.value
    })
  },
  // 添加数据
  addMsg() {
    // console.log(this.data.inputVal);
    // 判断是否为空
    if (!this.data.inputVal==''){
      var list = this.data.msgData;
      list.push({
        msg: this.data.inputVal
      });
      // 更新
      this.setData({
        msgData: list,
        inputVal: ''
      })
      wx.setStorage({
        key: "msgData",
        data: list,
      })
    }else{
      console.log('无数据')
    }

  },
  // 删除数据
  deleteMsg(ev) {
    // console.log(ev.target);
    var n = ev.target.dataset.index;
    var list =this.data.msgData;
    list.splice(n,1);
    this.setData({
      msgData:list
    });
    wx.removeStorage({
      key: 'msgData',
      // success: function (res) {
      //   console.log(res.data)
      // }
    })
  }
})

index.wxml

<!--index.wxml-->
<view class='message-box'>
  <!--留言区域  -->
  <view class='send-box'>
    <input class='input' type='text' placeholder='请留言...' placeholder-class='placeStyle' bindinput='changeInput' value="{{inputVal}}" />
    <button size='mini' type='primary' bindtap='addMsg'>添加</button>
  </view>
  <text class='no-message' wx:if="{{msgData.length==0}}">暂无留言...</text>
  <!--留言列表展示区域  -->
  <view class='list-view' wx:for="{{msgData}}" wx:key="{{index}}">
    <view class='item'>
      <text class='text1'>{{item.msg}}</text>
      <!--data-index='{{index}}'设置下标 方便拿到后删除  -->
      <icon type='cancel' class='delete' bindtap='deleteMsg' data-index='{{index}}'></icon>
    </view>
  </view>
</view>

index.wxss

/**index.wxss**/
.input{
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
}
.message-box{
  padding: 20px;
}
.send-box{
  display: flex;
}
.placeStyle{
  color: salmon;
}
.list-view{
  margin: 20px 0 0 0;
}
.item{
  border-bottom: 1px dashed #ccc;
  height: 30px;
  line-height: 30px;
}
.text1{
  float: left;
}
.delete{
  float: right;
}
.no-message{
  display: block;
  margin: 10px 0 0 0;
  color: saddlebrown;
}

恩,就是这么简单,明天继续,fighting!!!

晚安世界。

转载原创文章请注明,转载自: Hero-x » 动手写一个微信小程序留言demo
  1. avatar

    文章不错支持一下吧

  2. avatar

    赞一个,我发现代码很像VUE.js的语法~另外现在是不是还不能个人发布小程序呀?

    1. avatar
      @星球彦 很像VUE 能不能发布我就不知道了 只是顺带学了点
    2. avatar
      @星球彦 有主体好像可以发布个人形式的小程序~
      1. avatar
        @宅小猫 我只知道有公司资质可以发布的……