基于Bmob從零開始寫一個博客小程序
實現以下技能點
1、集成Bmob小程序SDK作為數據存儲
2、wemark解析markdown文本
3、列表頁布局與上拉無限加載
實現的效果
一、創建Bmob應用
進入Bmob官網：http://bmob.cn/，注冊一個賬號，免費的賬號可以創建8個子應用，每個應用單表列數是20列，如要購買付費，可以分別買100元與1000元檔，詳見官網價目表。
1、創建一個應用
2、查看它的key信息以及配置自己小程序的key信息，如果有支付的，加配支付MchID與key，支付對于付費會員才可用。
3、進入網址：http://docs.bmob.cn/data/wechatApp/a_faststart/doc/index.html，來查閱小程序文檔
4、為小程序添加白名單
在小程序管理后臺，進入設置->開發設置->服務器域名，為4個域名統一添加地址為api.bmob.cn。
這事實是不對了，真正在填寫的要等小程序報錯時才知道，如下圖
于是刪除掉之前的填寫的白名單api.bmob.cn，而使用小程序真正使用到的這個三級域名：4552ad36df85c1f29953ae3679c69248.bmobcloud.com
，小程序以前是1月允許3次修改白名單，目前是1個月允許5次，少走一些彎路可以節省一些次數的。
下圖是我更正后的配置信息
二、小程序端集成
1、創建小程序項目，appid使用的就是剛剛配置在Bmob后臺的那個appid。
2、打開app.js引入bmob的js sdk庫，并初始化
var Bmob = require('utils/bmob.js');
Bmob.initialize("你的Application ID", "你的REST API Key");
sdk下載地址是：https://github.com/bmob/bmob-WeApp-sdk
三、讀取文章列表
由于沒有寫專門的web后臺，于是直接在bmob的后臺可視化界面錄入
1、建表與字段
| 字段名 | 類型 | 注釋 |
|---|---|---|
| title | String | 標題 |
| content | String | 內容 |
| priority | Number | 越大越靠前 |
2、根目錄下新建article目錄，再新建list文件夾，下面放著list.wxml、list.wxss與list.js
注意要將剛剛創建的頁面文件添加到app.json中
{
"pages":[
"article/list/list"
]
}
3、引入bmob.js文件，讀取所有的文章列表列表
var Bmob = require('../../utils/bmob.js');
var that;
Page({
onLoad: function () {
that = this;
var Article = Bmob.Object.extend("article");
var query = new Bmob.Query(Article);
// 按照priority逆序排列
query.descending('priority');
// 查詢所有數據
query.find({
success: function(results) {
// 請求成功將數據存入article_list
that.setData({
article_list: results
});
},
error: function(error) {
alert("查詢失敗: " + error.code + " " + error.message);
}
});
}
});
定義一個全局的that變量，以解決異步請求時作用域改變的問題，以后的每一個方法都使用that以代替this。
4、制作列表頁布局文件與樣式
<!-- 遍歷文章列表 -->
<view wx:for="{{article_list}}" class="row" wx:key="">
<!-- 縮略圖 -->
<view>
<image src="{{item.thumb}}" class="thumb" mode="aspectFill" />
</view>
<!-- 標題與日期 -->
<view>
<!-- 標題 -->
<view class="title">{{item.title}}</view>
<!-- 日期 -->
<view class="time">{{item.updatedAt}}</view>
</view>
</view>
其中圖片使用了aspectFill模式，保證了圖片不變形且是填充滿<image>標簽的；且<image>需要包在<view>中，不然css設定的寬度無效，僅高度有效。
/*每行行內元素按行分布*/
.row {
display: flex;
flex-direction: row;
margin: 10px;
}
/*縮略圖*/
.thumb {
width: 100px;
height: 75px;
margin-right: 10px;
margin-top: 5px;
}
/*文章標題*/
.title {
color: #333;
margin: 10px 0;
line-height: 130%;
}
/*日期*/
.time {
font-size: 14px;
color: #999;
margin: 10px 0;
}
使用了flex布局作為左右排列與上下排列的控制。其中縮略圖與文本呈左右排列， 標題與日期呈上面排列。
四、列表頁分頁
剛剛實現的列表是讀取的全部，一般來講會有上拉加載的效果，也就是分頁
1、通過skip與limit實現分頁
將請求代碼獨立出一個成員方法loadArticle()，以方便下拉加載與onLoad加載是共用
loadArticle: function () {
var page_size = 10;
...
// 分頁
query.limit(page_size);
query.skip(that.data.page_index * page_size);
// 查詢所有數據
query.find({
success: function(results) {
// 請求成功將數據存入article_list
that.setData({
article_list: that.data.article_list.concat(results)
});
});
}
使用concat方法將分頁請求得到數組合并入原始數組，以求不斷迭加。
onReachBottom: function () {
that.setData({
page_index: ++that.data.page_index
});
that.loadArticle();
}
實現onReachBottom方法加page_index不斷加1，使頁碼遞增后，再請求Bmob數據。
2、底部加上加載狀態的文本顯示
頁面上加一個<view>
<view class="loading-indicator">
{{loadingTip}}
</view>
配上樣式
/*上拉加載提示*/
.loading-indicator {
text-align: center;
font-size: 12px;
margin: 10px 0;
}
js文件如下處理
data: {
loadingTip: '上拉加載更多'
}
聲明好loadingTip數據后，如果本次請求返回的行數小于每頁行數代表是否還有更多數據（粗略的算法，更合理地做法是多請求一行例如11行，返回不夠數了才是真沒有下一頁了）
// 判斷上拉加載狀態
if (results.length < page_size) {
that.setData({
loadingTip: '沒有更多內容'
});
}
五、制作詳情頁
1、處理帶參跳轉
首先，為.row行添加一個點擊事件
<view wx:for="{{article_list}}" class="row" wx:key="" bindtap="showDetail" data-index="{{index}}">
然后，取出wxml綁定的數值，設置跳轉路徑
showDetail: function (e) {
// 獲取wxml元素綁定的index值
var index = e.currentTarget.dataset.index;
// 取出objectId
var objectId = that.data.article_list[index].id;
// 跳轉到詳情頁
wx.navigateTo({
url: '../detail/detail?objectId=' + objectId
});
}
最后，在article目錄創建detail文件夾，除創建同上頁面3個文件外，再創建一個.json文件，配置頁面標題欄文本顯示
{
"navigationBarTitleText": "文章詳情"
}
2、detail頁面接收參數
Page({
onLoad: function (options) {
// 獲取傳參
var objectId = options.objectId;
}
})
3、取出文章數據
以objectId為參數，向Bmob請求文詳情數據
var Bmob = require('../../utils/bmob.js');
var that;
Page({
data: {
content: ''
},
onLoad: function (options) {
that = this;
// 獲取傳參
var objectId = options.objectId;
// 向Bmob請求詳情頁數據
var Article = Bmob.Object.extend("article");
//創建查詢對象，入口參數是對象類的實例
var query = new Bmob.Query(Article);
//查詢單條數據，第一個參數是這條數據的objectId值
query.get(objectId, {
success: function(result) {
// 查詢成功，調用get方法獲取對應屬性的值
var content = result.get("content");
that.setData({
content: content
});
},
error: function(object, error) {
// 查詢失敗
}
});
}
})
4、渲染頁面
<view class="container">
<view class="title">{{article.title}}</view>
<view class="time">{{article.updatedAt}}</view>
<view class="content">{{article.content}}</view>
</view>
外層包裹一個container是為了設置邊距，美化頁面。
/*外部容器*/
.container {
margin: 20px 10px;
}
/*標題*/
.title {
text-align: center;
color: #333;
font-size: 20px;
margin: 10px 0;
}
/*日期*/
.time {
text-align: center;
color: #999;
font-size: 12px;
margin: 10px 0;
}
/*內容*/
.content {
margin: 20px 0;
font-size: 14px;
color: #555;
line-height: 140%;
}
如此，已經順利獲取到了詳情頁內容并顯示出來了。剩下就是將markdown轉為正常的顯示。
六、利用wemark渲染文章
有大牛寫好了一個針對小程序的markdown解析庫，下載是https://github.com/TooBug/wemark
接下來按照git上的教程集成wemark。
1、wxml引入
<import src="../../wemark/wemark.wxml"/>
<template is="wemark" data="{{...wemark}}"></template>
刪除原來的<view class="content">{{article.content}}</view>，因為不再用到它了。
2、wxss引入
@import '../../wemark/wemark.wxss'
3、js中引入
var wemark = require('../../wemark/wemark');
然后設定數據
data: {
wemark: {}
},
再在請求Bmob成功回調里加上
// 渲染markdown
wemark.parse(result.get('content'), that, {
imageWidth: getApp().screenWidth - 20
})
效果如下
這個例子是比較簡單的，但是做復雜的基礎，諸如flex布局，data存儲，navigate傳值，無限加載，可以說是必然會用到的，對于沒有接觸過小程序開發的朋友應該是有借鑒意義的。
