黃秀杰--基于Bmob從零開始寫一個(gè)博客小程序
實(shí)現(xiàn)以下技能點(diǎn)1、集成Bmob小程序SDK作為數(shù)據(jù)存儲(chǔ) 2、wemark解析markdown文本 3、列表頁布局與上拉無限加載 實(shí)現(xiàn)的效果
一、創(chuàng)建Bmob應(yīng)用進(jìn)入Bmob官網(wǎng)：http://bmob.cn/，注冊一個(gè)賬號，免費(fèi)的賬號可以創(chuàng)建8個(gè)子應(yīng)用，每個(gè)應(yīng)用單表列數(shù)是20列，如要購買付費(fèi)，可以分別買100元與1000元檔，詳見官網(wǎng)價(jià)目表。
1、創(chuàng)建一個(gè)應(yīng)用
2、查看它的key信息以及配置自己小程序的key信息，如果有支付的，加配支付MchID與key，支付對于付費(fèi)會(huì)員才可用。
3、進(jìn)入網(wǎng)址：http://docs.bmob.cn/data/wechatApp/a_faststart/doc/index.html，來查閱小程序文檔 4、為小程序添加白名單 在小程序管理后臺(tái)，進(jìn)入設(shè)置->開發(fā)設(shè)置->服務(wù)器域名，為4個(gè)域名統(tǒng)一添加地址為api.bmob.cn。
這事實(shí)是不對了，真正在填寫的要等小程序報(bào)錯(cuò)時(shí)才知道，如下圖
于是刪除掉之前的填寫的白名單api.bmob.cn，而使用小程序真正使用到的這個(gè)三級域名：4552ad36df85c1f29953ae3679c69248.bmobcloud.com ，小程序以前是1月允許3次修改白名單，目前是1個(gè)月允許5次，少走一些彎路可以節(jié)省一些次數(shù)的。 下圖是我更正后的配置信息
二、小程序端集成1、創(chuàng)建小程序項(xiàng)目，appid使用的就是剛剛配置在Bmob后臺(tái)的那個(gè)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后臺(tái)，于是直接在bmob的后臺(tái)可視化界面錄入 1、建表與字段
2、根目錄下新建article目錄，再新建list文件夾，下面放著list.wxml、list.wxss與list.js
注意要將剛剛創(chuàng)建的頁面文件添加到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');
// 查詢所有數(shù)據(jù)
query.find({
success: function(results) {
// 請求成功將數(shù)據(jù)存入article_list
that.setData({
article_list: results
});
},
error: function(error) {
alert("查詢失敗: " + error.code + " " + error.message);
}
});
}
});
定義一個(gè)全局的that變量，以解決異步請求時(shí)作用域改變的問題，以后的每一個(gè)方法都使用that以代替this。 4、制作列表頁布局文件與樣式 |
