devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序学习（第八章作业）

作者：知新_RL | 2024-05-17 15:12:00

赞

踩

微信小程序学习（第八章作业）

简单留言板

需求分析

        留言板是一款能实现浏览留言、发表留言、删除留言和编辑留言的小程序，用户能够浏览当前的已留言内容，并且能按照时间的升序来查看最新的留言内容;能够发表自己的留言内容，在留言发表页填写相关项后即可发表，并能查看到新留言内容;能够删除不需要的留言;能够修改留言内容。因此，简单留言板的功能主要为显示留言、发表留言删除留言和编辑留言。

视图层设计

        根据功能需求分析，共设计4个页面:首页(显示留言页)、发表留言页、编辑留言页和详情页

        首页实现了留言的显示

        单击首页中的发表留言图标十，就可以发表留言

        单击某一留言的主题，即可显示该留言的详情页

        在首页单击“删除”按钮，即可删除该留言内容

        单击“编辑”按钮，即可修改该留言内容

数据库设计

        根据留言板功能，设计数据库表名为test，其中设计的字段有id(编号)、de(标题)content(内容)、image(图像)、count(次数)5个字段，通过Bmob后端云设计

代码实现

1. 应用配置

需要下载及安装Bmod SDK，解压后导入其utils文件夹下的bmob.js文件和common.js文件，然后复制粘贴到你的项目文件夹下的utils文件夹里

项目分为三个包index、detail和image，分别为首页、详情页和图像

小程序代码实现的第一步是设置整个应用的配置，修改根目录下的app.json，示例代码如下:

  1. {
  2.   "pages": [
  3.     "pages/index/index",
  4.     "pages/detail/detail",
  5.     "pages/logs/logs"
  6.   ],
  7.   "window": {
  8.     "navigationBarTextStyle": "black",
  9.     "navigationBarBackgroundColor": "#3891f8",
  10.     "navigationBarTitleText": "小小留言板",
  11.     "backgroundTextStyle":"light"
  12.   },
  13.   "style": "v2",
  14.   "rendererOptions": {
  15.     "skyline": {
  16.       "defaultDisplayBlock": true,
  17.       "disableABTest": true,
  18.       "sdkVersionBegin": "3.0.0",
  19.       "sdkVersionEnd": "15.255.255"
  20.     }
  21.   },
  22.   "componentFramework": "glass-easel",
  23.   "sitemapLocation": "sitemap.json",
  24.   "lazyCodeLoading": "requiredComponents"
  25. }

app.js代码如下：

  1. var Bmob=require('utils/bmob.js')
  2. Bmob.initialize("a57b05be4060c8ea7c8d18f76442fc1e","6209f008e733af8e0251fec19113db3d");
  3. App({
  4.   
  5. })

2.首页

