回顾

上一篇文章讲了微信小程序准备工作，并建立了小程序信箱数据表

信箱功能

第一步：在微信小程序开发工具Pages建立信箱文件

---

mail/ ├── mail.js ├── mail.json ├── mail.wxml └── mail.wxss 

1. mail.js

1. 页面显示时查询数据
2. 把查询的数据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-viewlower-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小程序后端添加数据

微信小程序展示

至此微信小程序信箱功能已经完成

我们可以看到这里主要的代码就是页面显示查询出数据，写在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("查询失败"); } }); 

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/14500.html