很多人看完bmob快速入門，并完成了簡(jiǎn)單的基本配置之后依然不知道如何下手去寫自己的代碼，那么跟著我一起來(lái)一步一步做一個(gè)小程序吧。（工具：bmob后端云）

新建小程序項(xiàng)目

一、新建項(xiàng)目選擇小程序項(xiàng)目，選擇代碼存放的硬盤路徑，填入你的小程序 AppID，給你的項(xiàng)目起一個(gè)好聽的名字，最后，點(diǎn)擊確定，你就得到了你的小程序了開發(fā)者工具傳送門

目錄結(jié)構(gòu)

page
   index
   index.js
   index.wxml
   index.wxss
logs
   logs.js
   logs.json
   logs.wxml
   logs.wxss
utils
   util.js
app.js
   app.json
   app.wxss
   project.config.json

下載和安裝BmobSDK

一、把"bmob-min.js"和"underscore.js"放到相應(yīng)的文件，例如放到utils中

二、接著是在app.js中加入下面兩行代碼進(jìn)行全局初始化

const Bmob = require('utils/bmob.js');
Bmob.initialize("你的Application ID", "你的REST API Key");

數(shù)據(jù)庫(kù)的搭建

一、創(chuàng)建一個(gè)名字為detail的表，然后點(diǎn)擊添加列創(chuàng)建3個(gè)字段，一個(gè)一個(gè)的添加

title字段,String 類型,用于存放文章的標(biāo)題 image字段,String 類型,用于存放文章的圖片 detail字段 String類型,用于存放文章的正文 然后添加一些數(shù)據(jù)進(jìn)行測(cè)試

列表頁(yè)面實(shí)現(xiàn)

一、去到index.js中 Ctrl + A然后按Delete清空這個(gè)頁(yè)面，然后自己來(lái)寫邏輯吧，首先我們需要引入bmob.js 然后在onLoad小程序生命周期中去請(qǐng)求detail表中的數(shù)據(jù)，讓bmob和小程序完成第一次交互

//index.js
//獲取應(yīng)用實(shí)例
const Bmob = require('../../utils/bmob.js'); //每個(gè)需要使用到bmob的頁(yè)面都需要引入這個(gè)js

Page({
  onLoad() { 
    let Diary = Bmob.Object.extend("detail"); //引入detail這張表
    let query = new Bmob.Query(Diary);
    query.find({
      success: (results) => {
        console.log(results)//打印數(shù)據(jù)
      },
      error(error) {
        console.log(`查詢失敗: ${error.code } ${error.message}`);
      }
    });
  },
})

這里完成了一次對(duì)bmob的數(shù)據(jù)查詢，bmob文檔傳送門, 這個(gè)查詢默認(rèn)返回10條記錄。當(dāng)數(shù)據(jù)多了之后，一次查詢很多數(shù)據(jù)，這樣是不友好的，并不是說(shuō)bmob查詢數(shù)據(jù)慢，而是指如果將來(lái)你的用戶在網(wǎng)速比較慢的情況使用你的小程序，請(qǐng)求數(shù)據(jù)等待時(shí)間過(guò)長(zhǎng)，這個(gè)等待的過(guò)程也許會(huì)導(dǎo)致用戶不再使用你的小程序。所以我們需要優(yōu)化用戶體驗(yàn)。那么將代碼改造成一上拉加載更多。

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp();
const Bmob = require('../../utils/bmob.js'); //每個(gè)需要使用到bmob的頁(yè)面都需要引入這個(gè)js

