请选择 进入手机版 | 继续访问电脑版

积分380 / 贡献0

提问22答案被采纳5文章41

作者动态

[经验分享] 教女友玩转OpenHarmony实战篇《随机美文》 原创

润开鸿_坚果 显示全部楼层 发表于 2024-6-8 22:30:13

前言

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

开始之前,先看一下效果

image-20240608221841298

一、创建项目

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

image-20240608144304675

image-20240608144331479

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

image-20240608144628922

4.预览器预览效果

image-20240608144835532

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

image-20240608145719319

运行

image-20240608145751697

image-20240608220817477

二、请求网络数据

1.导入模块

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

2.添加网络权限

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

image-20240608151234557

"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)
}

四、效果

image-20240608221859759

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

五、参考链接

Http请求

Colum

容器组件

Text

基础租价

Web

关于坚果派

团队介绍:坚果派由坚果等人联合创建,团队拥有12个华为HDE,以及若干其他领域的三十余位万粉博主运营。专注于研究的技术包括HarmonyOS/OpenHarmony,华为自研语言,AI、BlueOS操作系统等。主营业务是面向国内外客户提供新一代信息技术为核心的产品、解决方案和服务。团队聚焦“OpenHarmony原生应用”、“智能物联”和“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大会。以及作为华为鸿蒙生态学堂讲师在南京,上海等城市参与授课。在北京航空航天大学,北京师范大学,西北工业大学、哈尔滨工程大学,南京信息科技大学,等十余所高校开展OpenHarmony/开源讲座。

©著作权归作者所有,转载或内容合作请联系作者

您尚未登录,无法参与评论,登录后可以:
参与开源共建问题交流
认同或收藏高质量问答
获取积分成为开源共建先驱

精彩评论1

arkui-x

沙发 发表于 2024-6-19 16:15:37
感谢,用到啦

Copyright   ©2023  OpenHarmony开发者论坛  京ICP备2020036654号-3 |技术支持 Discuz!

返回顶部