基于微信小程序的網(wǎng)絡購物系統(tǒng)的設計目錄 1 11.1.1網(wǎng)絡購物的現(xiàn)狀 11.1.2網(wǎng)絡購物的優(yōu)勢所在 1 3第2章開發(fā)工具與技術 52.1環(huán)境準備 52.1.1注冊賬號 52.1.2獲取APPID 5 52.2項目技術選型 5 62.4小程序模塊簡介 72.4.1主頁 72.4.2分類 8 92.4.4個人中心 2.4.5商品詳情 2.4.6支付頁面 2.4.7訂單查詢 2.4.8商品搜索 2.5本章小結 第3章小程序數(shù)據(jù)庫設計 3.2數(shù)據(jù)庫概念結構設計 3.2.1系統(tǒng)功能分析 3.2.2數(shù)據(jù)庫設計 商品分類表(cate) 首頁商品分類導航名稱表(floor_title) 商品信息表(goods) 2商品圖片表(goods_pic) 用戶訂單表(order_goods) 用戶地址信息(order_list) 主頁樓層信息(product_list) 主頁輪播圖(swiper) 用戶微信信息(user) 3.3本章小結 第4章小程序前端頁面設計 4.1小程序設計概述 4.2小程序首頁布局 4.2.1布局介紹 4.2.3本小程序首頁布局 4.3小程序分類頁面布局 4.3.1布局介紹 4.3.2各大購物小程序分類布局分析 4.3.3本小程序分類頁面布局 4.4小程序購物車頁面布局 4.4.1布局介紹 4.4.3本小程序購物車頁面布局 4.5小程序個人中心頁面布局 4.5.1布局介紹 4.5.2各大購物小程序個人中心頁面布局分析 4.5.3本小程序個人中心頁面布局 4.6小程序商品詳細信息頁面布局 4.6.1布局介紹 4.6.2各大購物小程序商品詳細信息頁面布局分析 4.6.3本小程序商品詳細信息頁面布局 4.7小程序商品列表頁面布局 4.7.1布局介紹 4.7.2各大購物小程序商品列表頁面布局分析 4.7.3本小程序商品列表頁面布局 4.8小程序結算頁面布局 4.8.1布局介紹 4.8.2各大購物小程序結算頁面布局分析 34.8.3本小程序結算頁面布局 4.9小程序收藏商品列表布局 4.9.1布局介紹 4.9.2各大購物小程序商品收藏列表布局分析 4.9.3本小程序商品收藏列表頁面布局 3 5.1結果測試 5.1.2測試過程與結果 6.1展望 6.2.1改進措施 6.3本章小結 結論 40微信目前在中國的市場十分龐大，擁有著海量的用戶，安裝上一個微信APP,滿足日常方方面面的使用，而微信上也搭載了許許多多的功能，但擁有自己的購物APP,也有微信小程序app對用戶進行一個分流，既能方便原本用戶在多平臺上進行一個使用，也方便了從未使用過它們于用戶而言，實體店進行購物，可能并不能完整的瀏覽到所有的商品屬性一—如顏需要聘用大量員工的問題，甚至只需要一個人就可以維持網(wǎng)絡商城的一個管理(不涉及維護)。其次，商家不再需要進行接待客戶，客戶自己即可完成挑選、購買等一系列的企業(yè)現(xiàn)在都開始使用微信進行營銷.搭建微信公眾平臺.無論是對干企業(yè)亦或是個人來商家分去。而微信小程序就不一樣了，公司能夠通過微信小程序去主動獲公司能夠將微信小程序與關聯(lián)微信公眾號進行開展關聯(lián)，隨后根據(jù)公眾號的推文來獲得流量。除此之外，還能夠根據(jù)周邊的微信小程序以及其微信小程序內置的許多豐富多彩的營銷推廣軟件來獲得顧客。現(xiàn)在的大型電子商務平臺，很多人都不會每天去訪問很多次，這樣一來，公司做的許許多多的營銷手段都很難傳達給客戶，客戶就無法了解到平臺的優(yōu)惠力度，從而使得平臺的營銷手段能夠得到的利潤大大降低。但微信小程序不一樣，微信小程序背靠著微信，而手機微信也是現(xiàn)階段應用人數(shù)最多的一款軟件。因此，大家每日都會頻繁的去打開微信，而商家的信息都會通過推送發(fā)送給用戶，用戶就能夠獲取到商家的信息，使得營銷手段能夠正常發(fā)揮。因此，商家們?yōu)榱藵M足用戶的購物需求，提高營業(yè)額，開發(fā)基于微信平臺的網(wǎng)絡購物系統(tǒng)具有一定的現(xiàn)實意義。1.1.3國內小程序發(fā)展情況小程序在我們的生活當中無處不在，不少商家通過微信小程序使得自己的轉型變得成功，也有不少的企業(yè)以及個人通過微信小程序獲取了極大的利潤，這就使得越來越的的企業(yè)以及個人都開始使用微信小程序。一.小程序不斷地進行更新，騰訊也在不斷的進行小程序的宣傳以及擴張[11]騰訊負責小程序的團隊不斷地對小程序進行更新，也在不斷的開發(fā)小程序新的功能，使用小程序的渠道也越來越多，通過掃一掃從二維碼進入小程序，通過微信自帶的搜索功能進入小程序，通過好友或者微信群、朋友圈分享出來的小程序分享信息進入小程序，通過使用手機里面其他的app應用跳轉到微信小程序11,通過多種多樣的方法對用戶進行微信小程序的投放。騰訊的更新力度以及更新速度十分大力且迅捷，騰訊對小程序的重視已躍然紙上。二.央視也開始接連對小程序進行報道，小程序也開始進入人們的視野，受人關注越來越多微信小程序上線的首日，央視就已經開始對小程序進行報道；而第一個吃螃蟹的企業(yè)就高達上百個，它們使用微信小程序進行商業(yè)擴張，覆蓋教育、媒體、交通、房地產、生活服務、出行、電商、餐飲、民政民生、科技等多個領域11。此外，央視的報道內容也清晰的講述了小程序開發(fā)難度低，開發(fā)門檻不高，在央視的持續(xù)報道之下，小程序的重要性也已經越來越明顯。三.使用小程序進行商業(yè)擴張的商家越來越多，小程序覆蓋面越來越大經過了長時間的發(fā)展，現(xiàn)在我們打開小程序，在我們定位附近，有數(shù)不勝數(shù)的商家使用小程序。而這些使用小程序的商家也都注冊掉了許許多多的行業(yè)內使用的詞語，大使用微信小程序的人數(shù)十分之多，但是許多用戶都還并沒有養(yǎng)成使用習慣，截至2018年底，微信小程序用戶規(guī)模超6億，經常使用微信小程序的用戶僅占34%,用戶多樣，小程序需要增加多種功能，使功能能夠覆蓋用戶使用面是當下需要努力的方未來，只有具有多種使用功能的小程序才會被用戶所青睞，近7成用戶青睞小程序，超4成用戶則認為可以將手機中不常用的app刪除掉，用微信小程序來作為替代，年輕的第1章開發(fā)工具與技術2.1環(huán)境準備開發(fā)微信小程序之前需要準備好相應的環(huán)境。首先，因為微信開發(fā)者工具編寫代碼并不是十分的方便，所以本次使用vscode進行編碼，在完成vscode的安裝后，在vscode中安裝部分插件輔助開發(fā)，如微信小程序開發(fā)助手forVSCode,代碼提示+語法高亮；微信小程序標簽、屬性的智能補全等。這些插件能夠幫助我降低開發(fā)難度，提高開發(fā)效此外還需要前往微信公眾平臺進行一系列操作，操作如下。前往微信公眾平臺進行注冊，使用從未注冊過小程序或者公眾號的微信進行注冊，本項目開發(fā)使用的是我個人的微信號進行注冊。2.1.2獲取APPID微信小程序實現(xiàn)部分功能時需要索要開發(fā)者小程序中的APPID,所以需要獲取用戶的APPID,APPID在注冊完成后可在登陸后的開發(fā)/開發(fā)管理、開發(fā)設置中查看自己2.1.3開發(fā)工具使用微信小程序自帶的開發(fā)者工具，集開發(fā)、預覽、調試、發(fā)布于一體的完整環(huán)境。[81但是由于小程序開發(fā)者工具的編碼使用并不是很良好，本次項目開發(fā)使用vscode進行編碼，微信開發(fā)者工具主要負責項目的預覽以及測試。2.2項目技術選型本次項目開發(fā)使用微信小程序原生框架MINA。開發(fā)語言選擇JavaScrip,WXML以及WXSS配合組件構成視圖層，WXML進行數(shù)據(jù)綁定、列表/條件渲染、模板、事件和引用；WXSS則對界面樣式進行編寫和實現(xiàn)。此外，使用小程序原生組件進行開發(fā)：視圖容器組件(ViewContainer):主要用于規(guī)劃布局頁面內容。包含cover-image、基礎內容組件(BasicContent):用于顯示圖標、文字等常用基礎內容。包含icon、導航組件(Navigation):用于跳轉指定頁面。包含：functionalnavigator、MySQL是一個小型關系型數(shù)據(jù)庫管理系統(tǒng)，是一種關聯(lián)數(shù)據(jù)庫管理系統(tǒng)，關聯(lián)數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內，這樣就增加了速MySQL的SQL“結構化查詢語言”是用于訪問數(shù)據(jù)庫的最常用標準化語言，MySQL采用了GPL(GNU通用公共許可證),由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，許多使用者為了降低總體擁有成本而選擇了MySQL作為數(shù)據(jù)MySQL的數(shù)據(jù)庫在設計上，是將數(shù)據(jù)庫按照互相之間的關系，儲存在一個數(shù)據(jù)庫中的不同的表上，通過各種操作進行CRUD,便于進行各種數(shù)據(jù)的增刪查改操作。MySQL支持多線程編程，在并發(fā)上擁有良好的表現(xiàn)特性，設計得當能處理高并發(fā)帶來的各種性能問題。MySQL支持索引功能，通過創(chuàng)建索引，索引維護，能加快在大量數(shù)據(jù)下的查詢更新速度，在面對多人連接時MySQL的索引功能能提供極大便利。MySQL支持Json格式存儲，這在開發(fā)過程中能帶來極大的便利，將所有模塊的展開類與List打包成Json格式存儲進MySQL中，再讀取時就不必要做另外的操作。MySQL支持事務，MySQL的事務有四大原則：永久性：即事務一旦提交成功，則永久對數(shù)據(jù)庫做出修改[13。一致性：事務執(zhí)行前的所有數(shù)據(jù)和事務執(zhí)行后的的所有數(shù)據(jù)，兩個數(shù)據(jù)都必須保持高度一致。原子性：這部分的操作不可分割，要么全部執(zhí)行完畢，要么都不執(zhí)行，不存在中間過程被影響的現(xiàn)象。然后事務執(zhí)行過程出錯就會回滾到事務沒有提交之前的狀態(tài)[13。開發(fā)工具與技術隔離性：每個事物之間都相互獨立、互不干擾。事務在進行數(shù)據(jù)更新時是很有用，它的四項原則保證了它能保證各種并發(fā)操作中的高度一致性，在高并發(fā)時也能保證數(shù)據(jù)高度一致的效果。2.4小程序模塊簡介輪播圖模塊：輪播圖模塊主要進行一個商品的快速切換展示，展示目前有哪些商品是比較熱門的或者是處于暢銷情況，位于主頁最頂端，最能吸引用戶眼球，也是最能夠讓用戶在進入小程序后第一眼能看到的商品推薦，輪播圖能夠放上高質量的清晰美觀圖片，吸引用戶注意，吸引用戶眼球。輪播圖模塊能夠根據(jù)用戶所選擇的圖片進行跳轉，跳轉到所選擇的商品的詳細信息時尚女裝圖2.1首頁輪播圖展示圖時尚天意春季熱門導航模塊：主頁的導航模塊一共分為三個樓層，每個樓層內再細分五個分類，導航模塊的作用一是能夠快速幫助客戶尋找所需要的商品，而則是能夠讓用戶在不知道自己想要購買什么的情況下能夠給客戶提出一定的“建議”,讓客戶能夠在沒有想買東西的情況下產生想買東西的念頭，幫助客戶對小程序進行使用，導航模塊首先要擁有清晰明了的字體，對商品進行說明，其次要配上鮮艷漂亮的圖片，并且圖片的內容需要匹配上字體的說明，可以吸引用戶，也能夠讓用戶快速對自己的目標進行瀏覽。導航模塊能夠根據(jù)所選擇的超鏈接進行跳轉，跳轉到所選擇的商品清單列表。夏裝導航欄時尚女裝優(yōu)質服飾春季熱門倒春寒清倉正當時戶外運動O2.4.2分類分類頁面主要分為左邊的菜單(大分類)與右邊的商品內容(小分類)。左側大分類對所有的商品進行一個按照屬性進行分配，如手機、衣服、手表等，右側小分類則是將這些商品再進行一次分配，如按照品牌分類或者按照衣服的種類進行分類。商品分類首先有助于后期在后臺中快速的進行一個商品的增刪改查，其次在用戶使用上也能夠快速讓客戶能夠精準定位自己所需商品的位置。分類頁面可從右側的商品內容超鏈接中進行一個跳轉，根據(jù)所選跳轉到所需要的商品清單列表。搜索大家電電腦辦公電視小米小米索尼烹飪廚具男裝男鞋女裝空調變頻空調立柜空調掛壁空調中央空調移動空調女鞋運動戶外◎首頁分類購物車我的2.4.3購物車獲取收貨詳細信息模塊：本模塊位于購物車頁面最頂部，通過授權獲取用戶微信中的地址信息并存入到緩存當中，若用戶微信中沒有地址，則需要用戶手動填寫地址與信息，然后打印出來顯示在最頂部，信息有地址、收貨人姓名以及收貨人的電話。收貨詳細信息模塊主要是為了能夠讓商家能夠在用戶支付后能夠進行下一步的發(fā)貨操作，在獲取用戶的授權后，用戶的地址會存入數(shù)據(jù)庫當中。獲取收貨地址獲取收貨信息模塊結算(0)商品選擇模塊：商品信息列表最左側放置復選框，通過選中或反選復選框從而達到選擇功能。底部工具欄最左側有商品的全選功能(全選框)。所有商品框被選中時，此時check為true,則底部工具欄中的全選框也被選中，反之全選框反選，此事件綁定事件change。復選框也綁定著最底部工具欄最右側的總價格，通過所選進行與商品數(shù)量進行計算，存入data與緩存中，最后顯示在最右側。全選合計：￥0包含運費結算(0)商品信息模塊：展示商品相關信息。商品數(shù)量修改模塊：商品數(shù)量修改通過綁定事件進行觸發(fā)，當商品數(shù)量被減少到為0時會觸發(fā)彈窗詢問是否刪除該商品。在商品數(shù)量左右個放置一個按鈕并分別綁定事件，左側-按鈕設置為-1,右側+按鈕設置為+1。獲取收貨地址1古旗袍禮服龍鳳褂和服結婚乃1商品信息展示商品數(shù)量更改以及全選合計：￥648結算(1)圖2.6購物車相關功能展示圖開發(fā)工具與技術購物車獲取收貨地址購物車娉語新娘中式婚紗新款秀禾服復古旗袍禮服龍鳳褂秀和服結婚孕…結算模塊包含運費結算(1)圖2.7購物車頁面結算模塊展示圖2.4.4個人中心獲取用戶信息模塊：此模塊位于個人中心頂部，在未獲取用戶信息時顯示按鈕，提示用戶進行登錄，用戶授權獲取信息后獲取用戶的微信名稱以及頭像，獲取后打印到頂部當中。收藏商品模塊：本模塊可查看用戶收藏的商品的信息。查詢全部訂單模塊：通過授權后獲取用戶token,并展示用戶訂單信息。聯(lián)系客服模塊：點擊后喚起微信聊天功能，與客服進行交流。意見反饋模塊：點擊后進入意見反饋模塊。推薦功能：點擊后喚起分享功能，可通過微信聊天將該小程序分享給微信好友。個人中心個人中心聯(lián)系客服2.4.5商品詳情收藏功能：點擊后收藏商品，將數(shù)據(jù)存入緩存當中，每次進入商品詳情頁面都會判斷當前商品是否被收藏，收藏了則更改此圖標。點擊此圖標時會先判斷是否存在于緩存數(shù)組當中，如果已經存在則刪除，即取消收藏，如果不存在，則將商品添加到收藏數(shù)組中，存入到聯(lián)系客服功能：點擊后跳轉到微信聊天界面與客服進行交流。跳轉購物車功能：此按鈕綁定事件，點擊后跳轉至cart的index。分享功能：將該頁面從微信聊天處分享給其他微信用戶。加入購物車功能：點擊后將所選物品加入購物車中，本模塊還添加了時間限制，防止短時間內多次點擊。購買功能：該功能與加入功能類似，但多了一個跳轉功能，會跳轉至cart頁面商品輪播圖【下單減500】美的Midea中央空調KFR-72T2W/BP2DN1-TR風管機一拖一變頻3..收藏圖文詳情為了方便您找到我請點擊收藏、加購物車底部工具欄加入購物車立即購買畫收藏2.4.6支付頁面在購物車處點擊支付后則跳轉至支付頁面，支付頁面只有支付功能，點擊支付功能后喚起模擬支付。(個人用戶無法喚起微信支付功能，只有企業(yè)用戶才能喚起，此處僅進行模擬支付。)用戶授權后獲取用戶支付訂單的token值并存入緩存當中，然后跳轉至訂單頁面。張東省廣州市海珠區(qū)新港中路397號包含運費支付(1)2.4.7訂單查詢進入此頁面后會判斷緩存中是否有token值，若不存在則直接跳轉到授權頁面，獲取url上的參數(shù)type,根據(jù)type來決定頁面標題的數(shù)組元素，發(fā)送請求獲取訂單的數(shù)據(jù)，進行頁面的渲染121。能效KFR-26GW/BpTYC1+1.kingpads克帕爾高檔老花鏡高TCL55A950U55英寸哈曼卡頓人工智能金屬超薄64位32核…格力(GREE)1.5匹變頻冷暖獨立除濕掛機空調KFR-..TCL55A950U55英寸哈曼卡頓人工智能金屬超薄64位32核…我的訂單2.4.8商品搜索本模塊位于主頁頂部，為超鏈接，點擊后跳轉到搜索功能，首先綁定輸入框值改變事件(input事件),獲取輸入框中的值，然后進行合法性判斷，然后進行校驗，通過后，將數(shù)值發(fā)送到后端，然后將數(shù)據(jù)遍歷。為防止發(fā)送數(shù)據(jù)過多，設置搜索按鈕，點擊后才會開始如上操作。￥2899小米平板3WIFI版7.9英寸(暫無圖片暫無圖片小米(MI)無線鼠標白色2.5本章小結主要介紹了項目搭建所需相關環(huán)境的搭建以及小程序每一個頁面所使用項目模塊第2章小程序數(shù)據(jù)庫設計3.1數(shù)據(jù)庫設計概述對于任何一個完整的小程序而言，數(shù)據(jù)庫是一個必不可少的部分。數(shù)據(jù)庫的作用是進行一個信息上的管理，本小程序使用的是MySql數(shù)據(jù)庫管理工具，以navicat作為中間件，對數(shù)據(jù)進行一個可視化操作，對本機的MySQL數(shù)據(jù)庫進行管理以及開發(fā)。通在設計數(shù)據(jù)庫之前，首先需要了解開發(fā)的小程序各個方面上的需求以及小程序所3.2數(shù)據(jù)庫概念結構設計5、對商品信息進行分類、存儲，方便使用者能夠快速的從眾多展示在眼前的商品當中本小程序購物商城一共用到9個表，分別是：商品分類id(cat_id):每一分類綁定一個固定的id,方便進行增刪改查。數(shù)據(jù)層級(cat_level):通過劃分數(shù)據(jù)層級進行數(shù)據(jù)綁定，層級為0的數(shù)據(jù)為左側分類，為1的為右側大分類標題，為2的為小分類。小程序數(shù)據(jù)庫設計商品分類大家電電腦辦公生活電器烹飪廚具男裝男鞋女裝女鞋運動戶外鐘表眼鏡小米TCL小米三索尼空調變頻空調立柜空調掛壁空調中央空調移動空調首頁購物車商品同層級分類(cat_pid):同一層級內的cat_pid相同，方便后臺區(qū)分。分類圖標(cat_icon):用于存儲分類頁面圖標。數(shù)據(jù)類型說明12分類名稱3商品同層級4數(shù)據(jù)層級5功能：用于儲存首頁商品分類三個樓層的名稱以及名稱的圖片。序號數(shù)據(jù)類型說明12樓層名稱圖片3名稱(name):存儲樓層名稱，方便后臺查詢以及修改。圖片信息(image_src):存儲樓層名稱(樓層名稱用圖片顯示)。Id:每個樓層名稱綁定一個id,通過id來進行數(shù)據(jù)綁定以及靜態(tài)布局渲染。3、商品信息表(goods)功能：用于儲存商品詳細信息。商品id(goods_id):每個商品綁定一個單獨的id。商品分類id(cat_id):所有同一類別的商品綁定相同的分類id。商品名稱(goods_name):用于放商品的名稱信息。商品價格(goods_price):用于存放商品的價格信息。商品收藏列表顯示圖片、商品列表顯示圖片、商品購物車顯示圖片、商品訂單查詢顯示圖片(goods_logo):存放各類列表中商品的圖片。商品圖文介紹(goods_introduce):商品詳細信息處圖文詳情采用圖片進行展示，此處存放圖文介紹的地址路徑。數(shù)據(jù)類型說明123商品名稱4商品價格5商品介紹圖片4、商品圖片表(goods_pic)功能：用于儲存商品相關圖片。輪播圖圖片(pics_big_url):存放商品詳細信息頁面圖片地址路徑。數(shù)據(jù)類型說明1圖片id23址4商品列表處圖片地址5、用戶訂單表(order_goods)功能：存放用戶訂單數(shù)據(jù)。商品訂單id(order_id):每個訂單分配一個單獨的id,通過綁定的id獲取其他數(shù)據(jù)進行數(shù)據(jù)渲染。商品詳細信息id(goods_id):存放商品價格信息。商品價格(goods_price):存放訂單內單個商品價格信息。商品數(shù)量(goods_number):存放訂單商品數(shù)量信息。商品總價格(goods_total_price):存放訂單內所有商品的總價格信息。商品訂單圖片(goods_small_logo):存放商品訂單列表顯示圖片的信息。用戶信息(user_id):存放生成次訂單數(shù)據(jù)的用戶的信息。序號字段名稱數(shù)據(jù)類型說明123商品價格4商品數(shù)量5商品總價格6商品訂單圖片7用戶信息功能：存放用戶地址信息。用戶信息(user_id):存放用戶信息。訂單價格(order_price):存支付金額(order_pay):存放訂單支付金額信息(因無法進行真機支付，此處只能為0)。用戶電話(order_number):存放用戶電話信息。用戶地址(consignee_addr):存放用戶地址信息。數(shù)據(jù)類型說明1用戶信息2用戶電話3訂單價格4支付金額5用戶地址7、主頁樓層信息(product_list)功能：存放主頁樓層信息的圖片、跳轉url等。樓層詳細名(name):每個圖片綁定一個昵稱，方便后臺管理。圖片(image_src):存放分類樓層處顯示的圖片的地址路徑。button標簽屬性(open_type):存放opentype的樣式信息。跳轉鏈接(navigator_url):存放每個圖片點擊后跳轉的路徑，此處綁定跳轉商品列表的cat_id。序號數(shù)據(jù)類型說明1樓層詳細名2圖片348、主頁輪播圖(swiper)功能：存放首頁輪播圖數(shù)據(jù)輪播圖圖片(image_src):存放主頁頂部輪播圖地址路徑。button標簽屬性(open_type綁定跳轉的商品id(goods_id):存放商品id信息。商品跳轉url(navigator_url):根據(jù)id信息綁定跳轉路徑。序號字段名稱數(shù)據(jù)類型說明1輪播圖圖片234商品跳轉url9、用戶微信信息(user)存放所有來自用戶微信中的信息：用戶微信名(nickName)城市(city)、省份序號字段名稱數(shù)據(jù)類型說明1用戶微信名2城市3省份4國家5頭像小程序數(shù)據(jù)庫設計主要介紹了數(shù)據(jù)庫相關各個表的詳細數(shù)據(jù)類型以及講述所有表內的詳細存儲數(shù)據(jù)內容。第4章小程序前端頁面設計現(xiàn)如今，網(wǎng)絡給我們帶來了許許多多以前所沒有的便捷，網(wǎng)絡的時代早已降臨?，F(xiàn)在的人們在使用網(wǎng)絡瀏覽內容的時候都是具有選擇性的。一般來說，用戶在選擇時，第一眼看中的是瀏覽到的內容，第二眼看到的那就應該是內容的設計風格了。小程序前端的設計至關重要，他是展示在用戶面前的最前端，是一個小程序整體最完美的詮釋。如果在制作當中忽視了前端頁面的設計，只強調小程序后臺程序的重要性，那么沒有一個良好前端展示的小程序將會流失許許多多潛在的用戶，也就失去了一個小程序應該存在的意義。因此，前端設計必須要美觀，必須要準確的顯示用戶所需要的數(shù)據(jù)、準確的顯示用戶所需要的物品，前端的設計必須科學，才能夠精準的向用戶展示一個小程序所擁有的此外，前端設計數(shù)據(jù)綁定也必須符合數(shù)據(jù)庫的設計，這樣才能夠精確顯示存入到數(shù)據(jù)庫當中的信息，使得后臺當中的數(shù)據(jù)信息能夠完美匹配前端設計的頁面。4.2小程序首頁布局4.2.1布局介紹一個小程序的首頁是用戶進入小程序時第一眼所能夠看得到的頁面，首頁是一個小程序也是一個購物網(wǎng)站至關重要的部分，它是小程序的門面，一個小程序的門面決定了用戶看到這個小程序第一眼的印象，若是門面給用戶帶來的第一眼印象不好，用戶是不會愿意繼續(xù)往下使用的，就算勉強進入后，可能能夠成為持續(xù)用戶的可能性也大大的降本次課題研究的內容為微信小程序購物小程序，為了設計一個美觀、科學的小程序主頁，首先就要對目前網(wǎng)絡上的現(xiàn)有的知名購物小程序進行一個分析，通過分析后取其精華去其糟粕，再結合自己的理解與認知，結合自身能力對小程序的首頁進行布局4.2.2各大購物小程序首頁布局分析目前網(wǎng)絡上比較知名、用戶也十分多的大型購物網(wǎng)站有淘寶、京東、蘇寧等，他們不但有著自己的web、app也有著移植的小程序應用，面對用戶十分廣泛，因此設計也十分的科學、雅觀、方便、好用。本次課題為小程序研究，所以這次只以它們的微信小程序進行分析。京東購物小程序的布局最頂部是搜索框，搜索框下則是首個小分類；分類之下是一個滾動的輪播圖，輪播圖之下是帶有icon圖標的導航，該導航通過左右滑動模塊實現(xiàn)布局，節(jié)省空間；下面則是哥各個賣點的分塊展示以及降價促銷。蘇寧易購小程序的布局與京東相差無幾，只是少了一個輪播圖，其他部分也是相差通過對幾大小程序的分析可以得知，一般購物小程序首頁有這些內容：搜索框放置在整個首頁的最頂部，下面則緊挨著輪播圖。主頁最底部工具欄底部則是各大模塊的tabbar:,進行相關頁面的跳轉，如購物車、個人中心、商品分類、首頁。4.2.3本小程序首頁布局本小程序首頁命名為index。通過上述分析，總結本小程序的首頁布局。本網(wǎng)站為B2C網(wǎng)站，則小程序頂部導航欄名稱設置為“邑購”,導航欄下方則為搜索框，置頂與整個首頁；下方為輪播圖，輪播圖下方則為分為三個樓層的分類導航。最底部tabbar則設計為最左側首頁、左二分類、右二購物車、最右側個人中心。4.3小程序分類頁面布局4.3.1布局介紹小程序的分類頁面則是用戶在進行使用時的第一道分流方法，用戶在此處首先能夠快速進行自己想要瀏覽商品的一個快速查詢、快速搜索以達到前往的目的。分類功能能夠方便用戶，一個良好的分類功能不但能使用戶提高使用效率，更能夠給用戶留下良好的使用印象，這樣用戶就會提高留下來繼續(xù)使用該小程序的意愿；其次良好的分類功能也給后臺管理提供了更加方便的維護，提高維護的效率。4.3.2各大購物小程序分類布局分析蘇寧易購的分類頁面，頂部導航欄中有一個搜索框，下方則分為兩部分，左側為商品信息分類，右側則是商品內容分類，商品內容分類擁有符合內容的img圖片，左側分類以及右側分類皆擁有上下滑動功能。京東購物小程序與蘇寧易購小程序的分類頁面完全一致。4.3.3本小程序分類頁面布局本小程序分類頁面命名為category。通過上述分析，總結本小程序的分類頁面布局，頂部導航欄名稱設置為商品分類，導航欄下方則為搜索框，搜索框下方則為分類，左側為商品信息分類，右側則為帶有圖標的商品內容分類，商品信息分類與商品內容分類都具有下拉功能，通過scroll-view組件實現(xiàn)此功能，此功能可方便頁面布局，使得不會有過多的信息一次同時展示在同一個頁面當中，使得頁面臃腫。4.4小程序購物車頁面布局4.4.1布局介紹購物車是一個電商購物不可缺少的部分，它存放著用戶在使用你程序時心儀的商品，因此這個功能十分重要。購物車存放著用戶所加入購物車的商品，一個良好的購物車頁面首先需要擁有美觀的設計，其次需要能夠清晰的展示用戶所加入購物車的商品，最后也是最重要的功能，能夠對用戶加入到購物車里面的物品數(shù)據(jù)進行一個管理，此外也要清晰的展示商品的價格等詳細信息，最后需要在結算處能夠準確地顯示全部商品的總價格以及總數(shù)量。4.4.2各大購物小程序購物車頁面布局分析蘇寧易購的購物車頁面，最上方則是顯示優(yōu)惠卷的信息以及領取優(yōu)惠卷，下方顯示加入購物車的商品，當購物車為空時顯示“購物車還是空的，快來挑選好貨吧”,此時是沒有結算按鈕的，購物車最下方則是“猜你喜歡”,推薦商品。隨便選擇一件商品加入購物車后，底部顯示出結算按鈕，結算按鈕顯示結算商品總數(shù)量，顯示結算商品總價格，底部工具欄最左側則是全選按鈕，可選擇商品，商品詳細處則是顯示商品的詳細信息、詳細價格、以及商品數(shù)量的一個修改功能，最左側則是一個復選框，該復選框綁定工具欄的全選框。京東的購物車頁面頂部則是收貨地址的顯示，下方商品信息處與蘇寧一致，底部則是“可能你想要”,與蘇寧一致；結算處與蘇寧一致。4.4.3本小程序購物車頁面布局本小程序購物車頁面命名為cart。通過上述分析，總結本小程序的購物車頁面布局，首先頂部需要放置用戶收貨地址，當沒有地址時獲取地址，獲取地址后將地址打印在此處；地址下方則放置加入購物車的商品內容，此處能夠更改商品的數(shù)量，也能夠通過復選框選中或者反選商品，在沒有商品加入購物車時，此處顯示一張內容為“請加入購物車”的img圖片提示用戶將商品加入購物車。底部工具欄最左側設置全選框，與上方復選框綁定，通過判斷check是否為true實現(xiàn)全選功能的選定以及反選，右側總價格綁定商品的價格，通過商品數(shù)量與商品價格以及選中的進行計算，最后打印在此處，右側結算按鈕顯示商品的總數(shù)量并且跳轉到結算頁面。4.5小程序個人中心頁面布局4.5.1布局介紹個人中心頁面是購物小程序的一個不可或缺的內容，首先它能夠加載用戶的個人信息，展示用戶自己，其次也能夠對商品訂單進行一個瀏覽，該處首先要能夠清晰明了的展示功能，其次也需要擁有完備的功能，此處主要進行購物信息的瀏覽以及購物過程中擁有問題的反饋。目前各大電商平臺的個人中心頁面不但包括了上述內容，更擁有許許多多的拓展功能，如：領取優(yōu)惠券、購買保險、貸款等其他拓展業(yè)務，對他們公司的業(yè)務進行一個補充以及發(fā)展。4.5.2各大購物小程序個人中心頁面布局分析蘇寧小程序個人中心頁面頂部顯示用戶的姓名以及頭像，下方顯示商品收藏、店鋪收藏等功能，在下方顯示商品訂單的管理功能，底部則是用戶優(yōu)惠卷等功能，最底部則是一系列其他功能。蘇寧易購個人中心頁面與京東個人中心頁面一致，相差無幾，布局順序略有不同，內容幾乎一致。4.5.3本小程序個人中心頁面布局本小程序個人中心頁面命名為user。分享小程序，咨詢客服，則頂部放置收藏的商品，由上往下依次是查看訂單，咨詢客服，分享小程序給微信好友。商品收藏以及查看訂單設置為超鏈接跳轉到相應頁面，分享以及咨詢客服設置為綁定了微信相關組件的按鈕進行直接操作。4.6小程序商品詳細信息頁面布局4.6.1布局介紹商品詳細信息頁面則是對該商品的完美詮釋，該處布局至關重要，該處布局決定了用戶能夠瀏覽到的信息是否足夠，用戶瀏覽到的信息將決定了用戶是否能夠清楚明了的了解所要購買商品的詳細信息，該處不但需要能夠讓客戶清晰明了的了解到商品的屬性，更要有充足的其他功能對該處進行完善，例如客服，對用戶對該商品的疑問進行解答，加入購物車等功能對商品購買進行完善一個良好的商品詳細信息頁面布局決定了商品能否被用戶充分了解，該處布局至關重要，因此需要考慮許許多多的因素。不但需要美觀的設計，更需要有科學的排版，此處可參考各大電商平臺的商品詳細信息頁面，取其精華去其糟粕。4.6.2各大購物小程序商品詳細信息頁面布局分析蘇寧小程序頂部為商品的大圖片，不具有輪播圖功能，但可左右滑動圖片瀏覽不同的圖片，下方顯示優(yōu)惠時間、優(yōu)惠價格、原價、在下方則顯示商品詳細信息，商品詳細4.8小程序結算頁面布局信息下方容器顯示各類活動，該容器下方則顯示配送地址時間以及擁有的服務，該容器下方則顯示評價以及問答，問答下方顯示商品詳細圖文信息、規(guī)格參數(shù)、包裝售后等，最下方推薦其他商品京東小程序與蘇寧小程序詳細信息頁面布局完全一致。4.6.3本小程序商品詳細信息頁面布局本小程序商品詳細信息頁面命名為goods_detail。由上述分析，總結商品詳細信息頁面布局，頂部放置商品輪播圖，展示商品，設置自動播放，圖片下面放置伸縮盒子，放置商品名稱、價格伸縮盒子右側放置收藏功能，底部放置商品圖文信息，底部工具欄從左到右依次為客服，分享，購物車，加入購物車，立即購買。4.7小程序商品列表頁面布局4.7.1布局介紹商品列表是面對用戶的一個主要展示手段，用戶搜索出來的商品都將通過商品列表對用戶進行一個展示，首先，展示出來的商品圖片需要清晰明了，價格也需要清晰明了，商品的名字信息也需要清晰明了，這三個屬性決定了用戶能否通過這一模塊對商品進行一個準確地尋找。商品列表的布局亦是需要科學的排版以及美觀的設計，舒適的界面設計以及交互能夠增加用戶使用感，不會讓客戶厭煩，讓客戶能夠舒適的使用。4.7.2各大購物小程序商品列表頁面布局分析京東商品分類頁面頂部為搜索框，搜索框下方為一個伸縮盒子，伸縮盒子內擁有三個id,綜合、銷量、價格，通過這三個進行排列，下方則顯示商品的圖文以及價格展示。蘇寧與京東布局此處完全一致。4.7.3本小程序商品列表頁面布局本小程序商品列表頁面命名為goods_list。由上述分析總結，本小程序商品列表頁面布局，此頁面可上下滑動進行數(shù)據(jù)的加載，通過上滑加載下一頁數(shù)據(jù)，通過頂部下拉可進行頁面刷新，每頁最多存放商品信息有限，下拉刷新時彈窗提示下拉加載數(shù)據(jù)，每個商品信息展示為左邊顯示商品圖片，右側顯示商品價格以及信息。4.8.1布局介紹結算頁面是對加入購物車商品的結算，需要能清晰展示加入結算的商品的圖文信息以及價格信息，其次是能實現(xiàn)支付，本模塊是對購物車模塊的一個補充以及延伸。4.8.2各大購物小程序結算頁面布局分析蘇寧頂部為獲取用戶地址，獲取后打印在此處，下方則為商品的名稱以及價格，底部顯示用戶優(yōu)惠卷的信息京東結算頁面與蘇寧基本一致，但多了一個支付方式的選擇。4.8.3本小程序結算頁面布局本小程序結算頁面命名為pay。由上述分析，總結本小程序的結算布局，頂部放置由購物車獲取的用戶地址、姓名以及電話，下面放購物車中勾選結算的商品，底部顯示價格，總體布局與購物車相差無幾，減去了購物車中的選擇更改功能，點擊結算后喚起模擬支付功能(個人用戶無法實現(xiàn)喚起微信支付功能，只有企業(yè)用戶才能喚起微信支付功能，此處僅進行一個模擬支4.9小程序收藏商品列表布局4.9.1布局介紹收藏商品功能作為展示用戶收藏商品的一個模塊，其定位其實與商品列表模塊十分相似，商品列表模塊展示的是用戶搜索出來的商品，而收藏商品列表則是展示用戶收藏本模塊功能與購物車的功能類似，但是沒有結算功能與數(shù)據(jù)更改功能。4.9.2各大購物小程序商品收藏列表布局分析蘇寧具有收藏功能，但未找到收藏列表的入口。京東收藏頁面頂部伸縮盒子擁有分類，左側為商品收藏，右側為店鋪收藏，下方具有分類功能，分類功能下方顯示商品詳細信息以及商品價格，商品圖片，最底部則是推薦其他商品。4.9.3本小程序商品收藏列表頁面布局本小程序商品收藏列表頁面命名為collect。根據(jù)上述分析以及實際使用，本模塊的布局與商品信息列表極其相似，因此布局也差無幾，本頁面擁有上下滑動功能，每個商品信息展示為左邊顯示商品圖片，右側顯示商品價格以及信息，點擊后可跳轉至綁定goods_id的商品詳細信息頁面。4.10本章小結主要介紹了分析目前市場上現(xiàn)有的大型購物小程序的頁面功能并進行本小程序前端頁面設計分析以及小程序頁面模塊相關前端設計以及功能設計詳細內容。第5章測試結果5.1結果測試5.1.1測試環(huán)境程序所有代碼完成編寫，進行測試，測試環(huán)境為手機真機安卓系統(tǒng)以及電腦win10系統(tǒng)，測試軟件為MySQL、VisualStudioCode1.55.2以及微信開發(fā)者工具，通過花生殼進行內網(wǎng)穿透使得本地數(shù)據(jù)能夠在真機調試中訪問。5.1.2測試過程與結果打開數(shù)據(jù)庫，連接數(shù)據(jù)庫與小程序，將index作為起始(主頁)。①點擊真機調試手機掃碼后進入。(該調試方法通過內網(wǎng)穿透達到本地數(shù)據(jù)能夠在真機調試中訪問的效果。)②直接在微信小程序開發(fā)者工具當中進行測試。進入首頁，頁面布局正常，數(shù)據(jù)庫連接正常，數(shù)據(jù)正常顯示，點擊輪播圖可正常跳轉，輪播圖正常自動切換。下方導航欄點擊后正常跳轉，與綁定的cat_id一致。進入商品分類，點擊左側大分類，右側小分類可正常加載，與cat_pid一致，點擊右側圖標進入商品列表，商品列表加載出來的商品與綁定的cat_id一致，商品信息正常進入購物車，頂部未加載地址，點擊后進行授權，同意后地址正常顯示在頂部。此時未選擇商品，直接點擊結算，提示未有商品功能正常顯示。進入個人中心，未獲取用戶信息，此時頂部顯示登錄，點擊后跳轉提示獲取用戶授權，授權后獲取信息，可正常將用戶微信頭像以及微信昵稱打印在頂部當中。點擊收藏的商品，被收藏的商品正常顯示在收藏商品類表當中，點擊收藏的商品，正確跳轉至商品詳細信息，返回個人中心，點擊訂單查詢，正確顯示了訂單，返回個人中心，點擊分享功能，正常彈出分享界面，點擊客服功能，正確彈出客服聊天窗□。進入商品詳細信息頁面，點擊客服可正常跳轉到微信聊天窗口，點擊分享，跳出分享鏈接可正常分享給微信好友，點擊購物車，可正常跳轉到購物車頁面，點擊加入購物車后，提示商品已加入購物車成功，再點擊購物車，可發(fā)現(xiàn)商品已成功加入購物車，返回商品詳細信息頁面，點擊立即購買后，所選商品正常加入購物車中，也正常發(fā)生跳轉。此時購物車中已有商品，為方便進行測試，添加一個不一樣的商品后返回購物車，此時左側復選框全被選中，底部工具欄全選框被選中，商品總價格正常顯示兩商品總價格，結算數(shù)量正常顯示為2。此時點擊一號商品左側+號，商品總價格增加正常顯示，商品數(shù)量正常更改顯示。將二號商品點擊-號，提示是否刪除功能正常，點擊確定刪除商品。此時返回商品詳細信息頁面將商品重新加入購物車，點擊左側復選框，底部工具欄全選被反選，功能正常。點擊結算跳轉至結算頁面，商品的信息顯示正常，點擊結算，因個人用戶無法實現(xiàn)喚起微信支付的功能，此處僅進行結算的模擬。結算后跳轉至商品訂單頁面，商品訂單正常顯示，此時返回值購物車，購物車中的緩存也已被刪除，功能正常。主要介紹了本次研究小程序各模塊功能的相關測試以及結果。6.1展望由于個人經驗的缺乏以及掌握的知識并不牢固，小程序的功能并不是很完善，代碼編寫的也比較繁瑣，在編寫過程中也要不斷的去尋找教程查看詳細代碼段的編寫，也缺乏了創(chuàng)新。小程序美觀度也并不是十分足夠，wxss的編寫也要反復查看靜態(tài)結構屬性才能進行編寫。在功能上，也只是能夠實現(xiàn)一些比較初級的操作，在前端頁面中，對于JavaScript的使用也并不是能夠得心應手，并不是十分的熟練，也并不是十分了解、十分熟悉，為此也不得不放棄了一些想要實現(xiàn)但是在最后小程序中卻沒有能夠實現(xiàn)的功能。目前還有待學習以及提高在前端以及后端中的知識。此外小程序的支付功能也無法正常實現(xiàn)，只有企業(yè)用戶才能