陳春雨 大慶師范學院機電工程學院 王福成 黑龍江八一農墾大學工程學院

解國梁 黑龍江八一農墾大學工程學院 梁宇 中國石油大慶化工研究中心

JQ框架下基于h5開發(fā)的微信吃貨網

陳春雨 大慶師范學院機電工程學院 王福成 黑龍江八一農墾大學工程學院

解國梁 黑龍江八一農墾大學工程學院 梁宇 中國石油大慶化工研究中心

本文主要以HTML5版網站的設計與實現(xiàn)為基礎，以文字、圖片等豐富的多媒體為客戶展示產品信息。吃貨網的頁面呈現(xiàn)主要是基于當前流行的HTML5的新功能，使用HTML5技術，優(yōu)化網站顯示，能夠自動識別手機的屏幕大小，完全適應各種各樣的手機、平板電腦。吃貨網內容豐富，而且加載速度非常快，這使得移動電話用戶更容易的瀏覽信息。

微信 HTML5 吃貨網

在當今的移動網絡世界，出現(xiàn)了一批基于微信瀏覽器開發(fā)的網站，這些網站能夠完美兼容各大瀏覽器平臺，功能更加全面，信息更加豐富。本論文主要目的是做一個美觀實用的基于H5的吃貨網。本文的兩個創(chuàng)新點為：第一，使用微官網設計風格，實現(xiàn)兼容各平臺的網站。第二，使用當前最新的H5技術來完成吃貨網的頁面設計與展示。

1 網頁核心技術

1.1 HTML5

運用H5進行代碼開發(fā)，簡單易懂，讓網頁自動適配所有移動端屏幕，在因此自動調整頁面布局。與以往相比，H5能讓移動設備上呈現(xiàn)多媒體。它的新的語法特征，實現(xiàn)了很多的新功能。因此，如今用戶與文檔的交互方式受到了本質上的進化。

一方面從性能角度來看，H5讓HTML文檔體積變小；另一方面從用戶可讀性上看，之前的一堆繁雜代碼相對初學者來說，完全是像看天書似的，而H5的聲明方式顯然更讓人理解一些。

1.2 jQuery框架

jQuery是一個集很多優(yōu)勢于一身的js框架。它的宗旨是：寫更少的代碼，做更多的事情。jQuery有六大核心特點，分別是：①獨特的鏈式語法；②多功能接口；③高效靈活的選擇器；④可對選擇器擴展；⑤便捷的插件擴展機制；⑥豐富的插件。

2 網站項目分析

2.1 目標

第一，操作簡單，交互性增強。第二，實用性第一，制作成本低廉，顯示相關信息。第三，為廣大手機用戶在生活中帶來方便。

2.2 需求分析

商家企業(yè)擁有微官網的目的有兩個：一個是為了在移動互聯(lián)網上進行推廣商品；另一個給用戶提供更方便的購物需求。

2.2.1 功能需求

根據(jù)企業(yè)對微官網的要求，web頁面的模塊組成主要包括：商品展示列表、商品分類、購物車、我的訂單、個人中心。

2.2.2 性能需求

網頁性能方面的要求如下：

（1）響應性：響應速度快，最大程度上滿足用戶需求。

（2）適應性：網頁能夠自動適應所有屏幕，并且有相應的布局調整。

（3）可使用性：操作便捷，有驗證功能，并采用友好的錯誤提醒。

（4）可維護性：使用h5新標簽利于維護。

2.3 可行性分析

2.3.1 經濟可行性分析

微官網是一種輕app化的產品，而app的開發(fā)、維護花費較高，使用微官網能讓開發(fā)和維護成本降低很多，獲得更大的經濟效益。

2.3.2 社會可行性分析

在當今社會，使用手機的人數(shù)持續(xù)上升，越來越多的人通過手機獲取外部信息，微網站已成為社交信息交流的新平臺。微型網站建設，突出企業(yè)的特殊的社會地位，企業(yè)形象及聲譽，最終促進服務行業(yè)的創(chuàng)新和與客戶的良性互動。

