第一步：在微信小程序開發工具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

第三步：在管理后臺數據庫添加一些數據

---

 

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

我們可以看到這里主要的代碼就是頁面顯示查詢出數據，寫在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("查詢失敗");
      }
    });