微信小程序实现简易留言板

微信小程序现在很火，于是也就玩玩，做了一个简易的留言板，让大家看看，你们会说no picture you say a j8 a,好吧先上图。

样子就是的，功能一目了然，下面我们就贴实现的代码，首先是HTML页面，好吧，其实微信小程序的是wxml（微信ml）总感觉怪怪的，有木有。

 <!--index.wxml-->
 <view class="msg-box">
 <!--留言-->
    <view class="send-box">
       <input bindinput="changeInputValue" class="input" type="text" value="{{inputVal}}" placeholder="请输入留言……" placeholder-class="place-input"/>
       <button size="mini" type="primary" bindtap="addMsg">添加</button>
    </view>
    <!--留言列表-->
    <text class="msg-info" wx:if="{{msgData.length==0}}">暂无留言……^_^</text>
    <view class="list-view">
       <view class="item" wx:for="{{msgData}}" wx:key="{{index}}">
         <text class="text1">{{item.msg}}</text>
         <!--button size="mini" plain class="close-btn" type="default">删除</button-->
         <icon type="cancel" bindtap="DelMsg" data-index="{{index}}" class="close-btn" />
       </view>
    </view>
 </view>

微信小程序里把div改成了view，听说div也可以用，没有实验过，不知道真假。不过就这样吧，反正原理都一样，页面效果主要看css，又错了，是wxss（微信ss）说实话总觉得……这种感觉不好多说。

看我们的布局代码，超简单，完全和css一样

 /**index.wxss**/
 .msg-box{
   padding: 20px;
 }
 .send-box{
   display: flex;
 }
 .input{
   border: 1px solid #B0C4DE;
   padding: 5px;
 }
 .msg-info{
   display: block;
   margin: 10px 0 0 0 ;
   color: #339900;

 }
 .place-input{
   color: salmon;
 }
 .list-view{
   margin: 20px 0 0 0;
 }
 .item{
   overflow: hidden;
   border-bottom: 1px dashed #87CEFF;
   height: 30px;
   line-height: 30px;
 }
 .text1{
   float: left;
 }
 .close-btn{
   float: right;
   margin: 5px 5px 0 0;
 }

才36行，现在一看，好吧，真特么简单。微信小程序的功能实现主要看js部分，好在这个他们没有叫（wxjs），微信小程序的js写法，怎么说呢，假如你会vue.js React或者是AngularJS，完全是玩一样的就会了，好吧，不过这三个我暂时都不会！！！！！！！！！！！！！！！

js代码如下：

 //index.js
 //获取应用实例
 var app = getApp();
 Page({
   data: {
     msgData:[]
   },
   changeInputValue(ev){
     this.setData({
       inputVal:ev.detail.value
     })
   },
 //删除留言
   DelMsg(ev){
     var n=ev.target.dataset.index;

     var list = this.data.msgData;
     list.splice(n,1);

     this.setData({
       msgData:list
     });
   },
 //添加留言
   addMsg(){
     var list = this.data.msgData;
     list.push({
       msg:this.data.inputVal
     });
     //更新
     this.setData({
       msgData:list,
       inputVal:''
     });
   },
 })

完美的36行，早知道wxml注释写一堆应该也凑个36，这个数字多顺啊。哈哈哈，

好了，所有的功能代码都在这里了，大家赶快也去玩玩吧。

注明一下代码出处，这个我是按照腾讯课堂里的某个课程写的，，，，，，，，，，，，具体的忘了，也不查了，好歹说明一下，不要说我盗版，因为这个本身就是为了大家学习用的，……………………

不要纠结那么多了。