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

3W+用户的心邮小程序介绍 心邮小程序是一款界面精美，操作简单，在这里，你可以记录自己每天的心情，也可以分享你的情感，和广大的用户一起交流生活，倾诉自己的烦恼，获得别人的理解和帮助。上线时间：2017-1-9（小程序公开上线的第一天）上线3个月后用户情况日活跃数：50014天后新增留存数平均大约6%总访问用户大约3W+贡献给所有人，所以代码开源1.15号就暂停更新了，目前也说不上体验非常好，不过开源了，有其他人的参与，一定会更好，在简书我也会把整个代码解析注释描述，如有疑问可以留言。微信目前需要社区社交相关资质，这个项目已经放弃更新。1.由于心邮项目里面没有嵌入任何盈利为目的的功能，也没去盈利。只当做公益放哪里。2.好消息是我们已经把这套代码开源，包含数据库，如果有资质需要你自己也可以搭建一套类型的，非常感谢你的阅读。

微信心邮小程序开发实战（2）-信箱功能 回顾上一篇文章讲了微信小程序准备工作，并建立了小程序信箱数据表第一步：在微信小程序开发工具Pages建立信箱文件mail/ ├── mail.js ├── mail.json ├── mail.wxml └── mail.wxss 1. mail.js页面显示时查询数据把查询的数据setData到模版页面//index.js //获取应用实例 var common = require('../template/getCode.js') var Bmob = require("../../utils/bmob.js"); var that; var molist; var app = getApp() Page({ data: { moodList: [], limit: 6, loading: false, windowHeight1: 0, windowWidth1: 0, scrollTop: { scroll_top1: 0, goTop_show: false } }, onLoad: function (e) { that = this; that.setData({ loading: false }) }, //页面显示时执行 onShow: function () { molist = new Array(); var myInterval = setInterval(getReturn, 500);//半秒定时查询 //获取服务端数据 function getReturn() { wx.getStorage({ key: 'user_id', success: function (ress) {//根据User_id查询 if (ress.data) { clearInterval(myInterval)//清楚定时查询 var Diary = Bmob.Object.extend("Diary"); var query = new Bmob.Query(Diary); query.equalTo("is_hide", "1"); query.descending("createdAt"); query.include("publisher"); // 查询所有数据 query.find({ success: function (results) {//数据查询成功 that.setData({ loading: true }); //数据重新初始化 for (var i = 0; i < results.length; i++) { var publisherId = results[i].get("publisher").id; var title = results[i].get("title"); var content = results[i].get("content"); var id = results[i].id; var createdAt = results[i].createdAt; var _url; var likeNum = results[i].get("likeNum"); var commentNum = results[i].get("commentNum"); var pic = results[i].get("pic"); if (pic) { _url = results[i].get("pic")._url; } else { _url = null; } var name = results[i].get("publisher").get("nickname"); var userPic = results[i].get("publisher").get("userPic"); var liker = results[i].get("liker"); var isLike = 0; for (var j = 0; j < liker.length; j++) { if (liker[j] == ress.data) { isLike = 1; break; } } var jsonA; if (pic) { jsonA = '{"title":"' + title + '","content":"' + content + '","id":"' + id + '","avatar":"' + userPic + '","created_at":"' + createdAt + '","attachment":"' + _url + '","likes":"' + likeNum + '","comments":"' + commentNum + '","is_liked":"' + isLike + '","username":"' + name + '"}' } else { jsonA = '{"title":"' + title + '","content":"' + content + '","id":"' + id + '","avatar":"' + userPic + '","created_at":"' + createdAt + '","likes":"' + likeNum + '","comments":"' + commentNum + '","is_liked":"' + isLike + '","username":"' + name + '"}'; } var jsonB = JSON.parse(jsonA); //每条数据重新写入到数组 molist.push(jsonB) that.setData({ moodList: molist, loading: true }) } }, error: function (error) { common.dataLoading(error, "loading"); that.setData({ loading: true }) console.log(error) } }); } }, fail: function (error) { console.log("失败") } }) } }, //分享页面 onShareAppMessage: function () { return { title: '心邮', desc: '倾诉烦恼，邮寄心情，分享快乐', path: '/pages/index/index' } }, onPullDownRefresh: function () { wx.stopPullDownRefresh() }, scrollTopFun: function (e) { if (e.detail.scrollTop > 300) { this.setData({ 'scrollTop.goTop_show': true }); } else { this.setData({ 'scrollTop.goTop_show': false }); } }, goTopFun: function (e) { var _top = this.data.scrollTop.scroll_top1;//发现设置scroll-top值不能和上一次的值一样，否则无效，所以这里加了个判断 if (_top == 1) { _top = 0; } else { _top = 1; } this.setData({ 'scrollTop.scroll_top1': _top }); this.onShow(); } }) 2. mail.wxml写入循环输出数据wx:for-items="{{moodList}}"<loading hidden="{{loading}}"> 加载中... </loading> <import src="../template/list.wxml" /> <!--<scroll-view lower-threshold="800" bindscrolltolower="pullUpLoad" upper-threshold="0" scroll-y="true" style="height: {{windowHeight1}}px; width: {{windowWidth1}}px; " scroll-top="{{scrollTop.scroll_top1}}" bindscroll="scrollTopFun">--> <view class="index_list"> <navigator url="../listDetail/listDetail?moodId={{item.id}}" hover-class="navigator-hover" wx:for-items="{{moodList}}" wx:key="moodListId" wx:if="{{item.id}}"> <template is="listHeader" data="{{userPic:item.avatar,userNick:item.username,publishTime:item.created_at}}" /> <template is="listTemp" data="{{listPic:item.attachment,listTitle:item.title,listContent:item.content}}" /> <view class="list_footer"> <view class="agreeNum agree_{{item.is_liked}}">{{item.likes}}</view> <view class="commNum">{{item.comments}}</view> </view> </navigator> </view> <!--</scroll-view>--> <view class="bord"></view> <view class="returnTop" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun"> </view>第二步：在微信小程序开发工具更改配置文件 app.json第三步：在管理后台数据库添加一些数据至此微信小程序信箱功能已经完成我们可以看到这里主要的代码就是页面显示查询出数据，写在onshow里面。模版页面无非是展示出来，下面贴一段查询数据的源码。 var Diary = Bmob.Object.extend("表名称"); var query = new Bmob.Query(Diary); query.get("4edc3f6ee9", { success: function(result) { // The object was retrieved successfully. console.log("该日记标题为"+result.get("title")); }, error: function(result, error) { console.log("查询失败"); } });