小程序模板网

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

发布时间:2017-12-15 09:05 所属栏目:小程序开发教程

微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图。样子就是的,功能一目了然,下面我们就贴实现的代码,首先是HTML页面,好吧,其实微信小程序 ...

 
 
 

微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说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. 14 DelMsg(ev){
  15. 15 var n=ev.target.dataset.index;
  16. 16
  17. 17 var list = this.data.msgData;
  18. 18 list.splice(n,1);
  19. 19
  20. 20 this.setData({
  21. 21 msgData:list
  22. 22 });
  23. 23 },
  24. 24 //添加留言
  25. 25 addMsg(){
  26. 26 var list = this.data.msgData;
  27. 27 list.push({
  28. 28 msg:this.data.inputVal
  29. 29 });
  30. 30 //更新
  31. 31 this.setData({
  32. 32 msgData:list,
  33. 33 inputVal:''
  34. 34 });
  35. 35 },
  36. 36 })

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

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

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

不要纠结那么多了。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18174.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询