前言
端午节到了，我们一起来做一个随机美文，可以在清晨打开应用，就可以欣赏美文。
开始之前，先看一下效果
一、创建项目
- 若首次打开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还是比较丑的，也欢迎大家基于此，可以优化代码。
五、参考链接
关于坚果派
团队介绍：坚果派由坚果等人联合创建，团队拥有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大会。以及作为华为鸿蒙生态学堂讲师在南京，上海等城市参与授课。在北京航空航天大学，北京师范大学，西北工业大学、哈尔滨工程大学，南京信息科技大学，等十余所高校开展鸿蒙/开源讲座。
“本文正在参加华为鸿蒙有奖征文征文活动”
