微信心邮小程序开发实战（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("查询失败"); } });