鸿蒙征文｜基于原生ohos.net.http组件实现基础的每日一言功能页

爱鼓捣的程序猿

于 2024-04-03 23:29:20 发布

阅读量263

点赞数 3

本文链接：https://blog.csdn.net/haobitou/article/details/137360378

版权

基于原生ohos.net.http组件实现基础的每日一言功能页

相信喜欢古诗词的大家或多或少都听说过一款名为“西窗烛”的应用，打开这个应用，就会在主界面上显示出一句经典的古诗词，并且只要动动手指就能切换到下一句。

在HarmonyOS中，我们可以使用HTTP网络请求来实现这一简单的功能，下面来演示此功能的一个实例。

【开发环境】

win10+DevEco Studio+HarmonyOS Api10

（前排提醒，Api10目前不支持在Previewer中使用网络请求，如果没有开发板之类的能够联网的实体设备的话，请使用Api9进行测试）

【核心代码】

关于HTTP数据请求的详细说明以及功能实现可以参考以下，

HarmonyOS开发者学堂：https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101682414573574868

OpenHarmony应用开发文档：https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/connectivity/http-request.md/

本文只列出使用到的代码。

首先，我们需要在src/main/module.json5中的module字段下为应用申请ohos.permission.INTERNET权限：

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

之后，在实现http网络请求功能的ets页面上添加http模块：

import http from '@ohos.net.http';

最后，到了HTTP请求功能的具体实现：

@State content: string = '内容'
@State author: string = '作者'

//第一步，创建一个HTTP请求任务
let httpRequest = http.createHttp()

//第二步，向目标接口请求数据，"url"部分填写对应api接口的url
let promise = httpRequest.request("url",{
  method: http.RequestMethod.POST
  });

//第三步，接受到json数据后从中提取内容
promise.then((data) => {
  this.content = JSON.parse(`${data.result}`).data.content;
  this.author = JSON.parse(`${data.result}`).data.author;
})

具体的如何取得所需Api接口的url，我们在上文提到的网站中能够找到它所提供的接口地址：

在拿到地址后并不能直接使用，我们需要注册账号，到网站后台拿到能够使用的token，组成一个“‘地址’+‘?token=’+'token码”的字符串，才是一个完整的url。

检测生成的url是否正确，可以在浏览器地址栏中直接输入此url，如果显示一个有内容的json，那么就说明能够使用了。

【完整代码】

import http from '@ohos.net.http';
//import router from '@ohos.router';

@Entry
@Component
struct SayingPage {
  @State content: string = '内容'
  @State author: string = '作者'

  aboutToAppear() {
    let httpRequest = http.createHttp()
    //这里使用了我自己的token码，免费版的，每天只能请求二百次
    let promise = httpRequest.request("XXX",{
      method: http.RequestMethod.POST
    });
    promise.then((data) => {
      this.content = JSON.parse(`${data.result}`).data.content;
      this.author = JSON.parse(`${data.result}`).data.author;
    })
  }

  build() {
    Stack() {
      //在这里我在页面上方放置了一个小的返回按钮
      //如果想要使用的话请在src/main/resources/base/media中添加back.png文件
      //和在url中填写另一个页面的地址
      // Image($r('app.media.back'))
      //   .height(30)
      //   .width(30)
      //   .onClick(() => {
      //     router.pushUrl({
      //       url: "pages/SwitchPage"
      //     })
      //   })
      //   .position({
      //     x: '5%',
      //     y: '3%'
      //   })
      //   .zIndex(1)

      Row() {
        Column() {
          Text('       '+this.content)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)

          Row() {
            Blank()
            Text('——' + this.author)
              .fontSize(20)
          }.width('100%').margin({
            top: '10%',
            bottom: '20%'
          })

          Button() {
            Text('刷新').fontColor(Color.White)
          }.onClick(() => {
            let httpRequest = http.createHttp()
            let promise = httpRequest.request("XXX",{
              method: http.RequestMethod.POST
            });
            promise.then((data) => {
              this.content = JSON.parse(`${data.result}`).data.content;
              this.author = JSON.parse(`${data.result}`).data.author;
            })
          }).height('8%').width('60%')
        }
        .width('95%')
      }
      .opacity(0.9)
      .backgroundColor(Color.White)
      .borderRadius(10)
      .height('98%').padding({
        left: '5%',
        right: '5%'
      })
    }.width('100%').height('100%')
    .linearGradient({
      direction: GradientDirection.RightTop,
      colors: [[0xff00fff8, 0.0], [0xff6200ff, 0.5], [0xffff00e5, 1.0]]
    })
  }
}