不少的应用都会在页面中加入广告展示页面，每隔几秒钟，就会切换到下一个广告展示，当我们点击广告页面的时候，会打开内置的浏览器展示广告内容。我们还可以看到这个广告链接有多少点击。

结合Bmob Harmony鸿蒙SDK，我们可以非常快速的实现全部功能。下面，就让我们来详细讲解这是如何实现的。

一、导入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的数据表，并添加数据，表设计如下：

字段名称	注释	类型
img	广告图片	string
click	点击数	number
url	点击广告之后展示的页面	string

添加数据如下：

六、获取数据列表

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

我们先在需要展示广告的页面添加获取数据列表的方法：

@State
lists:any = []

getAd(){
  const query = Bmob.Query('ad')
  query.find().then((res)=>{
    this.lists = res
  })
}

Bmob.Query主要用于对一般表的操作，构造函数传入数据表名称即可。
find方法是查询这个表所有数据的方法。

接着，我们在页面加载前调用这个方法，代码如下：

aboutToAppear(){
  this.getAd()
}

七、编写ArkUI布局文件

这里用到了Swiper这个轮播组件，我们设定自动播放（autoPlay(true)），5秒的时间（interval(5000)）循环播放（loop(true)），轮播组件里面，我们这里展示的是Image图片组件。

当我们点击图片的时候，自动跳转（router.pushUrl）到addetail这个广告详情页面。

下面是展示广告的布局代码：

private swiperController: SwiperController = new SwiperController()

Navigation() {
  Stack() {
    Swiper(this.swiperController){
      ForEach(this.lists,(item)=>{
        Image(item.img)
          .onClick(()=>{
            let param = {
              'url':item.url,
              'id':item.objectId
            }
            router.pushUrl({
              url:'pages/addetail',
              params:param
            },router.RouterMode.Standard,(err)=>{
            })
          })
      })
    }
    .loop(true)
    .autoPlay(true)
    .interval(5000)
    .width('100%')
    .height(200)
  }
}
.title('首页')
.titleMode(NavigationTitleMode.Mini)
.hideBackButton(true)

在广告详情代码里面，我们先获取上一个页面传递过来的url（router.getParams()['url']）和id（router.getParams()['id']）参数，用于这个页面的广告展示（Web({ src: this.url, controller: this.webviewController})）。

我们还增加了一个功能，就是当用户点击了广告之后，我们给这个广告的点击数自动加1，代码如下：

let query = Bmob.Query('ad')
query.increment(objectId,'click',1)

完整的广告详情的页面代码如下：

webviewController: web_webview.WebviewController = new web_webview.WebviewController();
private url:string = ''

aboutToAppear(){
  // 获取打开的url和对应的objectid
  this.url = router.getParams()['url']
  let objectId = router.getParams()['id']
  // 记录这个广告的点击量 + 1
  let query = Bmob.Query('ad')
  query.increment(objectId,'click',1)
}

build() {
  Navigation(){
    Web({ src: this.url, controller: this.webviewController})
  }
  .title("返回")
  .titleMode(NavigationTitleMode.Mini)
}

八、源码下载

gitee.com/zhang-ming-…

bmob Harmony鸿蒙SDK开发首页展示广告模块