bmob Harmony鸿蒙快速开发数据列表页面

​
今天给大家带来一个如何用Bmob后端云的Harmony鸿蒙SDK，开发一个传统的通讯录列表的页面，效果如下：

先说明一点：本人也是现学现卖，因为鸿蒙的ArkUI开发实在太简单了，Bmob后端云的使用也是本人非常熟悉的，除了一些导入的基本步骤，真正获取数据的代码只有短短一两行。

一、导入Bmob SDK

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

ohpm install @bmob/bmob

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

二、获取密钥

登录 Bmob后端云 ，创建应用，获取Secret Key和Secret Code，如下图所示：

三、初始化应用

在你创建的鸿蒙应用中，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"
      }
    ],
    ...省略更多
  }
}

五、编写ArkUI布局文件

列表页面的显示用的是List列表容器，每个列表项都包含在ListItem里面。这里获取的数据是lists这个@State装饰器变量。lists装饰器变量的定义非常简单，代码如下：

@State
lists:any=[]

完整的布局代码如下：

Navigation(){
  List({space:10}){
    ForEach(this.lists,item=>{
      ListItem(){
        Row({space:10}){
          Image(item.img)
            .width(50)
            .aspectRatio(1)
            .borderRadius(90)

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

            Text(item.title)
              .fontSize(12)

            Text(item.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({bottom:10})
    })
  }
  .divider({strokeWidth:1,startMargin:10,endMargin:10,color:'#ffe9f0'})
  .margin(10)
}
.title('我的通讯录')
.titleMode(NavigationTitleMode.Mini)

这里为了让界面效果更好看一点，拨打电话 这个按钮的显示我是用Text组件来实现的。

六、数据表设计

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

字段名称	注释	类型
name	姓名	string
title	头衔	string
company	所在公司	string
img	头像	string

添加数据如下：

六、获取数据列表

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

let query = Bmob.Query('Contact')
query.find().then((res)=>{
  res.forEach((r)=>{
    this.lists.push(r)
  })
})

• Bmob.Query主要用于对一般表的操作，构造函数传入数据表名称即可。
• find方法为查询所有数据的方法。
• 整个方法我放在页面的onPageShow方法里面。你也可以根据自己的需要，添加在其他地方。

七、源码获取

https://gitee.com/zhang-ming-123/bmob-harmony-demo/tree/master/bmoblistpages

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

​