2.3.3 技術可行性分析

考慮到用戶的需要，來分析一下它的技術可行性。使用H5和jQuery框架構建WEB頁面開發(fā)，可以滿足用戶的需要。使用H5技術使頁面更適合移動用戶，同時也兼容每一個移動設備。

從以上三方面考慮，建立吃貨網是可行的。

3 網頁設計

3.1 開發(fā)工具

Hbuilder是支持H5 web開發(fā)的編輯器。Hbuilder編輯器的快，是最大的優(yōu)勢，一套完整的語法技巧和代碼輸入方法，代碼塊等等，極大地提高HTML，javascript和CSS開發(fā)效率。該編輯器還包括最全面的語法庫和瀏覽器兼容性數(shù)據(jù)。

HBuilder是專門為HTML設計而開發(fā)的。主要用于開發(fā)HTML、CSS和js，前端預編譯的語言sass和less都能進行良好的編輯。自2013年夏天發(fā)布以來，HBuilder已經成為該行業(yè)的主要開發(fā)工具，擁有數(shù)十萬開發(fā)者。

3.2 功能模塊設計

網站展示的模塊主要功能包括商品展示列表、商品分類、購物車、我的訂單、個人中心。

3.3 代碼設計

整個吃貨網是由H5標準開發(fā)的。H5標準的格式很簡單，最重要的標志是，第一行代碼沒有版本的信息和頁面聲明，原始HTML頁面聲明是一個很長的字符串。H5新標簽和JQuery的使用可以做出很酷的2d或3d效果，給人帶來一種新的感覺。

使用H5的預加載能力來開發(fā)。它可以預先加載特定位置的指定頁面，使用瀏覽器的空閑時間提前下載指定的內容，放入緩存存儲。這樣，當您下一次瀏覽頁面時，信息將被直接從緩存中提取，從而增加頁面加載的速度。

用H5的新特性進行網頁的開發(fā)：

（1）meta標簽，使用這個標簽，迫使文檔維護設備的寬度在1：1，匹配所有的移動設備。最初的初始縮放比率1.0，代表屏幕上的初始大小的100%。

（2）Header標簽，它定義了頁面的標題，調用了js實現(xiàn)滑動開關在導航欄中。

（3）Nav標簽，它定義了導航的內容，更容易識別。

（4）Footer標簽，它定義了網頁的底部。在這種情況下，定義小字使用smal標簽用于解釋網站底部的正確版權的信息。

（5）section和article標簽，可以相互嵌套。換句話說，他們之間沒有從屬關系。article標簽代表文章，文章是完整的、獨立的內容。在某些方面，section標記也可以用作HTML標準中的div，但比div更有語義。

4 網頁調試

4.1 瀏覽器調試

在瀏覽器的網站中(推薦使用谷歌，F(xiàn)irefox，搜狗也似乎是可以使用)，第一次在您的瀏覽器中打開url，然后按鍵盤上F12。出現(xiàn)的是我們常見的Web網站的調試方法。

當然，這一切的前提是，網頁是一種響應式布局。

這里參數(shù)的含義分別是：

width-viewport 寬度 height-viewport 高度

initial-scale 初始的縮放比例

minimum-scale 允許用戶縮放到的最小比例

maximum-scale 允許用戶縮放到的最大比例

user-scalable 用戶是否可以手動縮放

4.2 真機調試

直接使用自己的手機或者其他類型的真機進行調試。

5 網頁展示

圖1 商品展示列表頁

本網頁是基于H5技術進行前端展示，展示模塊主要有：商品展示列表、商品分類、購物車、我的訂單、個人中心。如圖1展示：

