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

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

对codelabs示例主要修改之处

在src/main/js/MainAbility/common/images下添加诗词和文章相关图片
在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    *如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。'
  },

将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>

在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
      }
    });
  }

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

本文作者：鸿联

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

51CTO 开源基础软件社区

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

秒客网

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

对codelabs示例主要修改之处

相关文章