實(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、制作列表頁布局文件與樣式 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)