點擊導航欄首頁按鈕，則跳到商品展示列表頁。商品展示列表主要由五部分組成，第一部分是最上面的輪播圖，這個輪播圖可以自動輪播，當鼠標停留在圖片上，則會停止輪播；第二部分是中間的搜索框，可以根據(jù)自己的喜好，直接搜索自己想要的商品；第三部分是主體部分，展示眾多商品，并配有具體圖片介紹，供顧客選擇，如果想具體深入的看某件商品，只需要點擊此商品，則跳到商品詳情頁可以查看商品具體詳情；第四部分是最下層部分，介紹技術支持；第五部分則是導航欄，它會一直處于最上層，不會被滾動條拉下去，五個導航可以自由點擊跳到對應頁面塊。

點擊導航欄購物車按鈕，則會直接跳到購物車頁。購物車頁主要由倆部分組成，第一部分是商品請單，這里會展現(xiàn)之前添加在購物車的商品，可以選擇購買個數(shù)，也可以重新選擇不買刪除；第二部分是下面的結算部分，這里有合計、清空、立即結算三塊。

點擊導航欄我的訂單按鈕，則會直接跳到我的訂單頁面。我的訂單頁主要由六部分組成，分別是待支付、待發(fā)貨、待收貨、已完成、退換貨以及管理收貨地址。

點擊導航欄個人中心按鈕，則會跳到個人中心頁面，個人中心頁主要由十部分組成，第一部分是上面的個人基本情況，這里會展現(xiàn)顧客給自己設置的昵稱和頭像以及系統(tǒng)分配的ID號、個人等級和關注；第二部分是中間的財產公示，這里包括總積分、賬戶余額和全部傭金；第三部分是我的二維碼；第四部分是我的會員，這里展現(xiàn)自己發(fā)展的下線會員，分為一級普通會員、二級普通會員和三級普通會員；第五部分是我的推廣，點擊進去會出現(xiàn)三部分，分別是：推廣訂單、推廣點擊和推廣關注；第六部分是傭金體現(xiàn)，點進去最上面會出現(xiàn)可提現(xiàn)傭金金額，然后下面會分成8種類別訂單，分別是：未付款訂單傭金、已付款訂單傭金、已發(fā)貨訂單傭金、待審核訂單傭金、無效訂單傭金、未付款訂單傭金和未付款訂單傭金。最下邊是兩個按鈕，分別是：傭金明細和申請?zhí)岈F(xiàn)；第七部分是修改資料，點擊進去會分為五項，分別是：姓名昵稱、手機號碼、銀行名稱、支付寶號、微支付號；第八部分是積分兌換，可以查看用戶當前可用積分和查看自己已兌換的產品；第九部分是銷售排行榜，這里分為倆部分，分別是：粉絲排行和銷量排行；第十部分是幫助說明。

6 總結

隨著移動互聯(lián)網的發(fā)展，人們越來越離不開移動互聯(lián)網的使用。它指導人類社區(qū)的需求，而H5微網站的出現(xiàn)是基于人們需求的前提。吃貨網在實際的使用可能會有一些問題。然而，我們可以通過許許多多移動用戶的反饋來進一步優(yōu)化頁面，并及時改進。在現(xiàn)實生活中，更滿足實際情況的需要，建立一個標準的、合理的微網站。

[1]基于HTML5的移動Web App開發(fā)[J].黃悅深.圖書館雜志.2014(07)

[2]微信公眾平臺的傳播特點及趨勢分析[J].王眉.互聯(lián)網天地.2014(05)

[3]微信平臺領先模式及其未來發(fā)展趨勢研究[J].潘一飛.中國新通信.2014(04)

[4]國內電子商務網站的視覺設計分析[J].吳忠慧.現(xiàn)代裝飾(理論).2015(01)

陳春雨，女，1979-，吉林省四平市人，漢，大慶師范學院機電工程學院教師，講師，研究方向：測試計量技術及儀器。王福成（通訊作者），男，1979-，吉林省四平市人，漢，黑龍江八一農墾大學工程學院教師，講師，研究方向：結構力學。

項目標號：黑龍江八一農墾大學教學研究課題——項目名稱：基于BIM技術的計算機繪圖技能的探索與實踐研究（NDJY1608）。