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

简单留言板

需求分析

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

视图层设计

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

首页实现了留言的显示

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

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

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

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

数据库设计

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

代码实现

1. 应用配置

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

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

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

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#3891f8",
    "navigationBarTitleText": "小小留言板",
    "backgroundTextStyle":"light"
  },
  "style": "v2",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

app.js代码如下：

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

2.首页

index.wxml代码如下：

<image class="toWrite" bindtap="toAddDiary" src="../img/头像.jpg"/>
<!-- 显示留言 -->
<view class="page">
  <scroll-view 
  lower-threshold="800" 
  bindscrolltolower="pullUpLoad" 
  upper-threshold="0" 
  scroll-y="true" 
  style="height:50px;">
    <view class="page_bd">
      <view class="weui-panel_hd">留言列表</view>
      <view>
        <block wx:if="{{diaryList.lenght>0}}">
          <navigator class="weui-media-box weui-media-box_text" wx:for="{{diaryList}}" wx:key="diaryItem" url="../detail/detail? objectId={{item.objectId}}&count={{item.count}}">
            <view class="content">留言内容:{{item.content}}</view>
            <view class="info">
              <view class="time">时间:{{item.updatedAt}}</view>
              <view class="count">浏览:{{item.count}}</view>
              <view class="operate">
                <icon type="cancel dels" size="16"></icon>
                <text class="del" catchtap="deleteDiary" data-id="{{item.objectId}}">删除</text>
                <icon type="success edits" size="16"></icon>
                <text catchtap="toModifiyDiary" data-id="{{item.objectId}}" data-content="{{item.content}}" data-title="{{item.title}}">编辑</text>
              </view>
            </view>
          </navigator>
        </block>
      </view>
    </view>
  </scroll-view>
</view>
<!-- 添加留言 -->
<view class="js_dialog" id="androidDialog1" style="opacity: 1;" wx:if="{{writeDiary}}">
  <view class="weui-mask"></view>
  <view class="weui-dialog weui-skin_android">
    <view class="weui-dialog_hd">
      <strong class="weui-dialog_title">添加留言</strong>
    </view>
    <form bindsubmit="addDiary" report-submit="true">
      <view class="weui-dialog_bd">
        <view class="weui-cells_title">标题</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell_bd">
              <input class="weui-input" name="title" placeholder="请输入标题"/>
            </view>
          </view>
        </view>
        <view class="weui-cells_title">留言内容</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell">
            <view class="weui-cell_bd">
              <textarea class="weui-textarea" name="content" placeholder="请输入留言内容" style="height: 3.3em;"></textarea>
              <view class="weui-textarea-counter">0/200</view>
            </view>
          </view>
        </view>
        <view class="pic">
          <view class ="pictext"bindtap="uppic">添加图片</view>
          <block wx:if="{isTypeof(url)}">
            <image src="../img/头像.jpg"/>
          </block>
          <block wx:else>
            <image src="{{url}}"/>
          </block>
        </view>
      </view>
      <view class="weui-dialog_ft">
        <view class="weui-dialog_btn weui-dialog_btn_default" bindtap="noneWindows">取消</view>
        <button loading="{{loading}}" class="weui-dialog_btn weui-dialog_btn_primary" form-type="submit">提交</button>
      </view>
    </form>
  </view>
</view>
<!-- 修改留言 -->
<view class="js_dialog" id="androidDialog2" style="opacity: 1;" wx:if="{{modifyDiarys}}">
  <view class="weui-mask"></view>
  <view class="weui-dialog weui-skin_android">
    <view class="weui-dialog_hd">
      <strong class="weui-dialog_title">修改留言</strong>
    </view>
    <form bindsubmit="modifyDiary">
      <view class="weui-dialog_bd">
        <view class="weui-cells_title">标题</view>
        <input class="weui-input" name="title" value="{{nowTitle}}" placeholder="请输入标题"/>
        <view class="weui-cells_title">留言内容</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell">
            <view class="weui-cell_bd">
              <textarea class="weui-textarea" name="content" value="{{nowContent}}" placeholder="请输入留言内容" style="height: 3.3em;"></textarea>
              <view class="weui-textarea-counter">0/200</view>
            </view>
          </view>
        </view>
      </view>
      <view class="weui-dialog_ft">
        <view class="weui-dialog_btn weui-dialog_btn_default" bindtap="noneWindows">取消</view>
        <button loading="{{loading}}" class="weui-dialog_btn weui-dialog_btn_primary" form-type="submit">提交</button>
      </view>
    </form>
  </view>
