基于WeX5的新聞類HTML5 App開發和設計

宋朋飛+曹斌

本文是基于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 后臺管理功能模塊

后臺的核心功能是增刪改查操作數據，這個操作只需要用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 百信生活

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

測試連接來創建數據庫表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中顯示。

（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