index.wxml代码如下：

  1. <image class="toWrite" bindtap="toAddDiary" src="../img/头像.jpg"/>
  2. <!-- 显示留言 -->
  3. <view class="page">
  4.   <scroll-view 
  5.   lower-threshold="800" 
  6.   bindscrolltolower="pullUpLoad" 
  7.   upper-threshold="0" 
  8.   scroll-y="true" 
  9.   style="height:50px;">
  10.     <view class="page_bd">
  11.       <view class="weui-panel_hd">留言列表</view>
  12.       <view>
  13.         <block wx:if="{{diaryList.lenght>0}}">
  14.           <navigator class="weui-media-box weui-media-box_text" wx:for="{{diaryList}}" wx:key="diaryItem" url="../detail/detail? objectId={{item.objectId}}&count={{item.count}}">
  15.             <view class="content">留言内容:{{item.content}}</view>
  16.             <view class="info">
  17.               <view class="time">时间:{{item.updatedAt}}</view>
  18.               <view class="count">浏览:{{item.count}}</view>
  19.               <view class="operate">
  20.                 <icon type="cancel dels" size="16"></icon>
  21.                 <text class="del" catchtap="deleteDiary" data-id="{{item.objectId}}">删除</text>
  22.                 <icon type="success edits" size="16"></icon>
  23.                 <text catchtap="toModifiyDiary" data-id="{{item.objectId}}" data-content="{{item.content}}" data-title="{{item.title}}">编辑</text>
  24.               </view>
  25.             </view>
  26.           </navigator>
  27.         </block>
  28.       </view>
  29.     </view>
  30.   </scroll-view>
  31. </view>
  32. <!-- 添加留言 -->
  33. <view class="js_dialog" id="androidDialog1" style="opacity: 1;" wx:if="{{writeDiary}}">
  34.   <view class="weui-mask"></view>
  35.   <view class="weui-dialog weui-skin_android">
  36.     <view class="weui-dialog_hd">
  37.       <strong class="weui-dialog_title">添加留言</strong>
  38.     </view>
  39.     <form bindsubmit="addDiary" report-submit="true">
  40.       <view class="weui-dialog_bd">
  41.         <view class="weui-cells_title">标题</view>
  42.         <view class="weui-cells weui-cells_after-title">
  43.           <view class="weui-cell weui-cell_input">
  44.             <view class="weui-cell_bd">
  45.               <input class="weui-input" name="title" placeholder="请输入标题"/>
  46.             </view>
  47.           </view>
  48.         </view>
  49.         <view class="weui-cells_title">留言内容</view>
  50.         <view class="weui-cells weui-cells_after-title">
  51.           <view class="weui-cell">
  52.             <view class="weui-cell_bd">
  53.               <textarea class="weui-textarea" name="content" placeholder="请输入留言内容" style="height: 3.3em;"></textarea>
  54.               <view class="weui-textarea-counter">0/200</view>
  55.             </view>
  56.           </view>
  57.         </view>
  58.         <view class="pic">
  59.           <view class ="pictext"bindtap="uppic">添加图片</view>
  60.           <block wx:if="{isTypeof(url)}">
  61.             <image src="../img/头像.jpg"/>
  62.           </block>
  63.           <block wx:else>
  64.             <image src="{{url}}"/>
  65.           </block>
  66.         </view>
  67.       </view>
  68.       <view class="weui-dialog_ft">
  69.         <view class="weui-dialog_btn weui-dialog_btn_default" bindtap="noneWindows">取消</view>
  70.         <button loading="{{loading}}" class="weui-dialog_btn weui-dialog_btn_primary" form-type="submit">提交</button>
  71.       </view>
  72.     </form>
  73.   </view>
  74. </view>
  75. <!-- 修改留言 -->
  76. <view class="js_dialog" id="androidDialog2" style="opacity: 1;" wx:if="{{modifyDiarys}}">
  77.   <view class="weui-mask"></view>
  78.   <view class="weui-dialog weui-skin_android">
  79.     <view class="weui-dialog_hd">
  80.       <strong class="weui-dialog_title">修改留言</strong>
  81.     </view>
  82.     <form bindsubmit="modifyDiary">
  83.       <view class="weui-dialog_bd">
  84.         <view class="weui-cells_title">标题</view>
  85.         <input class="weui-input" name="title" value="{{nowTitle}}" placeholder="请输入标题"/>
  86.         <view class="weui-cells_title">留言内容</view>
  87.         <view class="weui-cells weui-cells_after-title">
  88.           <view class="weui-cell">
  89.             <view class="weui-cell_bd">
  90.               <textarea class="weui-textarea" name="content" value="{{nowContent}}" placeholder="请输入留言内容" style="height: 3.3em;"></textarea>
  91.               <view class="weui-textarea-counter">0/200</view>
  92.             </view>
  93.           </view>
  94.         </view>
  95.       </view>
  96.       <view class="weui-dialog_ft">
  97.         <view class="weui-dialog_btn weui-dialog_btn_default" bindtap="noneWindows">取消</view>
  98.         <button loading="{{loading}}" class="weui-dialog_btn weui-dialog_btn_primary" form-type="submit">提交</button>
  99.       </view>
  100.     </form>
  101.   </view>
  102. </view>