</view>

index.js代码如下：

//引入Bmob逻辑文件及初始化数据
var Bmob = require('../../utils/bmob.js');
var common = require('../../utils/common.js'); 
var app = getApp(); 
var that; 
var url = ""
 Page({
  data:{
  writeDiary:false,//写留言 
  loading:false,
  windowHeight:0,//定义窗口高度 
  windowWidth:0,//定义窗口宽度
  limit:10,	//定义数据提取条数	
  diaryList:[],//定义数据列表 
  modifyDiarys:false
  },
//获取并显示留言数据
onShow:function(){
  getList(this);
  wx.getSystemInfo({ 
    success:(res) => { 
      that.setData({
        windowHeight:res.windowHeight, 
        windowWidth:res.windowWidth
      })
    }
  })
  /*
  *获取数据*/
  function getList(t,k){ 
    that =t;
    var Diary = Bmob.Object.extend("test");//数据表 test
    var query = new Bmob.Query(Diary); 
    var query1 = new Bmob.Query(Diary);
    query. descending('createdAt'); query.include( "own")//查询所有数据
    query.limit(that.data.limit);
    var mainQuery = Bmob.Query.or(query,query1); mainQuery.find({
      success:function(results){//循环处理查询到的数据
        console.log(results); 
        that.setData({
          diaryList:results
        })
      },
      error:function(error){
        console.log("查询失败:"+error.code +"" + error.message);
      }
    });
  }
},
//添加数据
toAddDiary:function(){
  that.setData({
    writeDiary:true
  })
},
//添加图片
uppic:function(){
  var that = this;
  wx.chooseImage({
    count:1,//默认9
    sizeType:['compressed'],//可以指定是原图还是压缩图,默认二者都有
    sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有
    success:function(res){
      var tempFilePaths=res.tempFilePaths;
      if(tempFilePaths.length>0){
        var newDate =new Date();
        var newDateStr=newDate.toLocaleDateString();//获取当前日期做文件主
        var tempFilePath=[tempFilePaths[0]];
        var extension=/\([^.]*)$/.exec(tempFilePath[0]);//获取文件扩展名
        if(extension){
          extension =extension[1].toLowerCase();
        }
        var name =newDateStr+"."+extension;//上传的图片的别名
        var file = new Bmob.File(name,tempFilePaths);
        file.save().then(function(res){
          console.log(res.url());
          url = res.url();
          that.setData({
            url:ur1
          })
        },
        function(error){
          console.log(error);
          }
        )
      }
    }   
  })
},
//添加留言数据
addDiary:function(event){
  var title =event.detail.value.title;
  var content=event.detail.value.content;
  var formId =event.detail.formId;
  console.log("event".event)
  if(! title){
    common.showTip("标题不能为空","loading");
    elseif(! content)
    common.showTip("内容不能为空","loading");
  }else
    that.setData({
      loading:true
    })
  var currentUser=Bmob.User.current();
  var User =Bmob.Object.extend("User");var UserModel=newUser();
//增加留言
  var Diary =Bmob.Object.extend("test");//数据表 
  var diary =new Diary();
  diary.set("title",title);保存title字段内容
  diary.set("formId",formId);//保存 formId
  diary.set("content",content);//保存content字段内容
  diary.set("image",url)//保存图片地址
  diary.set("count",1)//保存浏览次数
  if(currentUser){
    UserModel.id =currentUser.id;
    diary.set("own",UserModel);
  }
  //添加数据,第一个入口参数是nu11
  diary.save(null,{
    success:function(result){
      common.showTip('添加日记成功');
      that.setData({
        writeDiary:false,
        loading:false
      })
      var currentUser =Bmob.User.current();
      that.onShow();
    },error:function(result,error){//添加失败
        common.showTip('添加留言失败,请重新发布','loading');
      }
  });
},
//删除留言
deleteDiary:function(event){
  var that =this;
  var objectId=event.target.dataset.id;
  wx.showModal({
    title:'操作提示',
    content:'确定要删除要留言?',
    success:function(res){
      if(res.confirm){
//删除留言
        var Diary = Bmob.Object.extend("test");
//创建查询对象,入口参数是对象类的实例
        var query =new Bmob.Query(Diary);
        query.get(objectId,{
          success:function(object){
//The object was retrieved successfully.
            object.destroy({
              success:function(deleteObject){
                console.log('删除留言成功');
                getList(that)
              },error:function(object,error){
                  console.log('删除留言失败');
                }
            });
          },error,function(object,error){
              console.log("query object fail");
            }
        });
      }
    }
  })
},
toModifyDiary:function(event){
  var nowTile =event.target.dataset.title;
  var nowContent =event.target.dataset.content;
  var nowId =event.target.dataset.id;
  that.setData({
    modifyDiarys :true,
    nowTitle:nowTile,
    nowContent:nowContent,
    nowId:nowId
  })
  modifyDiary,function(e){
    var t =this;
    modify(t,e)
    function modify(t,e){
      var that = t;//修改日记
      var modyTitle = e.detail.value.title;
      var modyContent = e.detail.value.content; 
      var objectId =e.detail.value.content; 
      var thatTitle = that.data.nowTitle;
      var thatContent= that.data.nowContent;
      if((modyTitle != thatTitle ||modyContent != thatContent)){ 
        if(modyTitle == "" ||lmodyContent == ""){
          common.showTip('标题或内容不能为空','1oading');
        }else{
          console.log(modyContent)
          var Diary = Bmob.Object.extend("test"); 
          var query = new Bmob.Query(Diary);
//这个id是要修改条目的id,你在生成这个存储并成功时可以获取到,请看前面的文档
          query.get(that.data.nowId,{
            success:function(result){
//回调中可以取得这个GameScore对象的一个实例,然后就可以修改它了
              result.set('title',modyTitle);
              result.set('content',modyContent);
              result.save();
              common.showTip('留言修改成功','success',function(){ 
                that.onShow(); 
                that.setData({
                  modifyDiarys:false
                })
              });
            },error:function(object,error){}
          });
         }
          elseif(modyTitle == "" ||lmodyContent == "");{
            common.showTip('标题或内容不能为空','1oading');
          }
      }else{
        that.setData({
          modifyDiarys:false
        })
        common.showTip('修改成功','loading');
      }
    }
  }
},
})

