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

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

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

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

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

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

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

微信 HTML5 吃貨網(wǎng)

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

1 網(wǎng)頁核心技術(shù)

1.1 HTML5

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

一方面從性能角度來看，H5讓HTML文檔體積變?。涣硪环矫鎻挠脩艨勺x性上看，之前的一堆繁雜代碼相對初學者來說，完全是像看天書似的，而H5的聲明方式顯然更讓人理解一些。

1.2 jQuery框架

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

2 網(wǎng)站項目分析

2.1 目標

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

2.2 需求分析

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

2.2.1 功能需求

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

2.2.2 性能需求

網(wǎng)頁性能方面的要求如下：

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

（2）適應性：網(wǎng)頁能夠自動適應所有屏幕，并且有相應的布局調(diào)整。

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

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

2.3 可行性分析

2.3.1 經(jīng)濟可行性分析

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

2.3.2 社會可行性分析

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

2.3.3 技術(shù)可行性分析

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

從以上三方面考慮，建立吃貨網(wǎng)是可行的。

3 網(wǎng)頁設(shè)計

3.1 開發(fā)工具

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

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

3.2 功能模塊設(shè)計

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

3.3 代碼設(shè)計

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

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

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

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

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

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

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

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

4 網(wǎng)頁調(diào)試

4.1 瀏覽器調(diào)試

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

當然，這一切的前提是，網(wǎng)頁是一種響應式布局。

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

width-viewport 寬度 height-viewport 高度

initial-scale 初始的縮放比例

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

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

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

4.2 真機調(diào)試

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

5 網(wǎng)頁展示

圖1 商品展示列表頁

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

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

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

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

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

6 總結(jié)

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

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

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

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

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

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

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