基于WeX5的新聞?lì)怘TML5 App開發(fā)和設(shè)計(jì)

宋朋飛+曹斌

本文是基于WeX5工具來開發(fā)的新聞?lì)惖腍TML5 App，利用MySQL數(shù)據(jù)庫來分類儲(chǔ)存數(shù)據(jù)，WeX5在制作app具有、快速開發(fā)、多端運(yùn)行、開源免費(fèi)等優(yōu)點(diǎn)。

【關(guān)鍵詞】WeX5 數(shù)據(jù)庫 HTML5 App

1 WeX5工具

WeX5是一款免費(fèi)開源跨端Hybrid App的開發(fā)工具。WeX5具有可視化、快速開發(fā)、多端運(yùn)行、開源免費(fèi)等優(yōu)點(diǎn)。

1.1 快速開發(fā)

WeX5頁面組件是可視化頁面設(shè)計(jì)，以模塊化形式快速開發(fā)，開發(fā)、編程、調(diào)試是一體化集成開發(fā)環(huán)境，并且不需要原聲開發(fā)經(jīng)驗(yàn)即可使用。

1.2 多端運(yùn)行

WeX5支持Android 端app開發(fā)運(yùn)行、ios端app開發(fā)運(yùn)行WeChat(微信)端app開發(fā)運(yùn)行。

1.3 開源免費(fèi)

永久免費(fèi)，運(yùn)行框架全部開源，底層內(nèi)庫也是開放的，Apache開源協(xié)議商業(yè)友好。

2 關(guān)鍵功能模塊的設(shè)計(jì)

2.1 登錄注冊(cè)模塊

主要由login控制器類實(shí)現(xiàn)。具體實(shí)現(xiàn)上包含login、register方法，用于產(chǎn)生驗(yàn)證碼的verify方法和用于注冊(cè)控制checkRegister的方法、用于登錄校驗(yàn)的checklogin方法及用于找回密碼的getPassword方法。其中通過post方法獲得提交的用戶提交的注冊(cè)信息(這里考慮到get方法不安全)。用等函數(shù)對(duì)所獲得的信息進(jìn)行處理，用MD5函數(shù)進(jìn)行密碼加密等操作。

2.2 后臺(tái)管理功能模塊

后臺(tái)的核心功能是增刪改查操作數(shù)據(jù)，這個(gè)操作只需要用add、delete、save就可以方便的實(shí)現(xiàn)。其實(shí)模塊關(guān)鍵點(diǎn)在于權(quán)限控制。我們按部門來為管理員劃分角色，分為高級(jí)管理員和普通管理員，不同級(jí)別管理員權(quán)限不同、責(zé)任不同。高級(jí)管理員可以添加和刪除普通管理員賬號(hào)，普通管理員進(jìn)行數(shù)據(jù)的增刪改查具體操作。

2.3 MySQL數(shù)據(jù)庫設(shè)計(jì)

通過對(duì)該項(xiàng)目?jī)?nèi)容的需求模型進(jìn)行分析，將數(shù)據(jù)庫劃分為9張數(shù)據(jù)庫表，其儲(chǔ)存內(nèi)容為：

2.3.1 黨務(wù)政務(wù)表

包括部門機(jī)構(gòu)、通知公告、政策文件、人事管理、政務(wù)公開、黨建之窗等二級(jí)目錄。

2.3.2 新聞快遞表

包括劍河新聞、鄉(xiāng)鎮(zhèn)之窗、新聞視頻、部門動(dòng)態(tài)。

2.3.3 平安劍河表

法治劍河、綜合動(dòng)態(tài)、治安防控、糾紛調(diào)解、見義勇為、網(wǎng)格服務(wù)、平安常識(shí)。

2.3.4 劍河旅游表

包括景點(diǎn)、線路、美食、酒店、資訊、特產(chǎn)、視頻、留言。

2.3.5 個(gè)人中心表

包括用戶注冊(cè)信息、用戶登錄記錄、用戶書簽等。

2.3.6 社情民意表

包括群眾來信（公開/非公開）、投訴舉報(bào)（公開/非公開）。

2.3.7 便民服務(wù)

包括政務(wù)中心、醫(yī)療衛(wèi)生、脫貧攻堅(jiān)、民生查詢。

2.3.8 百信生活

包括房屋租賃、求職招聘、交通出行、常用電話查詢、保修服務(wù)、科技知識(shí)、劍河公益。

測(cè)試連接來創(chuàng)建數(shù)據(jù)庫表TABLE，創(chuàng)建一個(gè)example_News的數(shù)據(jù)庫表create table，開始添加字段，數(shù)據(jù)類型為VARCHAR，新聞要聞內(nèi)容頁表中的9個(gè)字段為例，fID、fTitle、fImg、fAlt、fClass、fAuthor、fData、fText、fFilter。

主鍵fID、字段長(zhǎng)度50、確保數(shù)據(jù)唯一；

