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

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

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

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

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

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

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

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

js代码如下：

1. 1 //index.js
2. 2 //获取应用实例
3. 3 var app = getApp();
4. 4 Page({
5. 5 data: {
6. 6 msgData:[]
7. 7 },
8. 8 changeInputValue(ev){
9. 9 this.setData({
10. 10 inputVal:ev.detail.value
11. 11 })
12. 12 },
13. 13 //删除留言
14. 邀请