微信心邮小程序开发实战（3）-心情列表与添加-md 回顾上一篇文章讲了微信小程序心邮信箱功能的实现，这节讲代码心情列表的实现，这跟上节信箱列表差不多，只是只显示自己的心情，这个就不讲了，讲下如何添加倾诉心情。目录结构write/ ├── write.js ├── write.json ├── write.wxml └── write.wxss右侧浮动添加按钮<navigator class="toWrite" url="../write/write">样式 .toWrite { ./pages/index/index.wxss:27width:100rpx; height:100rpx; background:url(http://bmob-cdn-7744.b0.upaiyun.com/2016/11/29/360d32564024a5ab80e4477169949473.png) no-repeat; padding:0; background-size:cover; position:fixed; right:74rpx; bottom:100rpx; border-bottom:0; border-top:0; } write.wxml 页面布局<loading hidden="{{loading}}"> 页面初始化中... </loading> <view class="add_pic" bindtap="uploadPic" wx-if="{{!isSrc}}"> <view>添加图片（选）</view> </view> <view wx:if="{{isSrc}}" class="image_box"> <view class="picPre"> <image src="{{src}}" mode="aspectFill"></image> <view bindtap="clearPic"></view> </view> </view> <input placeholder="输入标题（选）" class="add_title" value="" bindinput="setTitle"/> <view class="addConent"> <textarea placeholder="记下这一刻的心情" maxlength="1000" value="" bindblur="setContent"/> </view> <label for="changePublic"> <switch checked="{{isPublic}}" bindchange="changePublic" type="checkbox" name="is_hide"/> <text>邮寄心情</text> </label> <button bindtap="sendNewMood" data-content="{{content}}" loading="{{isLoading}}" data-title="{{title}}" hover-start-time="200" disabled="{{isdisabled}}">发布</button>逻辑JS实现添加图片保存到全局变量uploadPic:function(){//选择图标 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths that.setData({ isSrc:true, src:tempFilePaths }) } }) },删除图片实现//由于Bmob提供的免费空间20G用不完，这里的文件并没真的删除服务端图片，只是清空了图片。如需删除，可以这样 delImg: function () {//图片删除 var path; //删除第一张 path = 图片路径; var s = new Bmob.Files.del(path).then(function (res) { if (res.msg == "ok") { console.log('删除成功'); common.showModal("删除成功"); } console.log(res); }, function (error) { console.log(error) } ); }, --------------心邮目前的代码------------------- clearPic:function(){//删除图片 that.setData({ isSrc:false, src:"" }) },上传保存至表里, sendNewMood: function(e) {//保存心情 //判断心情是否为空 var content=e.target.dataset.content; var title=e.target.dataset.title; if(content==""){ common.dataLoading("心情内容不能为空","loading"); } else{ that.setData({ isLoading:true, isdisabled:true }) wx.getStorage({ key: 'user_id', success: function(ress) { var Diary = Bmob.Object.extend("Diary"); var diary = new Diary(); var me = new Bmob.User(); me.id=ress.data; diary.set("title",title); diary.set("content",content); diary.set("is_hide",that.data.ishide); diary.set("publisher", me); diary.set("likeNum",0); diary.set("commentNum",0); diary.set("liker",[]); if(that.data.isSrc==true){ var name=that.data.src;//上传的图片的别名 var file=new Bmob.File(name,that.data.src); file.save(); diary.set("pic",file); } diary.save(null, { success: function(result) { that.setData({ isLoading:false, isdisabled:false }) // 添加成功，返回成功之后的objectId（注意：返回的属性名字是id，不是objectId），你还可以在Bmob的Web管理后台看到对应的数据 common.dataLoading("发布心情成功","success",function(){ wx.navigateBack({ delta: 1 }) }); }, error: function(result, error) { // 添加失败 console.log(error) common.dataLoading("发布心情失败","loading"); that.setData({ isLoading:false, isdisabled:false }) } }); } }) } },至此添加心情功能已经完成1.告知一个小技巧，数据库列表，图片字段可以点击直接上传替换或删除的，这样也许你的小程序管理后台都不用开发了。看最下面截图2.核心代码，保存到数据库，下面贴最简单的源码添加标题内容到数据库 var Diary = Bmob.Object.extend("diary"); var diary = new Diary(); diary.set("title","hello"); diary.set("content","hello world"); //添加数据，第一个入口参数是null diary.save(null, { success: function(result) { // 添加成功，返回成功之后的objectId（注意：返回的属性名字是id，不是objectId），你还可以在Bmob的Web管理后台看到对应的数据 console.log("日记创建成功, objectId:"+result.id); }, error: function(result, error) { // 添加失败 console.log('创建日记失败'); } });