微信小程序現在很火，於是也就玩玩，做了一個簡易的留言板，讓大家看看，你們會說no picture you say a j8 a,好吧先上圖。

樣子就是的，功能一目了然，下面我們就貼實現的代碼，首先是HTML頁面，好吧，其實微信小程序的是wxml（微信ml）總感覺怪怪的，有木有。

 1 <!--index.wxml-->
 2 <view class="msg-box">
 3 <!--留言-->
 4    <view class="send-box">
 5       <input bindinput="changeInputValue"
 
 class="input" type="text" value="{{inputVal}}" placeholder="請輸入留言……" placeholder-class="place-input"/>
 6       <button size="mini" type="primary" bindtap="addMsg">添加</button>
 7    </view>
 8    <!--留言列表-->
 9    <text class="msg-info" wx:if="{{msgData.length==0}}">暫無留言……^_^</
 
text>
10    <view class="list-view">
11       <view class="item" wx:for="{{msgData}}" wx:key="{{index}}">
12         <text class="text1">{{item.msg}}</text>
13         <!--button size="mini" plain class="close-btn" type="default">刪除</button-->
14         <icon 
 
type="cancel" bindtap="DelMsg" data-index="{{index}}" class="close-btn" />
15       </view>
16    </view>
17 </view>

微信小程序裏把div改成了view，聽說div也可以用，沒有實驗過，不知道真假。不過就這樣吧，反正原理都一樣，頁面效果主要看css，又錯了，是wxss（微信ss）說實話總覺得……這種感覺不好多說。

看我們的布局代碼，超簡單，完全和css一樣

 1 /**index.wxss**/
 2 .msg-box{
 3   padding: 20px;
 4 }
 5 .send-box{
 6   display: flex;
 7 }
 8 .input{
 9   border: 1px solid #B0C4DE;
10   padding: 5px;
11 }
12 .msg-info{
13   display: block;
14   margin: 10px 0 0 0 ;
15   color: #339900;
16 
17 }
18 .place-input{
19   color: salmon;
20 }
21 .list-view{
22   margin: 20px 0 0 0;
23 }
24 .item{
25   overflow: hidden;
26   border-bottom: 1px dashed #87CEFF;
27   height: 30px;
28   line-height: 30px;
29 }
30 .text1{
31   float: left;
32 }
33 .close-btn{
34   float: right;
35   margin: 5px 5px 0 0;
36 }

才36行，現在一看，好吧，真特麽簡單。微信小程序的功能實現主要看js部分，好在這個他們沒有叫（wxjs），微信小程序的js寫法，怎麽說呢，假如你會vue.js React或者是AngularJS，完全是玩一樣的就會了，好吧，不過這三個我暫時都不會！！！！！！！！！！！！！！！

js代碼如下：

 1 //index.js
 2 //獲取應用實例
 3 var app = getApp();
 4 Page({
 5   data: {
 6     msgData:[] 
 7   },
 8   changeInputValue(ev){
 9     this.setData({
10       inputVal:ev.detail.value
11     })
12   },
13 //刪除留言
14   DelMsg(ev){
15     var n=ev.target.dataset.index;
16 
17     var list = this.data.msgData;
18     list.splice(n,1);
19     
20     this.setData({
21       msgData:list
22     });
23   },
24 //添加留言
25   addMsg(){
26     var list = this.data.msgData;
27     list.push({
28       msg:this.data.inputVal
29     });
30     //更新
31     this.setData({
32       msgData:list,
33       inputVal:‘‘
34     }); 
35   },
36 })

完美的36行，早知道wxml註釋寫一堆應該也湊個36，這個數字多順啊。哈哈哈，

好了，所有的功能代碼都在這裏了，大家趕快也去玩玩吧。

註明一下代碼出處，這個我是按照騰訊課堂裏的某個課程寫的，，，，，，，，，，，，具體的忘了，也不查了，好歹說明一下，不要說我盜版，因為這個本身就是為了大家學習用的，……………………

不要糾結那麽多了。

微信小程序實現簡易留言板