微信小程序怎么做个简单留言板？

微信公开课小程序热门讨论「微信小程序怎么做个简单留言板？」最新回复-微信小程序现在很火，于是也就玩玩，做了一个简易的留言板，让大家看看，你们会说nopictureyousayaj8a,好吧先上图。样子就是的，功能一目了然，下面我们就贴实现的代码，首先是HTML页面，好吧，其实微信小程序的是wxml（微信ml）总感觉怪怪的，有木有。微信小程序里把div改成了view，听说div也可以用，没有实验过，不知道真假。不过就这样吧，反正原理都一样，页面效果主要看css，又错了，是wxss（微信ss）说实话总觉得……这种感觉不好多说。看我们的布局代码，超简单，完全和css一样才36行，现在一看，好吧，真特么简单。微信小程序的功能实现主要看js部分，好在这个他们没有叫（wxjs），微信小程序的js写法，怎么说呢，假如你会vue.jsReact或者是AngularJS，完全是玩一样的就会了，好吧，不过这三个我暂时都不会！！！！！！！！！！！！！！！完美的36行，早知道wxml注释写一堆应该也凑个36，这个数字多顺啊。哈哈哈，好了，所有的功能代码都在这里了，大家赶快也去玩玩吧。
首先是HTML页面，好吧，其实微信小程序的是wxml（微信ml）!--index.wxml--viewclass=msg-box!--留言--viewclass=send-boxinputbindinput=changeInputValueclass=inputtype=textvalue={{inputVal}}placeholder=请输入留言……placeholder-class=place-input/buttonsize=minitype=primarybindtap=addMsg添加/button/view!--留言列表--textclass=msg-infowx:if={{msgData.length==0}}暂无留言……^_^/textviewclass=list-viewviewclass=itemwx:for={{msgData}}wx:key={{index}}textclass=text1{{item.msg}}/text!--buttonsize=miniplainclass=close-btntype=default删除/button--icontype=cancelbindtap=DelMsgdata-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:1pxsolid#B0C4DE;padding:5px;}.msg-info{display:block;margin:10px000;color:#339900;}.place-input{color:salmon;}.list-view{margin:20px000;}.item{overflow:hidden;border-bottom:1pxdashed#87CEFF;height:30px;line-height:30px;}.text1{float:left;}.close-btn{float:right;margin:5px5px00;}才36行，现在一看，好吧，真特么简单。微信小程序的功能实现主要看js部分，好在这个他们没有叫（wxjs），微信小程序的js写法，怎么说呢，假如你会vue.jsReact或者是AngularJS，完全是玩一样的就会了，好吧，不过这三个我暂时都不会！！！！！！！！！！！！！！！js代码如下：//index.js//获取应用实例varapp=getApp();Page({data:{msgData:[]},changeInputValue(ev){this.setData({inputVal:ev.detail.value})},//删除留言DelMsg(ev){varn=ev.target.dataset.index;varlist=this.data.msgData;list.splice(n,1);this.setData({msgData:list});},//添加留言addMsg(){varlist=this.data.msgData;list.push({msg:this.data.inputVal});//更新this.setData({msgData:list,inputVal:});},}) 更多有关「微信小程序怎么做个简单留言板？」的疑问请扫码关注微信公开课+小程序！了解更多