回顾
上一篇文章讲了微信小程序准备工作，并建立了小程序信箱数据表
信箱功能
第一步：在微信小程序开发工具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
加入信箱栏目
第三步：在管理后台数据库添加一些数据
![]()
Bmob小程序后端添加数据
Bmob小程序后端添加数据
微信小程序展示
至此微信小程序信箱功能已经完成
我们可以看到这里主要的代码就是页面显示查询出数据，写在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("查询失败");
}
});
