一种基于HTML5创建手机新闻客户端的方法技术

本发明专利技术公开了一种基于HTML5创建手机新闻客户端的方法，步骤为：创建新的工程，引入基于JS开发的前端框架MUI作为开发框架，将前端工具封装成开发的JS方法，封装调用原生方法；设置项目配置文件中的配置参数；在开发框架中设置新闻客户端的功能模块；根据开发框架中新闻客户端功能模块构建出的HTML5页面，打包生成新闻客户端的APP。本发明专利技术基于HTML5实现，可解决跨平台问题，重复工作量小，效率高、扩展性强，而且将前端工具封装成开发的JS方法，封装调用原生方法，使用者学习成本低；通过缓存新闻相关的数据减少对服务器的请求次数和交互损耗，提升用户体验。本发明专利技术作为一种基于HTML5创建手机新闻客户端的方法可广泛应用于互联网领域。

A method of creating mobile phone news client based on HTML5

The invention discloses a method for creating the HTML5, mobile phone news client based on the following steps: create a new project, the introduction of MUI front-end framework based on JS development as a development framework, the front-end tool package JS package method development, call native methods; project configuration parameter settings in the configuration file; function module settings news client in the development framework; according to the news client development framework module to construct HTML5 pages, packaged into news client APP. The invention is based on HTML5, which can solve the problem of cross platform, repeated small workload, high efficiency, strong expansibility, and the front-end tool package JS package method development, call native methods, user cost is low; the news related data to reduce cache server requests and improve user interaction loss. Experience. The invention can be widely used in the field of Internet as a method of creating a mobile phone news client based on HTML5.

【技术实现步骤摘要】
一种基于HTML5创建手机新闻客户端的方法
本专利技术涉及互联网领域，尤其是一种基于HTML5创建手机新闻客户端的方法。
技术介绍
移动应用开发技术的演变过程，可分为三个阶段：从早期的WAP(包括WAP1.0和WAP2.0)网站到目前流行的原生应用(NativeApplication)，再逐步转向以HTML5标准为基础的WebApp。2008年，HTML5标准案颁布，为移动应用开发提供了另外一种技术方案。2010年，苹果宣布其移动设备不支持Flash插件后，HTML5标准更是迅速成为移动网站打造丰富的网页应用的首选。为了适应移动互联应用“富内容、富交互、富体验、跨平台”的要求，HTML5较之HTML4做出了大幅的改良。突出表现在：支持离线访问、支持全媒体内容展示、支持交互式的2D/3D图像渲染、提供丰富的API以调用移动设备的硬件。这使得HTML5可以实现堪比NativeApp效果的WebApp，而且，其具有更优越的安全性、跨平台访问性。更重要的是，WebApp开发难度较之NativeApp大幅降低，易用性更高。H5WebApp相较于NativeApp(原生应用)的优点：跨平台、快速迭代、持续交付、降低开发成本、开源生态系统发达。随着互联网的逐渐普及和移动终端的迅速发展影响着受众媒介接触习惯的改变，越来越多的人希望通过移动终端随时随地获得最新的新闻和资讯。现代生活的快节奏使得人们只能忙里偷闲。中国新闻出版研究院公布的“第十次全国国民阅读调查”报告显示，人均每天手机阅读时长为16.52分钟，通过手机阅读的国民比率为31.2％。新媒体环境下，读者阅读时间的减少和碎片化趋势，预示着手机阅读的影响范围将会越来越广。手机阅读不仅能快速获取新闻信息，同时契合了碎片化时代读者的便捷性、片段化和主动性的需求。目前，市面上多数新闻客户端，都是基于原生开发的，不能跨平台，不能快速迭代和持续交付，需要投入较大的开发成本。例如现有技术中提供了移动终端新消息及新闻资讯的语音播放方法及应用(CN106791078A)，但其技术方案存在以下缺点：1、其app应用程序用于多种平台，开发过程中的重复工作量大，效率低，不利于跨平台实现手机新闻系统；2、对于一些常用的应用场景，例如开车时收听新闻播报，可能车辆在行驶过程中通过隧道等情况下，因网络信号弱或网络信号中断导致新闻播报暂停，造成用户的视听体验不佳；3、未实现使用者的信息互动。术语解释：JavaScript(JS)：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。WAP：无线应用协议，是一项全球性的网络通信协议。它使移动Internet有了一个通行的标准，其目标是将Internet的丰富信息及先进的业务引入到移动电话等无线终端之中。MUI：最接近原生App体验的高性能前端框架。
技术实现思路
为了解决上述技术问题，本专利技术的目的是：一种兼容性强、实现功能快速迭代的基于HTML5创建手机新闻客户端的方法。本专利技术所采用的技术方案是：一种基于HTML5创建手机新闻客户端的方法，包括有以下步骤：创建新的工程，引入基于JS开发的前端框架MUI作为开发框架，将前端工具封装成开发的JS方法，封装调用原生方法；设置项目配置文件中的配置参数；在开发框架中设置新闻客户端的功能模块；根据开发框架中新闻客户端功能模块构建出的HTML5页面，打包生成新闻客户端的APP。进一步，所述功能模块包括有用户登录模块、新闻列表模块、新闻内容模块、新闻评论模块、新闻缓存模块和新闻收藏模块。进一步，所述配置参数包括有应用信息、图表配置、启动图片、SDK设置和/或模块权限。进一步，所述用户登录模块用于执行以下步骤：获取用户的帐号密码登录数据或手机短信数据；对上述获取的数据进行验证；若验证成功则允许用户登录，否则提示登录失败信息。进一步，所述新闻列表模块用于执行以下步骤：当检测到用户读取新闻的操作指令后，向服务器发出获取新闻列表数据的请求；若获取新闻列表数据成功，则将新闻列表数据缓存至本地并显示，同时监听用户的点击操作；若获取新闻列表数据失败，则提示错误信息。进一步，所述新闻列表数据包括有新闻Id、标题、概要、浏览数、评论数和/或新闻时间。进一步，所述新闻内容模块用于执行以下步骤：当监听到用户的点击操作时，从本地缓存中读取新闻列表数据并跳转到详细新闻内容页面；向服务器发出获取新闻Id对应的新闻内容数据的请求；若获取新闻内容数据成功，则显示相应的新闻内容数据；若获取新闻内容数据失败，则提示错误信息。进一步，所述新闻评论模块用于执行以下步骤：监听到用户的点击输入框操作时，跳转到评论页面；获取用户输入的评论内容；将评论内容和新闻Id发送至服务器，并接受服务器返回的数据存储结果，若存储成功则显示评论内容，否则提示错误信息。进一步，所述新闻缓存模块用于执行以下步骤：监听到用户点击浏览记录按钮的操作时，获取用户操作对应的新闻Id，根据新闻Id在本地缓存中读取相应的缓存数据并显示。进一步，所述新闻收藏模块用于执行以下步骤：监听到用户点击查看收藏按钮的操作时，显示收藏页面；然后监听用户的点击操作。本专利技术方法有益效果是：本专利技术基于HTML5来实现，一套代码可以打包成Android、IOS、WindowsPhone等系统，基于HTML5响应式布局，兼容各种Pad，解决跨平台问题，并能及时响应用户反馈，快速的调整产品的方向，避免在无用的功能浪费时间和精力，实现持续交付、快速迭代，重复工作量小，效率高，并能够封装扩展公共的组件、插件，将前端工具封装成开发的JS方法，封装调用原生方法，使用者学习成本低；通过缓存新闻相关的数据减少对服务器的请求次数，减少交互损耗，提升用户体验。附图说明图1为本专利技术方法的步骤流程图。具体实施方式下面结合附图对本专利技术的具体实施方式作进一步说明：参照图1，一种基于HTML5创建手机新闻客户端的方法，包括有以下步骤：(1)创建新的工程，引入基于JS开发的前端框架MUI作为开发框架，将前端工具封装成开发的JS方法，封装调用原生方法；具体实施时可将常用的前端工具封装成开发的JS方法，封装常用的调用原生方法，如语音播报、语音识别、摄像头等，让用户可直接通过JS来调用。(2)设置项目配置文件中的配置参数；例如通过修改项目中的manifest.json文件来设置应用信息、图表配置、启动图片、SDK设置、模块权限等参数信息。(3)在开发框架中设置新闻客户端的功能模块；进一步作为优选的实施方式，所述功能模块包括有用户登录模块、新闻列表模块、新闻内容模块、新闻评论模块、新闻缓存模块和新闻收藏模块。进一步作为优选的实施方式，所述用户登录模块用于执行以下步骤：获取用户的帐号密码登录数据或手机短信数据；当用户首次登录时，可以通过账号密码登录也可以通过手机短信登录，也可以第三方登录App。对上述获取的数据进行验证；当用户采用密码账号登录时，具体的验证方式可以是：输入账号、密码通过自封装的login()方法校验登录成功或失败；当用户采用手机短信登录时本文档来自技高网...

