很多人看完bmob快速入门，并完成了简单的基本配置之后依然不知道如何下手去写自己的代码，那么跟着我一起来一步一步做一个小程序吧。（工具：bmob后端云）
新建小程序项目
一、新建项目选择小程序项目，选择代码存放的硬盘路径，填入你的小程序 AppID，给你的项目起一个好听的名字，最后，点击确定，你就得到了你的小程序了开发者工具传送门
目录结构
- page
- index
- index.js
- index.wxml
- index.wxss
- logs
- logs.js
- logs.json
- logs.wxml
- logs.wxss
- index
- utils
- util.js
- app.js
- app.json
- app.wxss
- project.config.json
下载和安装BmobSDK
一、把"bmob-min.js"和"underscore.js"放到相应的文件，例如放到utils中
二、接着是在app.js中加入下面两行代码进行全局初始化
const Bmob = require('utils/bmob.js');
Bmob.initialize("你的Application ID", "你的REST API Key");
数据库的搭建
一、创建一个名字为detail的表，然后点击添加列创建3个字段，一个一个的添加
-
title字段,String类型,用于存放文章的标题 -
image字段,String类型,用于存放文章的图片 -
detail字段String类型,用于存放文章的正文
然后添加一些数据进行测试
列表页面实现
一、去到index.js中 Ctrl + A然后按Delete清空这个页面，然后自己来写逻辑吧，首先我们需要引入bmob.js 然后在onLoad小程序生命周期中去请求detail表中的数据，让bmob和小程序完成第一次交互
//index.js
//获取应用实例
const Bmob = require('../../utils/bmob.js'); //每个需要使用到bmob的页面都需要引入这个js
Page({
onLoad() {
let Diary = Bmob.Object.extend("detail"); //引入detail这张表
let query = new Bmob.Query(Diary);
query.find({
success: (results) => {
console.log(results)//打印数据
},
error(error) {
console.log(`查询失败: ${error.code } ${error.message}`);
}
});
},
})
这里完成了一次对bmob的数据查询，bmob文档传送门, 这个查询默认返回10条记录。当数据多了之后，一次查询很多数据，这样是不友好的，并不是说bmob查询数据慢，而是指如果将来你的用户在网速比较慢的情况使用你的小程序，请求数据等待时间过长，这个等待的过程也许会导致用户不再使用你的小程序。所以我们需要优化用户体验。那么将代码改造成一上拉加载更多。
//index.js
//获取应用实例
const app = getApp();
const Bmob = require('../../utils/bmob.js'); //每个需要使用到bmob的页面都需要引入这个js
Page({
data: {
detail:[], //页面数据
pagination:0, //页码
pageSize: 4, //每页数据
nodata:true //无数据
},
onLoad() {
//初始页面第一次获取页面数据
this.getData();
},
getData(){
let Diary = Bmob.Object.extend("detail"); //引入detail这张表
let query = new Bmob.Query(Diary);
query.limit(this.data.pageSize); //返回n条数据
query.skip(this.data.pageSize * this.data.pagination); //分页查询
query.descending('createdAt'); //已created列倒序
query.find({
success: (results) => {
let data = [];
//将得到的数据存入数组
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) //调用timeagoJs把日期转成N天前格式
})
}
//判断是否有数据返回
if(data.length){
let detail = this.data.detail; //得到页面上已经存在的数据(数组)
let pagination = this.data.pagination; //获取当前分页(第几页)
detail.push.apply(detail, data); //将页面上面的数组和最新获取到的数组进行合并
pagination = pagination ? pagination+1 : 1; //此处用于判断是首次渲染数据还是下拉加载渲染数据
//更新数据
this.setData({
detail: detail,
pagination: pagination
})
}else{
//没有返回数据，页面不再加载数据
this.setData({
nodata: false
})
}
},
error(error) {
console.log(`查询失败: ${error.code } ${error.message}`);
}
});
},
router(e) {
//跳转至文章详情页
const id = e.currentTarget.dataset.id
wx.navigateTo({
url: `../detail/detail?id=${id}`
})
},
onReachBottom(){
//下拉触底加载更多数据
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')
}
})
二、完成了列表页逻辑层之后，去到index.wxml编写视图层，视图层就简单许多了，得到的数据是一个数组，数组里面是一个json,用wx:for方法把它渲染出来就好了
<!--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'>没有更多数据了</view>
</view>
三、来对页面进行一些美化，编写一样样式吧。毕竟这是一个看脸的社会
/**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比较差，可以直接用别人写好的现成的样式传送门。
以上列表页面算是完成了。此时点击页面的时候，应该会报错，提示detail页面未配置，那来到app.json里面配置一下detail这个页面。文章的id已经传过来了,文章的详情页就当是自己的一个小练习，熟悉bmob吧。