3.详情页

detail.wxml代码如下：

<view class="page">
  <view>
    <view>
      <view>留言主题:</view>
      <view>{{rows.title}}</view>
      <view>
        <view>留言内容:</view>
        <view>{{rows.content}}</view>
        <view class="pic">
          <image src="{{rows.image}}"/>
        </view>
        <view>浏览次数:{{rows.count}}</view>
        <view>创建时间:{{rows.createdAt}}</view>
      </view>
    </view>
  </view>
  <view class="footer">
    <text>Copyright © 2017-2019 www.smartbull.cn</text>
  </view>
</view>

detail.js代码如下：

varBmob =require('../../utils/bmob');
Page({
  data:{
    rows:{}//留言详情
  },
  onLoad:function(e){
    //页面初始化options为页面跳转所带来的参数
    console.log(e.objectId)
    var objectId=e.objectId;
    var newcount=e.count;
    var that =this;
    var Diary = Bmob.Object.extend("test");
    var query = new Bmob.Query(Diary);
    query.get(objectId,{
      success:function(result){
        console.log(result);
        that.setData({
          rows:result,
        })
        newcount =parseInt(newcount)+1//浏览次数加1
        result.set("count",newcount)//保存浏览次数
        result.save()
      },
      error:function(result,error){
        console.log("查询失败");
      }
    });
  }
})

运行效果