Page({
  data: {
    detail:[], //頁(yè)面數(shù)據(jù)
    pagination:0, //頁(yè)碼
    pageSize: 4, //每頁(yè)數(shù)據(jù)
    nodata:true //無(wú)數(shù)據(jù)
  },
  onLoad() { 
    //初始頁(yè)面第一次獲取頁(yè)面數(shù)據(jù)
    this.getData(); 
  },
  getData(){
    let Diary = Bmob.Object.extend("detail"); //引入detail這張表
    let query = new Bmob.Query(Diary);
    query.limit(this.data.pageSize); //返回n條數(shù)據(jù)
    query.skip(this.data.pageSize * this.data.pagination); //分頁(yè)查詢
    query.descending('createdAt'); //已created列倒序
    query.find({
      success: (results) => {
        let data = [];
        //將得到的數(shù)據(jù)存入數(shù)組
        for (let object of results) {
          data.push({
            id: object.id,
            title: object.get('title'),
            image: object.get('image'),
            detail: object.get('detail'),
            createdAt: app.timeago(object.createdAt) //調(diào)用timeagoJs把日期轉(zhuǎn)成N天前格式
          })
        }
        //判斷是否有數(shù)據(jù)返回
        if(data.length){
          let detail = this.data.detail; //得到頁(yè)面上已經(jīng)存在的數(shù)據(jù)(數(shù)組)
          let pagination = this.data.pagination; //獲取當(dāng)前分頁(yè)(第幾頁(yè))
          detail.push.apply(detail, data); //將頁(yè)面上面的數(shù)組和最新獲取到的數(shù)組進(jìn)行合并
          pagination = pagination ? pagination+1 : 1; //此處用于判斷是首次渲染數(shù)據(jù)還是下拉加載渲染數(shù)據(jù)

          //更新數(shù)據(jù)
          this.setData({
            detail: detail,
            pagination: pagination
          })
        }else{
          //沒有返回?cái)?shù)據(jù)，頁(yè)面不再加載數(shù)據(jù)
          this.setData({
            nodata: false
          })
        }
      },
      error(error) {
        console.log(`查詢失敗: ${error.code } ${error.message}`);
      }
    });
  },
  router(e) {
    //跳轉(zhuǎn)至文章詳情頁(yè)
    const id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: `../detail/detail?id=${id}`
    })
  },
  onReachBottom(){
    //下拉觸底加載更多數(shù)據(jù)
    this.getData();
  }
})

上述代碼中在日期處使用了timeagoJs下載地址,下載timeagoJs放到util文件夾中,然后在app.js中引入。

//app.js
const Bmob = require('./utils/bmob.js')
const timeago = require("./utils/timeago.min.js");
Bmob.initialize("你的Application ID", "你的REST API Key");

App({
  timeago(date){
    return new timeago().format(date, 'zh_CN')
  }
})

二、完成了列表頁(yè)邏輯層之后，去到index.wxml編寫視圖層，視圖層就簡(jiǎn)單許多了，得到的數(shù)據(jù)是一個(gè)數(shù)組，數(shù)組里面是一個(gè)json,用wx:for方法把它渲染出來(lái)就好了

<!--index.wxml-->
<view class='container'>
  <view class='pane' wx:for='{{detail}}' wx:key="index" data-id='{{item.id}}' bindtap='router'>
    <image src='{{item.image}}'mode='aspectFill'></image>
    <view class='content'>
      <text class='title'>{{ item.title }}</text>
      <text class='date'>{{ item.createdAt }}</text>
    </view>
  </view>
  <view wx:if='{{!nodata}}' class='nodata'>沒有更多數(shù)據(jù)了</view>
</view>

三、來(lái)對(duì)頁(yè)面進(jìn)行一些美化，編寫一樣樣式吧。畢竟這是一個(gè)看臉的社會(huì)

/**index.wxss**/
.container{ padding: 30rpx;}
.pane{ width: 100%; margin-bottom:30rpx; border-radius: 5rpx; overflow: hidden; box-shadow: 0 0 10rpx rgba(0, 0, 0, .1) }
.pane image{ width: 100%; height: 240rpx; display: block;}
.pane .content{ background-color: #FFF; padding: 20rpx;}
.pane .title{ display: block; font-size: 30rpx; font-weight: bold; margin-bottom: 20rpx;}
.pane .date{ display: block; font-size: 24rpx; color: #999}
.nodata{ text-align: center; font-size: 24rpx; color: #999}

如果你不喜歡寫這些ui布局，或者前端ui，css比較差，可以直接用別人寫好的現(xiàn)成的樣式傳送門。

以上列表頁(yè)面算是完成了。此時(shí)點(diǎn)擊頁(yè)面的時(shí)候，應(yīng)該會(huì)報(bào)錯(cuò)，提示detail頁(yè)面未配置，那來(lái)到app.json里面配置一下detail這個(gè)頁(yè)面。文章的id已經(jīng)傳過(guò)來(lái)了,文章的詳情頁(yè)就當(dāng)是自己的一個(gè)小練習(xí)，熟悉bmob吧。