玩转鸿蒙实战篇《随机美文》

徐建国

发布于 2024-06-21 08:52:08

970

发布于 2024-06-21 08:52:08

文章被收录于专栏：个人路线个人路线

前言

端午节到了，我们一起来做一个随机美文，可以在清晨打开应用，就可以欣赏美文。

开始之前，先看一下效果

一、创建项目

若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
选择Application应用开发（本文以应用开发为例，Atomic Service对应为原子化服务开发），选择模板“Empty Ability”，点击Next进行下一步配置。

3.创建完成以后，等项目初始化加载完成。

4.预览器预览效果

5.使用模拟器运行，如图所示。打开模拟器。

运行

二、请求网络数据

1.导入模块

// 引入包名
import http from '@ohos.net.http';
import { BusinessError } from '@ohos.base';

2.添加网络权限

如果不添加网络权限，就会有如图所示的报错。

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

3.创建createHttp任务

// 2.每一个httpRequest对应一个HTTP请求任务，不可复用
let httpRequest = http.createHttp();

4.请求url

httpRequest.request(
  // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
  "填入你的URL",
  {
    method: http.RequestMethod.GET, // 可选，默认为http.RequestMethod.GET
    // 当使用POST请求时此字段用于传递请求体内容，具体格式与服务端协商确定

    expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型

  },

5.处理数据

  // data.result为HTTP响应内容，可根据业务需要进行解析

  let MsgReturn: Article = JSON.parse(data.result.toString())

  this.article = MsgReturn.data
  // 需要加载的URL是string类型。

  console.info('Result:' + JSON.stringify(data.result));
  console.info('code:' + JSON.stringify(data.responseCode));
  // data.header为HTTP响应头，可根据业务需要进行解析
  console.info('header:' + JSON.stringify(data.header));
  console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
  // 当该请求使用完毕时，调用destroy方法主动销毁
  httpRequest.destroy();
} else {
  console.error('error:' + JSON.stringify(err));
  // 取消订阅HTTP响应头事件
  httpRequest.off('headersReceive');
  // 当该请求使用完毕时，调用destroy方法主动销毁
  httpRequest.destroy();
}

6.定义model

export class ArticleModel {
  "title": string
  "desc": string
  "author": string
  "content":string
}

三、页面渲染

页面渲染，我们主要通过状态管理完成

定义@State article: ArticleModel = new ArticleModel()

然后进行数据的刷新。具体状态管理，可以在文章最后查看状态管理章节。或者在大前端之旅公众号查看相关文章。

build() {
  Column() {
    Row() {
      Text("标题:")
        .fontSize(30)
      Text(this.article.title)
        .fontSize(30)
    }

    Text(this.article.desc)
      .fontSize(20)
    Row() {
      Text("作者：")
        .fontSize(18)
      Text(this.article.author)
        .fontSize(18)
    }

    if (this.article.content == undefined) {
      LoadingProgress()
        .color(Color.Blue)
        .layoutWeight(1)
    } else {
      Scroll() {
        Web({ src: this.article.content, controller: this.controller }).onPageBegin(() => {
        }).backgroundColor(Color.Gray)
      }
    }
  }
  .height('100%')
  .width('100%').backgroundColor(Color.White).justifyContent(FlexAlign.End)
}

四、效果

最后因为目前UI还是比较丑的，也欢迎大家基于此，可以优化代码。

五、参考链接

Http请求[1]

Colum[2]

容器组件[3]

Text[4]

基础租价[5]

Web[6]

关于坚果派

团队介绍：坚果派由坚果等人联合创建，团队拥有12个华为HDE，以及若干其他领域的三十余位万粉博主运营。专注于研究的技术包括HarmonyOS/OpenHarmony，华为自研语言，AI、BlueOS操作系统等。主营业务是面向国内外客户提供新一代信息技术为核心的产品、解决方案和服务。团队聚焦“鸿蒙原生应用”、“智能物联”和“AI赋能”、“人工智能”四大业务领域，依托华为开发者专家等强大的技术团队，以及涵盖需求、开发、测试、运维于一体的综合服务体系，赋能文旅、媒体、社交、家居、消费电子等行业客户，满足客户数字化升级转型的需求，帮助客户实现价值提升。也欢迎一起合作。

坚果介绍

华为开发者专家（HUAWEI Developer Experts）、OpenHarmony布道师、华为跨平台框架布道师、OpenHarmony MVP、OpenHarmony校源行开源大使、中国计算机学会CCF专业会员、鸿蒙原生应用讲师、2023年OpenHarmony应用创新赛导师、RISC-V+OpenHarmony应用创意赛导师、2023，2024开源之夏导师、InfoQ签约作者，CSDN博客专家，51CTO博客专家，阿里云博客专家，电子发烧友社区之星，开发者学堂”十佳“讲师。OpenHarmony三方库贡献者，上架应用12款。上架三方库9款、作品入围2024鸿蒙创新赛曾受邀参加2022，2023HDC大会。以及作为华为鸿蒙生态学堂讲师在南京，上海等城市参与授课。在北京航空航天大学，北京师范大学，西北工业大学、哈尔滨工程大学，南京信息科技大学，等十余所高校开展鸿蒙/开源讲座。

参考资料

[1]

Http请求: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/http-request-0000001821000269

[2]

Colum: https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column-0000001862607437

[3]

容器组件: https://developer.huawei.com/consumer/cn/doc/harmonyos-references/4_4_u5bb9_u5668_u7ec4_u4ef6-0000001862687637

[4]

Text: https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text-0000001815927600

[5]

基础租价: https://developer.huawei.com/consumer/cn/doc/harmonyos-references/4_3_u57fa_u7840_u7ec4_u4ef6-0000001815927560

[6]