【技术保护点】
一种基于HTML5创建手机新闻客户端的方法，其特征在于，包括有以下步骤：创建新的工程，引入基于JS开发的前端框架MUI作为开发框架，将前端工具封装成开发的JS方法，封装调用原生方法；设置项目配置文件中的配置参数；在开发框架中设置新闻客户端的功能模块；根据开发框架中新闻客户端功能模块构建出的HTML5页面，打包生成新闻客户端的APP文件。

【技术特征摘要】
1.一种基于HTML5创建手机新闻客户端的方法，其特征在于，包括有以下步骤：创建新的工程，引入基于JS开发的前端框架MUI作为开发框架，将前端工具封装成开发的JS方法，封装调用原生方法；设置项目配置文件中的配置参数；在开发框架中设置新闻客户端的功能模块；根据开发框架中新闻客户端功能模块构建出的HTML5页面，打包生成新闻客户端的APP文件。2.根据权利要求1所述的一种基于HTML5创建手机新闻客户端的方法，其特征在于：所述功能模块包括有用户登录模块、新闻列表模块、新闻内容模块、新闻评论模块、新闻缓存模块和新闻收藏模块。3.根据权利要求1所述的一种基于HTML5创建手机新闻客户端的方法，其特征在于：所述配置参数包括有应用信息、图表配置、启动图片、SDK设置和/或模块权限。4.根据权利要求2所述的一种基于HTML5创建手机新闻客户端的方法，其特征在于：所述用户登录模块用于执行以下步骤：获取用户的帐号密码登录数据或手机短信数据；对上述获取的数据进行验证；若验证成功则允许用户登录，否则提示登录失败信息。5.根据权利要求2所述的一种基于HTML5创建手机新闻客户端的方法，其特征在于：所述新闻列表模块用于执行以下步骤：当检测到用户读取新闻的操作指令后，向服务器发出获取新闻列表数据的请求；若获取新闻列表数据成功，则将新闻列表数据缓存至本地并显示，同时监听用户的点击操作；若获取新闻列表数据失败，则提示错...

【专利技术属性】
技术研发人员：蔡禹，杜超，张一帆，陈洁，
申请(专利权)人：广东广业开元科技有限公司，
类型：发明
国别省市：广东,44