實現(xiàn)以下技能點1、集成Bmob小程序SDK作為數(shù)據(jù)存儲 2、wemark解析markdown文本 3、列表頁布局與上拉無限加載 實現(xiàn)的效果 一、創(chuàng)建Bmob應(yīng)用進入Bmob官網(wǎng):http://bmob.cn/,注冊一個賬號,免費的賬號可以創(chuàng)建8個子應(yīng)用,每個應(yīng)用單表列數(shù)是20列,如要購買付費,可以分別買100元與1000元檔,詳見官網(wǎng)價目表。 1、創(chuàng)建一個應(yīng)用 2、查看它的key信息以及配置自己小程序的key信息,如果有支付的,加配支付MchID與key,支付對于付費會員才可用。
3、進入網(wǎng)址:http://docs.bmob.cn/data/wechatApp/a_faststart/doc/index.html,來查閱小程序文檔 4、為小程序添加白名單 在小程序管理后臺,進入設(shè)置->開發(fā)設(shè)置->服務(wù)器域名,為4個域名統(tǒng)一添加地址為api.bmob.cn。
這事實是不對了,真正在填寫的要等小程序報錯時才知道,如下圖
于是刪除掉之前的填寫的白名單api.bmob.cn,而使用小程序真正使用到的這個三級域名:4552ad36df85c1f29953ae3679c69248.bmobcloud.com ,小程序以前是1月允許3次修改白名單,目前是1個月允許5次,少走一些彎路可以節(jié)省一些次數(shù)的。 下圖是我更正后的配置信息 二、小程序端集成1、創(chuàng)建小程序項目,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、建表與字段
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);
}
});
}
});
定義一個全局的that變量,以解決異步請求時作用域改變的問題,以后的每一個方法都使用that以代替this。 4、制作列表頁布局文件與樣式 |