微信小程序如何实现留言功能?

　　我们都知道微信最近推出了小程序功能，最近很多微信用户问我小程序如何实现留言功能?下面小编就带你了解一下小程序如何实现留言功能?

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

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

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

　　1

　　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，这个数字多顺啊。哈哈哈，

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

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

　　不要纠结那么多了。

　　小程序如何实现留言功能?通过小编以上的内容，你知道小程序如何实现留言功能了吗?