#星计划# #鸿蒙应用开发实战分享#基于原生ohos.net.http组件实现基础的每日一言功能页 原创

润开鸿开润
发布于 2023-12-25 17:39
浏览
0收藏

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

#星计划# #鸿蒙应用开发实战分享#基于原生ohos.net.http组件实现基础的每日一言功能页-鸿蒙开发者社区

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

【开发环境】

win10+DevEco Studio+openHarmony Api10

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

【免费的在线API接口】

ALAPI:​​https://www.alapi.cn/api/view/7​

(我们将使用HTTP网络请求模块从这个免费的API接口中请求格式为json的数据,具体使用方法将在下文贴出)

【核心代码】

关于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,我们在上文提到的网站中能够找到它所提供的接口地址:

#星计划# #鸿蒙应用开发实战分享#基于原生ohos.net.http组件实现基础的每日一言功能页-鸿蒙开发者社区

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


#星计划# #鸿蒙应用开发实战分享#基于原生ohos.net.http组件实现基础的每日一言功能页-鸿蒙开发者社区

检测生成的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("https://v2.alapi.cn/api/mingyan?token=GdueeuQNDxxmQPUL",{
      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("https://v2.alapi.cn/api/mingyan?token=GdueeuQNDxxmQPUL",{
              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]]
    })
  }
}

【实现效果】

#星计划# #鸿蒙应用开发实战分享#基于原生ohos.net.http组件实现基础的每日一言功能页-鸿蒙开发者社区

以上,就是HTTP数据请求模块在HarmonyOS上的简单实现啦,都看到这里了,麻烦各位点个赞,先在这里谢过大家了!


©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
4
收藏
回复
举报
回复
    相关推荐