index.js代码如下：

  1. //引入Bmob逻辑文件及初始化数据
  2. var Bmob = require('../../utils/bmob.js');
  3. var common = require('../../utils/common.js'); 
  4. var app = getApp(); 
  5. var that; 
  6. var url = ""
  7.  Page({
  8.   data:{
  9.   writeDiary:false,//写留言 
  10.   loading:false,
  11.   windowHeight:0,//定义窗口高度 
  12.   windowWidth:0,//定义窗口宽度
  13.   limit:10,	//定义数据提取条数	
  14.   diaryList:[],//定义数据列表 
  15.   modifyDiarys:false
  16.   },
  17. //获取并显示留言数据
  18. onShow:function(){
  19.   getList(this);
  20.   wx.getSystemInfo({ 
  21.     success:(res) => { 
  22.       that.setData({
  23.         windowHeight:res.windowHeight, 
  24.         windowWidth:res.windowWidth
  25.       })
  26.     }
  27.   })
  28.   /*
  29.   *获取数据*/
  30.   function getList(t,k){ 
  31.     that =t;
  32.     var Diary = Bmob.Object.extend("test");//数据表 test
  33.     var query = new Bmob.Query(Diary); 
  34.     var query1 = new Bmob.Query(Diary);
  35.     query. descending('createdAt'); query.include( "own")//查询所有数据
  36.     query.limit(that.data.limit);
  37.     var mainQuery = Bmob.Query.or(query,query1); mainQuery.find({
  38.       success:function(results){//循环处理查询到的数据
  39.         console.log(results); 
  40.         that.setData({
  41.           diaryList:results
  42.         })
  43.       },
  44.       error:function(error){
  45.         console.log("查询失败:"+error.code +"" + error.message);
  46.       }
  47.     });
  48.   }
  49. },
  50. //添加数据
  51. toAddDiary:function(){
  52.   that.setData({
  53.     writeDiary:true
  54.   })
  55. },
  56. //添加图片
  57. uppic:function(){
  58.   var that = this;
  59.   wx.chooseImage({
  60.     count:1,//默认9
  61.     sizeType:['compressed'],//可以指定是原图还是压缩图,默认二者都有
  62.     sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有
  63.     success:function(res){
  64.       var tempFilePaths=res.tempFilePaths;
  65.       if(tempFilePaths.length>0){
  66.         var newDate =new Date();
  67.         var newDateStr=newDate.toLocaleDateString();//获取当前日期做文件主
  68.         var tempFilePath=[tempFilePaths[0]];
  69.         var extension=/\([^.]*)$/.exec(tempFilePath[0]);//获取文件扩展名
  70.         if(extension){
  71.           extension =extension[1].toLowerCase();
  72.         }
  73.         var name =newDateStr+"."+extension;//上传的图片的别名
  74.         var file = new Bmob.File(name,tempFilePaths);
  75.         file.save().then(function(res){
  76.           console.log(res.url());
  77.           url = res.url();
  78.           that.setData({
  79.             url:ur1
  80.           })
  81.         },
  82.         function(error){
  83.           console.log(error);
  84.           }
  85.         )
  86.       }
  87.     }   
  88.   })
  89. },
  90. //添加留言数据
  91. addDiary:function(event){
  92.   var title =event.detail.value.title;
  93.   var content=event.detail.value.content;
  94.   var formId =event.detail.formId;
  95.   console.log("event".event)
  96.   if(! title){
  97.     common.showTip("标题不能为空","loading");
  98.     elseif(! content)
  99.     common.showTip("内容不能为空","loading");
  100.   }else
  101.     that.setData({
  102.       loading:true
  103.     })
  104.   var currentUser=Bmob.User.current();
  105.   var User =Bmob.Object.extend("User");var UserModel=newUser();
  106. //增加留言
  107.   var Diary =Bmob.Object.extend("test");//数据表 
  108.   var diary =new Diary();
  109.   diary.set("title",title);保存title字段内容
  110.   diary.set("formId",formId);//保存 formId
  111.   diary.set("content",content);//保存content字段内容
  112.   diary.set("image",url)//保存图片地址
  113.   diary.set("count",1)//保存浏览次数
  114.   if(currentUser){
  115.     UserModel.id =currentUser.id;
  116.     diary.set("own",UserModel);
  117.   }
  118.   //添加数据,第一个入口参数是nu11
  119.   diary.save(null,{
  120.     success:function(result){
  121.       common.showTip('添加日记成功');
  122.       that.setData({
  123.         writeDiary:false,
  124.         loading:false
  125.       })
  126.       var currentUser =Bmob.User.current();
  127.       that.onShow();
  128.     },error:function(result,error){//添加失败
  129.         common.showTip('添加留言失败,请重新发布','loading');
  130.       }
  131.   });
  132. },
  133. //删除留言
  134. deleteDiary:function(event){
  135.   var that =this;
  136.   var objectId=event.target.dataset.id;
  137.   wx.showModal({
  138.     title:'操作提示',
  139.     content:'确定要删除要留言?',
  140.     success:function(res){
  141.       if(res.confirm){
  142. //删除留言
  143.         var Diary = Bmob.Object.extend("test");
  144. //创建查询对象,入口参数是对象类的实例
  145.         var query =new Bmob.Query(Diary);
  146.         query.get(objectId,{
  147.           success:function(object){
  148. //The object was retrieved successfully.
  149.             object.destroy({
  150.               success:function(deleteObject){
  151.                 console.log('删除留言成功');
  152.                 getList(that)
  153.               },error:function(object,error){
  154.                   console.log('删除留言失败');
  155.                 }
  156.             });
  157.           },error,function(object,error){
  158.               console.log("query object fail");
  159.             }
  160.         });
  161.       }
  162.     }
  163.   })
  164. },
  165. toModifyDiary:function(event){
  166.   var nowTile =event.target.dataset.title;
  167.   var nowContent =event.target.dataset.content;
  168.   var nowId =event.target.dataset.id;
  169.   that.setData({
  170.     modifyDiarys :true,
  171.     nowTitle:nowTile,
  172.     nowContent:nowContent,
  173.     nowId:nowId
  174.   })
  175.   modifyDiary,function(e){
  176.     var t =this;
  177.     modify(t,e)
  178.     function modify(t,e){
  179.       var that = t;//修改日记
  180.       var modyTitle = e.detail.value.title;
  181.       var modyContent = e.detail.value.content; 
  182.       var objectId =e.detail.value.content; 
  183.       var thatTitle = that.data.nowTitle;
  184.       var thatContent= that.data.nowContent;
  185.       if((modyTitle != thatTitle ||modyContent != thatContent)){ 
  186.         if(modyTitle == "" ||lmodyContent == ""){
  187.           common.showTip('标题或内容不能为空','1oading');
  188.         }else{
  189.           console.log(modyContent)
  190.           var Diary = Bmob.Object.extend("test"); 
  191.           var query = new Bmob.Query(Diary);
  192. //这个id是要修改条目的id,你在生成这个存储并成功时可以获取到,请看前面的文档
  193.           query.get(that.data.nowId,{
  194.             success:function(result){
  195. //回调中可以取得这个GameScore对象的一个实例,然后就可以修改它了
  196.               result.set('title',modyTitle);
  197.               result.set('content',modyContent);
  198.               result.save();
  199.               common.showTip('留言修改成功','success',function(){ 
  200.                 that.onShow(); 
  201.                 that.setData({
  202.                   modifyDiarys:false
  203.                 })
  204.               });
  205.             },error:function(object,error){}
  206.           });
  207.          }
  208.           elseif(modyTitle == "" ||lmodyContent == "");{
  209.             common.showTip('标题或内容不能为空','1oading');
  210.           }
  211.       }else{
  212.         that.setData({
  213.           modifyDiarys:false
  214.         })
  215.         common.showTip('修改成功','loading');
  216.       }
  217.     }
  218.   }
  219. },
  220. })

