基于鸿联标准系统开发板的毛泽东诗文应用

Posted 2022-12-30

为了满足基于鸿蒙标准系统的物联网应用需求，鸿联关公200开发板刚完成OpenHarmony3.2及master版本的适配。开发板采用了瑞芯微 RK3568 芯片，具有常见音视频接口，集成高性能LTE Cat.1模块，专注物联网应用的开发。 适逢毛泽东诞辰129周年，就用这款开发板完成一个毛泽东诗文应用，即是对开发板的测试，也表达对伟人的纪念。 时间紧，直接使用codelabs的分布式新闻客户端略做修改，达到了预期的效果。

对codelabs示例主要修改之处

1. 在src/main/js/MainAbility/common/images下添加诗词和文章相关图片
2. 在src/main/js/MainAbility/pages/index/index.js下修改表头，诗词，文章的文字内容。

const titles = [
  
    name: 全部
  ,
  
    name: 毛泽东诗词
  ,
  
    name: 毛泽东文集
  ,
];

const newsData = [
  
    title: 沁园春 雪,
    date: 一九三六年二月,
    type: 毛泽东诗词,
    imgUrl: /common/images/img_1.png,
    content:     北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。\\n    江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。
  ,

3. 将src/main/js/MainAbility/pages/detail/detail.hml内阅读和喜欢栏修改为文章发表的日期，同时取消底部bottom栏。

<div class="container">
    <text class="text-title"> title </text>
    <text class="text-date"> date    </text>
    <image class="image" src=" imgUrl "></image>
    <text class="text-content">
         content 
    </text>

4. 在src/main/js/MainAbility/pages/index/index.js跳转详情页时，传送诗文发表日期等数据

itemClick(news) 
    // 跳转到详情页面
    router.push(
      uri: pages/detail/detail,
      params: 
        title: news.title,
        date: news.date,
        type: news.type,
        imgUrl: news.imgUrl,
        content: news.content
      
    );
  

5. 另外，样式按显示效果做适当调整。 这样，简单几步修改，一个毛泽东诗词文章的应用就诞生了。后续会逐步优化和丰富内容。

本文作者：鸿联

想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com/#bkwz​​