微信小程序第八章 留言板

四、简单留言板

本节以简单留言板为例，介绍小程序项目的开发过程及代码实现。

1.需求分析

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

2.视图层设计 

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

3.数据库设计 

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

4.代码实现 

1.应用配置 

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

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor":"#3891f8",
  "navigationBarTitleText":"小小留言板",
  "navigationBarTextStyle": "black"
  }
}

首页实现留言内容的显示、添加、修改、获取、添加。 

index.wxml代码如下：

<image class ="toWrite " bindtap ="toAddDiary"src ="../index/mj6.jpg" style="width: 400px;"/>
<!-- 显示留言 -->
<view class = "page">
<scroll-view lower-threshold="800"
bindscrolltolower="pullUp-Load"upper-threshold ="0 "scroll-y="true"
style = "height: {{win-dowHeight}}px;">
<view class ="page__bd">
<button style="width: 100px;height: 50px; border: 1px saddlebrown;"><view class = "weui-panel__hd" style="text-align: center;">留言列表</view>
</button>
<view>
<block wx:if="{{diaryList.length >0}}">
<navigator class="weui-media-box weui-media-box_text"
wx:for="{{diaryList}}"
wx:key = "diaryItem"url ="/pages/index /detail? ob-jectId={{item.objectId}}&count={{item.count}}" >
<view class="title">
主题:{{item.title}}</view>
<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 ="iitem.objectId}}">删除</text>
<icon type="success edits"size="16"></icon>
<text catchtap ="toModifyDiary" 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" style="margin-left: 150px;">添加留言</strong>
</view>
<form bindsubmit="addDiary" report-submit="true">
<view class="weui-dialog__bd">
<view class="weui-cells__title" style="text-align: center;">标题</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="请输入标题" style="text-align: center;"/>
</view>
</view>
</view>
<view class ="weui-cel1s title" style="text-align: center;">留言内容</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="margin-left: 130px;" />
<view class="weui-textarea-counter" style="text-align: center;">0/200</view>
</view>
</view>
</view>
<view class="pic">
<view class ="pictext"bindtap="uppic" style="text-align: center;">添加图片</view><block wx:if="{isTypeof(url)})">
<image src="../index/mj6.jpg" style="width: 400px;"/>
</block>
<block wx:else>
<image src="{{url}}"/>
</block>
</view>
</view >
<view class="weui-dialog ft">
  <button loading="{{loading}}"
class="weui-dialog__btn weui-diaLog__btn__primary"formType="info">取消</button>
<button loading="{{loading}}"
class="weui-dialog__btn weui-diaLog__btn__primary"formType="info">提交</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" style="text-align: center;">修改留言</strong>
</view >
<form bindsubmit="modifyDiary">
<view class="weui-dialog bd">
<view class="weui-cells title" style="text-align: center;">标题</view>
<input class ="weui =input"name ="title" value ="inowTitle"placeholder="请输入标题" style="text-align: center;"/>
<view class="weui-cells title" style="text-align: center;">留言内容</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="margin-left: 150px;" />
<view class="weui-textarea-counter" style="text-align: center;" style="text-align: center;">0/200 </view>
</view>
</view>
</view >
</view>
<view class="weui-dialog ft">
<view class="weui-dialog btn weui -dialog btn_default" bindtag="noneWindows">取消</view>
<button loading ="{{loading}}" class ="weui-dialog btn weui-diaLog btn primary"
formType="submit">提交</button>
</view>
</form>
</view>
</view>
 

 运行效果如下：