基于WeX5的新闻类HTML5 App开发和设计

基于WeX5的新闻类HTML5 App开发和设计

作者：宋朋飞 曹斌

来源：《电子技术与软件工程》2016年第24期

本文是基于WeX5工具来开发的新闻类的HTML5 App，利用MySQL数据库来分类储存数据，WeX5在制作app具有、快速开发、多端运行、开源免费等优点。 【关键词】WeX5 数据库 HTML5 App 1 WeX5工具

WeX5是一款免费开源跨端Hybrid App的开发工具。WeX5具有可视化、快速开发、多端运行、开源免费等优点。 1.1 快速开发

WeX5页面组件是可视化页面设计，以模块化形式快速开发，开发、编程、调试是一体化集成开发环境，并且不需要原声开发经验即可使用。 1.2 多端运行

WeX5支持Android 端app开发运行、ios端app开发运行WeChat(微信)端app开发运行。 1.3 开源免费

永久免费，运行框架全部开源，底层内库也是开放的，Apache开源协议商业友好。 2 关键功能模块的设计 2.1 登录注册模块

主要由login控制器类实现。具体实现上包含login、register方法，用于产生验证码的verify方法和用于注册控制checkRegister的方法、用于登录校验的checklogin方法及用于找回密码的getPassword方法。其中通过post方法获得提交的用户提交的注册信息(这里考虑到get方法不安全)。用等函数对所获得的信息进行处理，用MD5函数进行密码加密等操作。 2.2 后台管理功能模块

龙源期刊网 http://www.qikan.com.cn

后台的核心功能是增删改查操作数据，这个操作只需要用add、delete、save就可以方便的实现。其实模块关键点在于权限控制。我们按部门来为管理员划分角色，分为高级管理员和普通管理员，不同级别管理员权限不同、责任不同。高级管理员可以添加和删除普通管理员账号，普通管理员进行数据的增删改查具体操作。 2.3 MySQL数据库设计

通过对该项目内容的需求模型进行分析，将数据库划分为9张数据库表，其储存内容为： 2.3.1 党务政务表

包括部门机构、通知公告、政策文件、人事管理、政务公开、党建之窗等二级目录。 2.3.2 新闻快递表

包括剑河新闻、乡镇之窗、新闻视频、部门动态。 2.3.3 平安剑河表

法治剑河、综合动态、治安防控、纠纷调解、见义勇为、网格服务、平安常识。 2.3.4 剑河旅游表

包括景点、线路、美食、酒店、资讯、特产、视频、留言。 2.3.5 个人中心表

包括用户注册信息、用户登录记录、用户书签等。 2.3.6 社情民意表

包括群众来信（公开/非公开）、投诉举报（公开/非公开）。 2.3.7 便民服务

包括政务中心、医疗卫生、脱贫攻坚、民生查询。 2.3.8 百信生活

包括房屋租赁、求职招聘、交通出行、常用电话查询、保修服务、科技知识、剑河公益。

龙源期刊网 http://www.qikan.com.cn

测试连接来创建数据库表TABLE，创建一个example_News的数据库表create table，开始添加字段，数据类型为VARCHAR，新闻要闻内容页表中的9个字段为例，fID、fTitle、fImg、fAlt、fClass、fAuthor、fData、fText、fFilter。 主键fID、字段长度50、确保数据唯一； 文章的标题fTitle、字段长度200；

图片名称fImg，字段长度200、(储存图片名称)；

图片详情fAlt 、字段长度200、图片加载失败出现的内容； 文章分类 fClass、字段长度50；

作者fAuthor、字段长度50（定义长度也可为20，） 来源fSource、字段长度50；作者fAuthor、字段长度50；

时间日期fData、字段长度50；正文fText、字段长度20000 (数据库表的排序规则和字符集定义的均为utf8格式，则字段设置的最大值为 (65535-1-2-4-30*3)/3=21812字段）； 过滤显示字段fFilter、字段长度50；(前端调用，区分二级目录下不同的文件位置，用来过滤后显示内容的字段）。 3 HTML5页面设计

管理员从后台把数据录入,数据经过处理为前端可直接显示的html5文件,新闻类app数据以图片和文本为主。我们要把文章标题、文章来源、时间日期、正文和图片等用javascript编码来实现。

（1）考虑到手机屏幕尺寸不同，我们要设置为自适应宽度，我们在body里的table中设置宽度在width=”100%”,保障可以自适应手机屏幕尺寸。

（2）简单用程序把我们所要显示的文章标题、来源、时间等文本消息导入到html文件body里面的table中的相应位置；

（3）利用js代码实现在手机上显示双击图片放大和单击图片缩小到原来状态的简单功能，我们用ondblclick 和onclick这对函数来实现，用js中的function定义enlargeImage（放大图片）和dropImage(缩小图片)，来改变img的height值达到缩放功能,注意图片路径src的路径要设置为图片的绝对路径，绝对路径才能被wex5工具找到并在app中显示。

龙源期刊网 http://www.qikan.com.cn

（4）制作完成后以，html文本的格式保存和部署到后端服务器。 4 二维码扫描下载制作

首先，二维码制作。地址为http://域名：8080/app包名（例

http:www.zsjhapp.com:8080/jianheapp.apk）；其次,对apk包进行部署。按操作生成部署文件并在服务器后端部署后，Tomcat启动运行后，会自动默认访问webapps下面的ROOT目录，所以可直接把jianhe.apk放到jianhe4(部署文件的工程名),文件夹下，则可以实现扫描二维码下载apk安装包。 5 优化

（1）减少页面请求数量，使用CSS技术可以把多张小背景图片的http图片请求数整合为一条。

（2）对离线资源进行缓存，app打开第一次进行资源缓存，无WiFi网络是可设置图片不加载模式，只有访问数据库请求的时候更新数据，减少流量。

（3）减少一次更新新闻数量条数次数，每次下拉更新list可以设置为5-10条，本文设置为10条。

（4）上传的图片进行限制和压缩。 参考文献

[1]黄悦深.基于HTML5的移动Web App开发[J].图书馆杂志,2014.07.012. 作者简介

宋朋飞（1989-），男，河北省邯郸市人。硕士研究生。研究方向为通信与信息系统。 曹斌（1963-），男，研究员。现为中铝贵阳铝镁设计研究院有限公司副总工程师，国家铝镁电解装备工程技术研究中心副主任。研究方向为为机电一体化、工业控制、信息安全和智能管理。 作者单位

1.贵州大学 贵州省贵阳市 550025

2. 国家铝镁电解装备工程技术研究中心 贵州省贵阳市 550000 3.中铝贵阳铝镁设计研究院有限公司 贵州省贵阳市 550000

龙源期刊网 http://www.qikan.com.cn