微信心邮小程序开发实战（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('创建日记失败');
}
});
