微信心邮小程序开发实战（2）-信箱功能

回顾

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

信箱功能

第一步：在微信小程序开发工具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-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小程序后端添加数据

微信小程序展示

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

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