基于HBuilder 的冬奥会新闻小程序的设计与实现

李梓瑶, 舒 后, 宋 玮

(北京印刷学院新媒体学院,北京 102600)

随着微信的迅速发展,人们的沟通变得亲密无间,微信成为了市面上最主流的通讯类APP 之一。微信小程序在微信稳步发展后诞生,它是一种不用下载就可以使用的应用程序,用户只需要在微信中“扫一扫”或“搜一搜”即可打开,不需要额外的安装或是卸载,所以小程序从诞生至今以便捷、轻量级、内存小等优势成为了当下焦点。因此,本文以冬奥会为背景,讨论并设计了一个基于微信小程序的冬奥新闻资讯平台,为用户提供最新冬奥资讯、视频等。

1 主要技术简介

1.1 Web 前端技术

Web 前端技术主要包括HTML5、CSS3 和JavaScript。HTML5 提供了丰富的语义标签,满足了用户对网页上的各种需求;CSS3 则是提供了丰富的网页特效及样式,增强了网页的表现能力;JavaScript 是整个网页的支撑,它是主流浏览器中最主要的编程语言。

1.2 Vue.js

Vue.js 是用于构建用户界面的渐进式JavaScript 框架,它和其他前端框架相比采用的是自底向上增量开发的设计。Vue.js 框架的核心库更加注重视图层,所以它不仅容易上手,还便于与第三方库相融合。

1.3 HBuilder 平台

对于开发者而言,采用HBuilder 平台而不是微信开发者工具是因为HBuilder 具有很好的跨平台优势,它将常用的组件和API 进行了跨平台封装。因此,它不但可以输出成微信小程序,还可以输出到10 个不同的平台中,包括安卓和iOS 系统,这就让开发者的学习成本和开发成本都大大降低。

1.4 uni-app

uni-app 是一个使用Vue.js、微信小程序标签以及API 的跨平台前端框架。uni-app 中组件标签规范和小程序平台的规范基本一致,这样方便开发者将新的API 与原生API 进行关联。同时uniapp 拥有活跃的插件市场,极大提高了开发速度和效率。

1.5 uniCloud 云数据库

uniCloud 是DCloud 联合阿里云和腾讯云为uni-app 开发者提供的基于serverLess 模式和js 编程的云开发平台。在uniCloud 中,提供了一个JSON 格式的文档型数据库。

2 系统分析与数据设计

2.1 需求分析

2015 年,中国获得了第24 届冬季奥林匹克运动会的主办权,北京成为了世界第一个既举办过夏季奥运会又举办冬季奥运会的城市。2020 年,新冠肺炎疫情给全球体育赛事带来了巨大挑战,但北京冬奥会筹办工作不断、力度不减,体现了国家对其高度地重视,越来越多的人也愿意参加到冰雪运动中来。

与此同时,相关的冬奥资讯也如雨后春笋般涌现。但针对目前网上已有的APP 或小程序来看,冬奥模块只占其一小部分,并且内容和形式比较单一。随着冬奥会的临近,还有许多人对冰雪运动并不了解,因此研究并开发一个有关冬奥的小程序可以为冰雪爱好者提供最新资讯平台,也可以为普通用户提供学习和科普平台。

2.2 数据设计

小程序主要的展现形式为文字、图片和视频。但是大量的图片和视频并不适合直接放到前端页面中,因此本文采用了uniCloud 云数据库来存储信息,数据库中包含了文章信息表、导航栏内容表、用户表和视频信息表,其余的图片和视频文件则上传到了云存储中。小程序的数据设计如图1 所示。

图1 数据来源

3 系统功能设计与实现

3.1 功能设计

冬奥会新闻小程序包括首页、视频、收藏和我的4 个主界面,如图2 所示。

图2 系统功能图

其中首页包括搜索框、轮播图、导航栏和新闻四个部分。首页新闻包含了6 种分类:冬奥聚焦、冬奥百科、精彩瞬间、冬残奥会、运动会和古代冰雪运动。用户不仅可以在小程序中了解最新的冬奥资讯、赛程安排等,还能够学习到冬奥会的相关知识和古代中国冰雪运动的历史。看完一篇资讯后,用户可以在文章底部评论来抒发自己的观点。

视频页功能与首页相似,以视频流的方式呈现。不仅会发布一些往届冬奥会的精彩瞬间,还会加入一些适合青少年观看的动画视频等。

在收藏页中,用户可以快速便捷地查看首页收藏的文章,也可以进行取消收藏的操作;我的页则呈现的是用户的个人信息。

3.2 功能实现

基于以上系统功能设计,小程序采用HBuilder为开发平台,微信开发者工具进行小程序的调试。主要技术包含导航栏设计、首页和视频页内文章数据库的创建和调用、微信开发者工具测试等。

3.2.1 导航栏设计

微信小程序因为包含在微信内,所以它不能与APP 一样可以多个软件同时切换使用,如果需要更换小程序或是要回到微信的主界面时,通常需要点击屏幕右上角的胶囊按钮返回,如图3 所示。

图3 小程序中的导航栏(上)与APP 中的导航栏(下)

因此,在设计时需要考虑到导航栏自适应、胶囊按钮的宽度和高度等问题,主要代码如下:

同时,首页和视频页的导航栏可以直观地展现出整个小程序的主要信息模块,所以采用了滑动的形式,运用＜scroll＞标签进行设计。同时,用户可以根据自己的喜好,删除或是添加新闻分类模块,主要代码如下:

3.2.2 数据库的创建和调用

文章信息表是小程序中最主要的数据库,存储了新闻文章的ID、标题、正文内容、评论、作者等信息,如图4 所示。

图4 文章信息表

将以上所提到的信息添加到云数据库后,代表一个数据库的创建完成,接下来需要将数据库中的信息与小程序的前端页面进行关联和调用,主要代码如下:

在引用完数据库后,需要获取表中的相关数据,主要代码如下:

最后,再将数据返回给客户端,代码如下:

3.2.3 懒加载

懒加载是一种独特并且强大的获取数据的方式,常用在新闻资讯类、购物类等APP 中。当用户滚动界面时,它会自动地获取更多数据,并且还减少了页面的加载时间,减轻了服务器的压力,主要代码如下:

3.2.4 微信开发者工具调试

在项目开发时,uni-app 可以随时调用微信开发者工具进行调试,通过微信“扫一扫”功能或微信开发者平台的自动预览功能,开发者就可以直接在手机上查看小程序的运行情况,并进行调试修改,如图5 所示。

图5 调试、运行小程序

4 结语

随着2022 北京冬奥会的临近,大量相关新闻、视频等信息涌现。基于用户阅读更加快捷和便利的需求,本文使用HBuilder 平台和uni-app 框架较全面地完成了冬奥会新闻类小程序的设计与实现。同时,小程序设计中还存在一些不足之处,需要不断地进行完善和改进。