一、导入Bmob SDK

创建鸿蒙项目，选择Stage模型，API9.0，然后在DevEco Studio 开发工具的命令行（Terminal）中执行下面的命令，安装Bmob Harmony SDK：

ohpm install @bmob/bmob

如果一切顺利，你会在当前项目下的oh_modules目录下看到@bmob/bmob的包已经成功下载，如下图所示：

二、获取密钥

三、初始化应用

在你创建的鸿蒙应用中，entry/src/main/ets 下面新建一个ArkTS File，名为BmobApp。代码如下：

import { Bmob } from '@bmob/bmob';
import AbilityStage from '@ohos.app.ability.AbilityStage';
export default class BmobApp extends AbilityStage {
    onCreate() {
        super.onCreate();
        Bmob.initialize('你的Secret Key', '你的Secret Code')
    }
}

四、配置网络权限和设置应用入口

打开 entry/src/main/module.json5 文件，在module节点下面新增 srcEntry 和 requestPermissions 子节点，配置如下：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "srcEntry": "./ets/BmobApp.ets",
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    ...省略更多
  }
}

五、数据表设计

进入到Bmob后端云控制台，创建一个名为Contact的数据表，并添加数据，表设计如下：

字段名称	注释	类型
name	姓名	string
title	头衔	string
company	所在公司	string
img	头像	string
orders	排列顺序	number

添加数据如下：

六、获取数据列表

获取数据的代码非常简单，这里不多解释，更多文档可以直接查看官方文档。

private index: number = 0
@State lists: any = []

getContact() {
  let query = Bmob.Query('Contact')
  query.skip(this.index)
    .limit(10)
    .orderby('orders')
    .find()
    .then((res) => {
      res.forEach((r) => {
        const ifexist = this.lists.findIndex(item => item.objectId == r.objectId)
        if (ifexist == -1)
          this.lists.push(r)
      })
      this.index = this.lists.length
    })
}

Bmob.Query主要用于对一般表的操作，构造函数传入数据表名称即可。
orderby是排序方法，这里表示按orders字段进行排序。
find方法为查询所有数据的方法。
skip方法（跳过前面的多少条数据）经常和limit方法（最多返回多少条数据）一起配合使用，用于分页查询。
ifexist用于数据的去重。

七、编写ArkUI布局文件

1、定义列表项布局

我们这里将会用到List组件，List组件的每一个ListItem的布局代码如下（db对象对应Bmob后端云获取的一条数据）：

@Builder
item(db) {
  Row({ space: 10 }) {
    Image(db.img)
      .width(50)
      .aspectRatio(1)
      .borderRadius(90)

    Column({ space: 5 }) {
      Text(db.name)
        .fontWeight(FontWeight.Bold)
        .fontSize(14)

      Text(db.title)
        .fontSize(12)

      Text(db.company)
        .fontSize(12)

    }
    .alignItems(HorizontalAlign.Start)
    .layoutWeight(1)

    Text('拨打电话')
      .fontSize(12)
      .width(80)
      .height(30)
      .borderRadius(20)
      .borderWidth(1)
      .borderColor(Color.Orange)
      .textAlign(TextAlign.Center)
  }
  .alignItems(VerticalAlign.Center)
  .justifyContent(FlexAlign.SpaceBetween)
  .margin({top:10})
}

2、编写页面布局

这里用到了List组件，onReachEnd表示到达底部的事件，我们把获取数据的方法放在这个事件上。

具体代码如下：

List() {
  ForEach(this.lists, (item: any) => {
    ListItem() {
      this.item(item)
    }
    .margin({ bottom: 10 })
  })
}
.divider({ strokeWidth: 1, startMargin: 10, endMargin: 10, color: '#ffe9f0' })
.margin(10)
.onReachEnd(() => {
  this.getContact()
})

八、源码下载

gitee.com/zhang-ming-…

欢迎有兴趣交流鸿蒙开发的朋友加微聊技术：xiaowon12

bmob Harmony鸿蒙开发上拉滚动分页功能