1. 涉及到的技术点
- axios的使用
- 第三方库的包管理ohpm的下载和环境变量的配置
2. 官网文档指南
- 如何使用axios https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios
- 第三方库的包管理ohpm的下载和环境变量的配置 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-commandline-get-0000001954334245-V5
温馨提示:使用第三方库,必须安装ohpm和环境变量配置,上面的官方教程有详细的说明
3. axios基础使用
详细教程请看上面的官方文档
- 倒入axios依赖
ohpm install @ohos/axios
-
网络权限,只要涉及到网路模块,都得添加网络权限,官方指南教程:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/declare-permissions-V5
-
在module.json5中添加网络权限
"requestPermissions": [
{
'name': 'ohos.permission.INTERNET'
}
],
- axios 使用
// 发送一个get请求
axios<string, AxiosResponse<string>, null>({
method: "get",
url: 'https://www.xxx.com/info'
}).then((res: AxiosResponse) => {
console.info('result:' + JSON.stringify(res.data));
}).catch((error: AxiosError) => {
console.error(error.message);
})
4. demo具体代码实现
- 在上集中,我们把首页电影列表实现了,但里面的数据是本地模拟的,也就是数据是写死的。这集讲通过axios发送网络请求,获取影片动态数据
- 直接上代码具体实现
import axios, { AxiosError, AxiosResponse } from '@ohos/axios';
import { MovieInfo, MovieInfoItem } from '../entity/MovieInfo';
@Entry
@Component
struct ListPage {
@State movieInfo: MovieInfo = {
subjects: []
}
onPageShow(): void {
this.getMovieListData()
}
/**
* 获取最近热门电影
*/
getMovieListData() {
axios<string, AxiosResponse<string>, null>({
method: "get",
url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=热门&page_limit=50&page_start=0'
}).then((res: AxiosResponse) => {
this.movieInfo = res.data
}).catch((error: AxiosError) => {
console.error(error.message);
})
}
build() {
Column() {
//标题栏
Text('首页')
.fontWeight(700)
.fontSize(28)
.width('100%')
.padding({ left: 10 })
Scroll() {
Column() {
//轮播图
Swiper() {
Image("https://img2.baidu.com/it/u=3119334893,112907213&fm=253&fmt=auto&app=138&f=JPEG?w=1333&h=500")
.height(120).width('100%')
Image('https://img1.baidu.com/it/u=2208322220,3046896965&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=500')
.height(120).width('100%')
Image('https://img1.baidu.com/it/u=3642384699,1397016578&fm=253&fmt=auto&app=138&f=JPEG?w=1476&h=500')
.height(120).width('100%')
Image('https://img1.baidu.com/it/u=3953008485,1470810916&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400')
.height(120).width('100%')
}.loop(true)
.margin(10)
.autoPlay(true)
.borderRadius(10)
Text('最近热门电影')
.fontWeight(700)
.fontSize(17)
.width('100%')
.margin({ left: 10, top: 20 })
.padding({ left: 6 })//设置左边框
.borderWidth({
left: 4
})
.borderColor('#e22418')
//电影列表,网格布局
Grid() {
ForEach(this.movieInfo.subjects, (item: MovieInfoItem) => {
GridItem() {
Column() {
Image(item.cover)
.height(140)
.width('100%')
.objectFit(ImageFit.Cover)
Text(item.title)
.fontSize(13)
.margin({ top: 6 })
.textOverflow({
overflow: TextOverflow.Clip
})
.maxLines(1) //一般情况下textOverflow和maxLines配合一起使用
}.width('100%')
}.onClick(() => {
})
})
}
.columnsTemplate('1fr 1fr 1fr')
.margin({ top: 20 })
.columnsGap(10)
.rowsGap(10)
.margin(10)
}
.width('100%')
}
}
.width('100%')
.height('100%')
}
}
- 用到的数据实体
export class MovieInfo {
subjects: Array<MovieInfoItem> =[]
}
export class MovieInfoItem {
episodes_info: string = ''
rate: string = ''
cover_x: string = ''
title: string = ''
url: string = ''
playable: boolean = false
cover: string = ''
id: string = ''
cover_y: string = ''
is_new: string = ''
}
温馨提示:1. 必须安装ohpm包管理器 2. 必须安装axios依赖 3. 必须添加网络权限
- 如何检验ohpm包管理器是否安装成功?执行codelinter -v指令
- axios是否倒入依赖成功 在oh-package.json5文件中查看
- 添加网络权限,在module.json5中