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

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

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

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

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

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

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

微信 HTML5 吃貨網(wǎng)

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

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

1.1 HTML5

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

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

1.2 jQuery框架

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

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

2.1 目標(biāo)

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

2.2 需求分析

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

2.2.1 功能需求

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

2.2.2 性能需求

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

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

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

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

（4）可維護(hù)性：使用h5新標(biāo)簽利于維護(hù)。

2.3 可行性分析

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

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

2.3.2 社會(huì)可行性分析

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

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

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

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

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

3.1 開發(fā)工具

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

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

3.2 功能模塊設(shè)計(jì)

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

3.3 代碼設(shè)計(jì)

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

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

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

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

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

（3）Nav標(biāo)簽，它定義了導(dǎo)航的內(nèi)容，更容易識(shí)別。

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

（5）section和article標(biāo)簽，可以相互嵌套。換句話說，他們之間沒有從屬關(guān)系。article標(biāo)簽代表文章，文章是完整的、獨(dú)立的內(nèi)容。在某些方面，section標(biāo)記也可以用作HTML標(biāo)準(zhǔn)中的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)試方法。

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

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

width-viewport 寬度 height-viewport 高度

initial-scale 初始的縮放比例

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

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

user-scalable 用戶是否可以手動(dòng)縮放

4.2 真機(jī)調(diào)試

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

5 網(wǎng)頁展示

圖1 商品展示列表頁

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

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

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

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

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

6 總結(jié)

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

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

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

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

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

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

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