06鸿蒙APP开发之布局优化与完善

原创

已于 2024-03-12 15:00:55 修改 · 649 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #ArkTs #Divide #鸿蒙 #鸿蒙开发

于 2024-02-23 17:45:00 首次发布

1、更换数据源

目前发现https的请求无法访问，暂时还不清楚什么原因。
一直报“SSL peer certificate or SSH remote key was not OK”这个错误。
查了一下是证书问题，后续再查查什么问题。

更新TestApiBean，如下：


export class TestApiBean {
   
   
  id?:string;
  question?: string;
  correct_answer?: string;
  type?: string;
  title?:string;
  body?:string;

  constructor(
    id:string,
    question: string,
    correct_answer: string,
    type: string,
    title:string,
    body:string
  ) {
   
   
    this.id=id;
    this.question = question;
    this.correct_answer = correct_answer;
    this.type = type;
    this.title = title;
    this.body = body;
  }
}

新增 title、body字段。

API返回数据示例：

[
  {
   
   
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
   
   
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },

2、主页布局优化

import prompt from '@ohos.promptAction'
import util from '@ohos.util';
//引入自定义类
import {
   
    HttpManager } from './net/HttpManager'
import {
   
    RequestMethod } from './net/RequestOption';
import {
   
    TestApiBean } from './entity/TestApiBean';
import {
   
    ResTestAPiBean } from './entity/ResTestAPiBean';
import router from '@ohos.router';

@Entry
@Component
struct Index {
   
   
  private tabsController = new TabsController();
  @State index: number = 0; // 选项卡下标，默认为第一个

  //组件Index自带的函数，类似于重写@Override，在build()之前就会执行
  aboutToAppear() {
   
   
    this.loadApiTestData();
  }

  //@State此时的状态就非常有用了，当你上下拉刷新UI的时候，只需要重新给此变量赋值就会自动刷新界面(UI),ForEach要求必须Array
  @State testApiBeanList: Array<TestApiBean> = new Array<TestApiBean>();

  /**
   * 调用封装的网络请求类，访问网络API并获取列表数据
   */
  loadApiTestData() {
   
   
    HttpManager.getInstance().request<Array<TestApiBean>>({
   
   
      url: "http://jsonplaceholder.typicode.com/posts",
      method: RequestMethod.GET,
      header: "application/x-www-form-urlencoded"
    }).then((result) => {
   
   

      //循环的去把请求响应回来的数据push（目前只会这种方式，其他的还在了解）到我们创建数据列表对象中
      for (let i = 0; i < result.length; i++) {
   
   
        let item = result[i];
        this.testApiBeanList.push({
   
   
          // id: util.generateRandomUUID(true),
          id: item.id.toString(),
          title: item.title,
          body: item.body,
        });
      }
    }).catch((error) => {
   
   
      console.log(JSON.stringify(error));
    });
  }

  //开始构建UI
  build() {
   
   
    Column() {
   
   
      Tabs({
   
    controller: this.tabsController }) {
   
   
        TabContent() {
   
   
          Column()