2024年6月13日发(作者：)

ISSN1009-3044

ComputerKnowledgeand

年

Technology

第17卷第4期(20212月)

电脑知识

与技术

Vol.17,No.4

February

2021

E-mail：*************.cn

ComputerKnowledgeandTechnology

电脑知识

与技术

http：//

Tel：+86-551-6569

微阅读与电影小程序的设计与实现

徐祎麟，刘星含

(河南科技大学软件学院，河南洛阳471000)

摘要：随着社会进步和科技发展，移动端技术得到迅速发展，手机已经普及到各个年龄段，信息服务重心从电脑端向移动

端转移。但学生信息服务的移动应用目前还不太完善，学生无法快速获最新消息和对应数据。基于微信小程序的微阅读

与电影前端使用原生态App进行开发，后端采用云服务框架构建，前后端信息交互通过架包封装API接口实现，微阅读与

电影微信小程序为大众建立一个公共电影服务以及文章阅读平台，敢于挑战传统的信息服务，采用个性化设计，时刻关注

用户的使用体验。

关键词：微信小程序；数据爬取；小程序开发；云服务

中图分类号：TP393文献标识码:A

开放科学（资源服务）标识码（OSID）:

文章编号：1009-3044(2021)04-0083-02

小程序无需用户进行应用的下载和安装，大大缩短了等待

时间，优化用户使用体验。微信小程序服务于微信平台，只需

要安装微信便可使用各种各样小程序。当前网络信息过度泛

滥，造成信息的不一致和虚假传播，用户所能获得的信息真实

度有限，使用微信小程序，可以收获大量的用户群体，同时净化

网络环境。使用者在使用小程序时，与微信账号进行绑定，产

品公开免费，因此小程序可以迅速获得用户关注并方便后期维

护和优化。此应用可以帮助用户第一时间获取信息，同时进行

信息交流分享，创造良好的网络环境。

容。该页面实现音乐播放接口，用户通过点击页面图片，实现

音乐播放和暂停。文章底部有三个图片，用户可以为相关文章

点赞，评论和收藏。点击评论图标，可以查看用户评论和发表

评论内容。

1需求分析

通过数据分析和市场调研，信息服务重心更倾向于移动

端，但学生信息服务的移动应用目前还不太完善。高校学生的

关注集中在日常生活和消费娱乐，此应用旨在提供观影和阅读

方面的服务，为学生的生活提供便利。包括的功能有:浏览推

荐文章，收听流行音乐，查看电影排名和评分数据，搜索电影等

功能。此应用为大众建立一个公共电影服务以及文章阅读平

台，程序分为三大的模块：阅读文章、浏览电影、用户信息。

2体系架构

该程序前端页面使用原生态App进行开发，方便查看源码

和代码维护。前端页面向后端发送请求获取数据，后端再把结

果传递给前端，经过数据渲染功能显示在页面上。后端采用云

服务框架构建，与云数据库进行交互，从微信服务器获取信息，

经过后端逻辑层处理数据，前端再进行数据渲染和显示。

图1

3.2浏览电影模块

3功能模块

3.1阅读文章模块

阅读文章模块包括文章阅读和评论分享。用户可以查看

文章列表，会跳转到具体文章页面，查看文章作者，标题和内

浏览电影模块包括查看电影榜单和搜索功能。调用电影

网站接口，页面分成三个板块:新片榜，热映榜和高分榜。用户

点击电影海报图片，即可查看有关的电影信息，如电影评分，电

影简介，演员阵容等内容。电影模块界面上端有搜索框，用户

可以根据关键字，索引到具体电影名称，进而获得想要的内容。

用户可以拖曳榜单，实现数据的即时刷新。

收稿日期：2020-10-06

基金项目：大学生研究训练计划项目(2020107)

作者简介：徐祎麟(2000—),男，河南三门峡人，本科，主要研究方向为JavaWeb；刘星含(1987—),女，河南洛阳人，助教，硕士，主要研究

方向为文本挖掘，图形图像处理。

本栏目责任编辑：谢媛媛

软件设计开发

83

ComputerKnowledgeandTechnology

电脑知识

与技术

图2

3.3用户信息模块

用户信息模块根据功能不同进行分类，主要分为八个功

能：系统信息，网络状态，地图显示，即时定位，用户登录，应用

服务，扫码支付，运动步数。用户可以查看相关信息和体验服

务，某些功能需要通知用户进行允许权限设置。例如，开启地

图显示功能，用户可以查看自己位置。支持微信扫码功能，获

得更多的信息服务与支持。打开应用服务，里面有第三方平台

服务，增加用户体验。

图3

84

软件设计开发

第17卷第4期(2021年2月)

4功能实现

4.1页面布局

传统的前端设计，依赖于盒子模型，但在某些特殊布局，如

垂直居中设计就比较困难，采用Flex弹性布局可以有效解决此

类问题。指定父容器

flex-direction

display属性为flex，对于文字列表，设置

表内容设置flex-direction

属性为column

属性为

，垂直方向由上至下排列。每个列

row，对于主轴justify-content

和交叉轴align-items对齐方式都设置为center。一般获取的电

影数量不只几个，再设置元素的flex-wrap属性为warp，当数量

超出屏幕宽度时，实现自动换行。

4.2数据获取

本地数据库存储文字和图片，音乐和电影数据分别调用音

乐外链和电影

https

资源是

请求，

json

参数

API

格式文件，

url为请求资源地址，

接口进行实现。通过

然后通过在线json

调用默认

t方法发起

转码器翻译为

get方法获得的

js文件。

定义一个函数，通过循环遍历电影目录，根据得到的数据字段，

依此获得电影名称，评分，简介和演员等数据，再设置success

函数调用请求数据和fail函数如果返回资源错误。

4.3接口调用

login

在用户界面，

数得到

函数登录小程序，

实现运动步数功能获得用户步数，

cloudID后，weRunData

如果申请有

的值便可以公开获取，

appID的话，可以通过云函

首先调用

经过前端

界面数据渲染，用户便可以查看。定位功能的实现，开发者需

要登录微信开发者平台，申请第三方服务，按照官方文档要求，

调用第三方服务接口。

5结束语

微阅读与电影小程序借助于微信平台，开发成本简单，代

码易于维护。目前小程序的初期效果已经实现，后期还有待继

续完善，未来在大学校园里推广，能有效节省学生时间和促进

合理消费，同时数据实现即时更新，可以与学生会和广播站进

行联合，刊登优秀文章到小程序中，营造良好的大学氛围。合

理设计和应用小程序能为学生的学习和生活提供便利，同时宣

传和扩大学校知名度。

参考文献：

[1]雷磊.微信小程序开发入门与实践[M].北京

[2]

社

:清华大学出版

雷磊

,2017.

[3]

/miniprogram/dev/framework/

.微信官方文档.小程序[EB/OL].[2020-08-15].de⁃

蒋文娟

[4]

与实现

徐星明

[J].

,苏喜红

.微信小程序第三方平台的设计与实现

软件导刊

,孟丽珍

,2020,19(6):141-145.

.基于微信小程序的音乐播放器研究

[D].济南

[5]

大学

:山东

2020,32(10):181-183.

余跃泓

,2020.

.基于弹性盒子的响应式网页布局[J].信息与电脑,

【通联编辑：梁书】

本栏目责任编辑：谢媛媛