文章的標(biāo)題fTitle、字段長(zhǎng)度200；

圖片名稱fImg，字段長(zhǎng)度200、(儲(chǔ)存圖片名稱)；

圖片詳情fAlt 、字段長(zhǎng)度200、圖片加載失敗出現(xiàn)的內(nèi)容；

文章分類 fClass、字段長(zhǎng)度50；

作者fAuthor、字段長(zhǎng)度50（定義長(zhǎng)度也可為20，）

來源fSource、字段長(zhǎng)度50；作者fAuthor、字段長(zhǎng)度50；

時(shí)間日期fData、字段長(zhǎng)度50；正文fText、字段長(zhǎng)度20000 (數(shù)據(jù)庫表的排序規(guī)則和字符集定義的均為utf8格式，則字段設(shè)置的最大值為 (65535-1-2-4-30*3)/3=21812字段）；

過濾顯示字段fFilter、字段長(zhǎng)度50；(前端調(diào)用，區(qū)分二級(jí)目錄下不同的文件位置，用來過濾后顯示內(nèi)容的字段）。

3 HTML5頁面設(shè)計(jì)

管理員從后臺(tái)把數(shù)據(jù)錄入,數(shù)據(jù)經(jīng)過處理為前端可直接顯示的html5文件,新聞?lì)恆pp數(shù)據(jù)以圖片和文本為主。我們要把文章標(biāo)題、文章來源、時(shí)間日期、正文和圖片等用javascript編碼來實(shí)現(xiàn)。

（1）考慮到手機(jī)屏幕尺寸不同，我們要設(shè)置為自適應(yīng)寬度，我們?cè)赽ody里的table中設(shè)置寬度在width=”100%”,保障可以自適應(yīng)手機(jī)屏幕尺寸。

（2）簡(jiǎn)單用程序把我們所要顯示的文章標(biāo)題、來源、時(shí)間等文本消息導(dǎo)入到html文件body里面的table中的相應(yīng)位置；

（3）利用js代碼實(shí)現(xiàn)在手機(jī)上顯示雙擊圖片放大和單擊圖片縮小到原來狀態(tài)的簡(jiǎn)單功能，我們用ondblclick 和onclick這對(duì)函數(shù)來實(shí)現(xiàn)，用js中的function定義enlargeImage（放大圖片）和dropImage(縮小圖片)，來改變img的height值達(dá)到縮放功能,注意圖片路徑src的路徑要設(shè)置為圖片的絕對(duì)路徑，絕對(duì)路徑才能被wex5工具找到并在app中顯示。

（4）制作完成后以，html文本的格式保存和部署到后端服務(wù)器。

4 二維碼掃描下載制作

首先，二維碼制作。地址為http://域名：8080/app包名（例http:www.zsjhapp.com:8080/jianheapp.apk）；其次,對(duì)apk包進(jìn)行部署。按操作生成部署文件并在服務(wù)器后端部署后，Tomcat啟動(dòng)運(yùn)行后，會(huì)自動(dòng)默認(rèn)訪問webapps下面的ROOT目錄，所以可直接把jianhe.apk放到j(luò)ianhe4(部署文件的工程名),文件夾下，則可以實(shí)現(xiàn)掃描二維碼下載apk安裝包。

5 優(yōu)化

（1）減少頁面請(qǐng)求數(shù)量，使用CSS技術(shù)可以把多張小背景圖片的http圖片請(qǐng)求數(shù)整合為一條。

（2）對(duì)離線資源進(jìn)行緩存，app打開第一次進(jìn)行資源緩存，無WiFi網(wǎng)絡(luò)是可設(shè)置圖片不加載模式，只有訪問數(shù)據(jù)庫請(qǐng)求的時(shí)候更新數(shù)據(jù)，減少流量。

（3）減少一次更新新聞數(shù)量條數(shù)次數(shù)，每次下拉更新list可以設(shè)置為5-10條，本文設(shè)置為10條。

（4）上傳的圖片進(jìn)行限制和壓縮。

參考文獻(xiàn)

[1]黃悅深.基于HTML5的移動(dòng)Web App開發(fā)[J].圖書館雜志,2014.07.012.

作者簡(jiǎn)介

宋朋飛（1989-），男，河北省邯鄲市人。碩士研究生。研究方向?yàn)橥ㄐ排c信息系統(tǒng)。

曹斌（1963-），男，研究員。現(xiàn)為中鋁貴陽鋁鎂設(shè)計(jì)研究院有限公司副總工程師，國(guó)家鋁鎂電解裝備工程技術(shù)研究中心副主任。研究方向?yàn)闉闄C(jī)電一體化、工業(yè)控制、信息安全和智能管理。

作者單位

1.貴州大學(xué) 貴州省貴陽市 550025

2. 國(guó)家鋁鎂電解裝備工程技術(shù)研究中心 貴州省貴陽市 550000

3.中鋁貴陽鋁鎂設(shè)計(jì)研究院有限公司 貴州省貴陽市 550000