index.wxss文件：

  1. image{
  2.   margin-left: 15%;
  3. }
  4. /* 留言列表样式 */
  5. .weui-panel_hd{
  6.   font-size: 30px;
  7.   text-align: center;
  8. }
  9. /* 添加留言样式 */
  10. .weui-dialog_hd{
  11.   font-size: 25px;
  12.   text-align: center;
  13. }
  14. /* 添加留言下面全的的样式 */
  15. .weui-dialog_bd{
  16.   font-size: 23px;
  17. }
  18. /* 输入标题的样式 */
  19. .weui-input{
  20.   height: 40px;
  21.   border: 3px solid #ccc;
  22. }
  23. /* 留言内容样式 */
  24. .weui-cells_title{
  25.   margin-top: 5px;
  26. }
  27. /* 留言内容框样式 */
  28. .weui-textarea{
  29.   width: 100%;
  30.   border: 3px solid #ccc;
  31. }
  32. /* 次数样式 */
  33. .weui-textarea-counter{
  34.   margin-top: 5px;
  35.   text-align: right;
  36. }
  37. /* 添加图片样式 */
  38. .pictext{
  39.   font-size: 25px;
  40.   text-align: center;
  41. }
  42. /* 取消样式 */
  43. .weui-dialog_ft{
  44.   font-size: 30px;
  45.   text-align: center;
  46. }
  47. /* 提交按钮样式 */
  48. .weui-dialog_ft button{
  49.   font-size: 30px;
  50. }

3.详情页

detail.wxml代码如下：

  1. <view class="page">
  2.   <view>
  3.     <view>
  4.       <view>留言主题:</view>
  5.       <view>{{rows.title}}</view>
  6.       <view>
  7.         <view>留言内容:</view>
  8.         <view>{{rows.content}}</view>
  9.         <view class="pic">
  10.           <image src="{{rows.image}}"/>
  11.         </view>
  12.         <view>浏览次数:{{rows.count}}</view>
  13.         <view>创建时间:{{rows.createdAt}}</view>
  14.       </view>
  15.     </view>
  16.   </view>
  17.   <view class="footer">
  18.     <text>Copyright © 2017-2019 www.smartbull.cn</text>
  19.   </view>
  20. </view>

detail.js代码如下：

  1. varBmob =require('../../utils/bmob');
  2. Page({
  3.   data:{
  4.     rows:{}//留言详情
  5.   },
  6.   onLoad:function(e){
  7.     //页面初始化options为页面跳转所带来的参数
  8.     console.log(e.objectId)
  9.     var objectId=e.objectId;
  10.     var newcount=e.count;
  11.     var that =this;
  12.     var Diary = Bmob.Object.extend("test");
  13.     var query = new Bmob.Query(Diary);
  14.     query.get(objectId,{
  15.       success:function(result){
  16.         console.log(result);
  17.         that.setData({
  18.           rows:result,
  19.         })
  20.         newcount =parseInt(newcount)+1//浏览次数加1
  21.         result.set("count",newcount)//保存浏览次数
  22.         result.save()
  23.       },
  24.       error:function(result,error){
  25.         console.log("查询失败");
  26.       }
  27.     });
  28.   }
  29. })

运行效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/584113
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号