Taro 开发鸿蒙版每日资讯应用实战指南

徐建国

发布于 2025-05-27 09:55:32

3560

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

一、项目简介

本项目基于 Taro 跨端开发框架，实现鸿蒙（HarmonyOS）平台的每日资讯应用，通过调用 阿拉 API 每日资讯接口[1] 获取新闻数据，支持展示日期、新闻列表、微语及配图。

image-20250525163225275

二、环境准备

1. 开发工具

Node.js：v18+（推荐 v18 LTS）
Taro CLI：全局安装 npm install -g @tarojs/cli
HarmonyOS 开发环境：安装 DevEco Studio[2]（需配置鸿蒙 SDK）

2. 接口申请

访问 阿拉 API 控制台[3] 注册账号，获取 token（示例值：你的token）。

三、项目创建与配置

1. 初始化 Taro 项目

# 创建鸿蒙项目
taro init taro-ohos-demo
cd taro-ohos-demo
# 安装插件
npm i @tarojs/plugin-platform-harmony-cpp

2. 配置鸿蒙平台

修改 project.config.json，添加鸿蒙平台支持：

import os from 'os'
import path from 'path'

const config = {
// ...
 plugins: [
      ['@tarojs/plugin-platform-harmony-cpp', {

      }]
    ],
    harmony: {
      // compiler: 'vite',
      projectPath: path.join(os.homedir(), '/Desktop/test/tarooh'),
      hapName: 'entry',
    },
// ...
}

四、核心功能开发

1. 数据请求与状态管理

在 src/pages/index/index.tsx 中实现核心数据逻辑，具体步骤如下：

1.1 接口调用与数据获取

使用 Taro.request 发起 HTTP 请求调用阿拉 API 每日资讯接口，关键参数说明：

url：接口地址 https://v3.alapi.cn/api/zaobao（需替换为实际申请的 API 地址）
method：采用 GET 请求方式获取数据
data：携带 token（从阿拉 API 控制台获取的认证凭证）和 format=json（指定返回数据格式）

// src/pages/index/index.tsx
import Taro from '@tarojs/taro'
import { useState } from 'react'
import './index.scss'

  // 定义新闻数据接口（匹配实际接口返回结构）
  interface NewsData {
    date: string
    news: string[]
    weiyu: string
    image: string
    head_image: string
  }


export default function Index() {
  // 初始化状态：newsData存储新闻数据（类型为NewsData或null），loading控制加载状态
  const [newsData, setNewsData] = useState<NewsData | null>(null)
  const [loading, setLoading] = useState(true)

  // 使用useLoad生命周期钩子在页面加载时触发请求
  useLoad(() => {
    Taro.request({
      url: 'https://v3.alapi.cn/api/zaobao',
      method: 'GET',
      data: {
        token: '你的', // 替换为实际token
        format: 'json'
      }
    }).then(res => {
      // 接口返回格式：res.data = { success: boolean, data: NewsData }
      if (res.data.success) {
        setNewsData(res.data.data) // 更新新闻数据
      }
      setLoading(false) // 无论成功或失败，结束加载状态
    }).catch(error => {
      console.error('请求失败:', error)
      setLoading(false) // 异常时同样结束加载
    })
  })

  // 渲染逻辑...
}

1.2 状态管理与兜底逻辑

加载状态：通过 loading 状态控制页面显示：
- 加载中：显示「正在加载...」提示
- 加载完成：根据 newsData 是否存在渲染内容或错误提示
数据验证：通过 TypeScript 定义 NewsData 接口，确保数据结构正确性，避免「类型 'never' 上不存在属性」等类型错误
错误处理：使用 catch 捕获网络请求异常，控制台输出错误信息并更新加载状态

2. 页面布局与样式优化

在 src/pages/index/index.scss 中通过 CSS 实现视觉优化，具体调整如下：

2.1 容器布局调整

顶部间距优化：将 .index 容器的顶部内边距从默认 10px 减少为 5px，同时设置 height: 100vh 使容器占满整个视口高度，避免内容区域被顶部导航栏遮挡

.index {
  padding: 5px 10px 10px; /* 上:5px 左右:10px 下:10px */
  height: 100vh; /* 占满视口高度 */
  box-sizing: border-box; /* 包含内边距计算总高度 */
}

2.2 新闻列表滚动实现

动态高度计算：使用 calc(100% - 200px) 计算 .news-list 高度（100% 继承父容器 .index 高度，200px 为顶部标题、日期等固定元素的高度），适配不同屏幕尺寸

滚动条优化：添加 overflow-y: auto 实现内容超出时自动显示滚动条，同时通过 -webkit-overflow-scrolling: touch 优化移动端滚动流畅度

.news-list {
  height: calc(100% - 200px); /* 动态高度 */
  overflow-y: auto; /* 内容溢出时显示滚动条 */
  -webkit-overflow-scrolling: touch; /* 优化移动端滚动 */
  padding: 0 8px; /* 列表内边距 */
}

2.3 文本样式增强

字体大小调整：将 .news-item 字体从 16px 增大至 18px，提升阅读体验；同时设置 line-height: 1.6 增加行间距，避免文字拥挤

.news-item {
  font-size: 18px; /* 主要新闻字体 */
  line-height: 1.6; /* 行间距 */
  color: #333; /* 深灰色文字 */
  margin-bottom: 12px; /* 新闻项底部间距 */
}

2.4 额外样式补充

为加载中的提示文字添加居中显示和灰色样式：

.loading-tip {
  text-align: center;
  color: #666;
  font-size: 16px;
  margin-top: 50px;
}

为加载失败的提示添加红色警告样式：

.error-tip {
  text-align: center;
  color: #ff4d4f;
  font-size: 16px;
  margin-top: 50px;
}

五、编译与运行

1. 编译为鸿蒙工程

# 编译为鸿蒙 HAP 文件
taro build --type harmony_cpp

2. 在 DevEco Studio 运行

打开编译生成的 dist/ohos 目录
连接鸿蒙设备或启动模拟器
点击 DevEco Studio 的「运行」按钮

六、常见问题解决

接口请求失败：检查 token 是否过期，或网络请求权限是否开启（config/index.ts 配置 networkTimeout）。
样式不生效：确认类名与组件 className 一致，或通过 DevEco Studio 的「布局预览」调试。
滚动不流畅：尝试添加 -webkit-overflow-scrolling: touch 优化移动端滚动体验。

七、项目总结

通过本项目，你可以学习到：

Taro 跨端开发框架的使用
鸿蒙平台开发环境配置
接口调用与数据处理
页面布局与样式优化希望本项目能帮助你快速搭建鸿蒙版每日资讯应用，提升开发效率。

八、项目地址

项目源码：https://gitcode.com/nutpi/taro-ohos-demo

九、鸿蒙侧注意事项

1.网络权限需要手动添加

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

extensionAbilities 需要注释

"extensionAbilities": []

参考资料

[1]

阿拉API每日资讯接口: https://v3.alapi.cn/api/zaobao

[2]

DevEco Studio: https://developer.harmonyos.com/cn/develop/deveco-studio

[3]

阿拉API控制台: https://v3.alapi.cn/

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-05-26，如有侵权请联系 cloudcommunity@tencent.com 删除

taro

本文分享自大前端之旅微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度