1、 基于IOS的網(wǎng)上商城APP設(shè)計與實現(xiàn) 吳大非+張歡Summary：伴隨著4G網(wǎng)絡(luò)的發(fā)展和普及，使用手機購物越來越受人們的青睞，已經(jīng)成為潮流。該文采用MVC模式，設(shè)計開發(fā)了一個基于IOS的女性服裝網(wǎng)上商城APP，其主要功能包括商品瀏覽、商品收藏、商品購買、提交訂單、訂單支付、商品評價等功能。經(jīng)實踐驗證，該APP使用方便、操作簡單，功能齊全。Key： 網(wǎng)上商城；IOS；APP；MVC：TP393 ：A ：1009-3044（2016）28-0286-03智能手機的普及使得大量用戶習(xí)慣通過手機購物，據(jù)相關(guān)統(tǒng)計，2015年中國網(wǎng)絡(luò)購物市場交易規(guī)模為3.8萬億元，其中通過手機進行網(wǎng)絡(luò)購物用戶規(guī)模達3.

2、4億，同比增長率為43.9%。因此眾多互聯(lián)網(wǎng)公司紛紛投入大量人力、物力來開發(fā)網(wǎng)上商城APP軟件，做得好的有天貓和京東等網(wǎng)上商城APP。網(wǎng)上商城APP能為公司和企業(yè)搭建商品銷售平臺，發(fā)布展示商品信息、進行商品在線銷售、物流管理和售后服務(wù)，極大地節(jié)約了人力成本，實現(xiàn)了物資的優(yōu)化配置。1 基于IOS的APP開發(fā)簡介1.1 Mac OS與IOSMac OS 是由蘋果公司開發(fā)的桌面操作系統(tǒng) ，而且只能安裝在蘋果公司自己生產(chǎn)的電腦上，目前版本已經(jīng)發(fā)展到10.0版。IOS是由蘋果公司開發(fā)的移動操作系統(tǒng)，最初是設(shè)計給iPhone使用的，后來陸續(xù)套用到iPod touch、iPad以及Apple TV等產(chǎn)品上。

3、IOS與Mac OS一樣，屬于類Unix的商業(yè)操作系統(tǒng)。Mac OS只能運行在X86或X86-64構(gòu)架的硬件上，而IOS只能運行在ARM構(gòu)架的設(shè)備上。1.2 XCode開發(fā)工具XCode 是運行在Mac OS上的集成開發(fā)工具（IDE），是開發(fā)IOS 應(yīng)用程序的最快捷的方式。XCode 具有統(tǒng)一的用戶界面設(shè)計，編碼、測試、調(diào)試都在一個簡單的窗口內(nèi)完成。目前支持C，C+、Object-C語言編程、編寫出來的應(yīng)用軟件可直接運行于裝有IOS的手機上，運行效率非常高。1.3 Object-C編程語言O(shè)bject-C語言是根據(jù)C語言所衍生出來的語言，繼承了C語言的特性，是一種面向?qū)ο蟮木幊陶Z言。它需要運行

4、在Mac OS系統(tǒng)下，可以通過XCode等集成開發(fā)工具來進行IOS APP的設(shè)計與開發(fā)。1.4 SQLiteSQLite是一款輕型的數(shù)據(jù)庫管理系統(tǒng)，它占用資源非常的少、但卻比其他數(shù)據(jù)庫效率更高，只是存儲數(shù)據(jù)量有限，因此適合在手機等終端軟件中使用。2 系統(tǒng)分析在任何軟件進行開發(fā)之前，都需要先進行系統(tǒng)分析，主要包括可行性分析和需求分析等方面。2.1 用戶需求分析（1）開發(fā)一個基于IOS的女性服裝電子商城APP，讓客戶通過iPhone手機瀏覽商品、購買商品、進行訂單支付；讓商城的商戶通過APP管理客戶訂單并進行發(fā)貨和售后服務(wù)。（2）客戶業(yè)務(wù)邏輯操作流程： 搜索和查看商品，點擊加入購物車，提交訂單，支

5、付，查看物流情況，評價交易。2.2 APP功能需求分析（1）啟動界面：啟動界面需要做到不僅僅是展示一個漂亮的廣告，最重要的是需要融入相關(guān)的視覺元素，讓用戶知道該APP大致具備什么功能。（2）首頁：作為整個APP的導(dǎo)航頁面，其重要性可想而知。首頁不僅要推薦展示一些用戶普遍喜愛的商品列表，還可包括廣告輪播器Banner，達到推廣的效果。在首頁中，要能讓大部分用戶方便快捷地找到自己滿意的商品。（3）推薦頁：這個頁面需要進行大數(shù)據(jù)分析，針對用戶以前的消費風(fēng)格和購物習(xí)慣，做出有針對性的分類推薦。（4）熱搜商品分類：將所有商品按相關(guān)區(qū)分度進行分類，在這些分類列表中，可以點擊相關(guān)類別進入商品詳情界面中去查看

6、，支持動態(tài)加載數(shù)據(jù)、支持根據(jù)條件進行商品篩選和排序。（5）商品最新動態(tài)：展示那些銷量大而且好評率高的商品，要能動態(tài)進行跟蹤更新，以節(jié)約用戶瀏覽時間，推薦用戶重點關(guān)注的商品。（6）搜索：這個頁面通過點擊Key或者用戶手動輸入Key來精確搜索商品，還要能夠保存用戶最近的Key搜索記錄。（7）詳情頁面：這個頁面主要是用來展示商品的具體信息，包括商品名稱、型號、價格、產(chǎn)品規(guī)格參數(shù)、產(chǎn)地、銷量和商品評價等。（8）登錄注冊：這個頁面的功能主要是實現(xiàn)收集用戶相關(guān)信息，保障用戶的賬戶安全。（9）加入購物車：這個模塊是保存用戶準(zhǔn)備購買的商品及數(shù)量，便于記錄和一次性購買，并且能支持增加、刪除、查詢功能。（10）查

7、看評論：用于顯示購買該商品的客戶對該商品的相關(guān)評價信息。（11）購買：用于提交生成訂單，頁面包含商品信息、配送快遞物流信息、發(fā)票信息、商品購買列表清單及需支付的金額等。（12）支付：準(zhǔn)備采用第三方支付實現(xiàn)，具體是通過支付寶進行，在鏈接到支付寶支付界面后，便自動生成一張訂單發(fā)送給支付寶交易服務(wù)器進行支付，支付完成后跳轉(zhuǎn)回網(wǎng)上商城APP。（13）賬戶信息：在這個頁面中，主要是用于查看用戶賬戶的基本信息，包括累積的積分、購物記錄、最近購物訂單信息等。3 系統(tǒng)設(shè)計3.1 MVC設(shè)計模式MVC全名是Model View Controller，是模型（model）-視圖（view）-控制器（control

8、ler）的縮寫，是一種軟件設(shè)計模式的典范，采用將業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分離的方法來組織代碼，將業(yè)務(wù)邏輯聚集到控制器Controller里面。在后期改進、添加和重構(gòu)個性化定制界面或用戶交互時，無需重新編寫業(yè)務(wù)邏輯。 3.2 數(shù)據(jù)庫設(shè)計系統(tǒng)中用到的數(shù)據(jù)庫命名為WLSC，通過SQLite來創(chuàng)建，設(shè)計的數(shù)據(jù)表主要有商品，用戶、購物車、商家和訂單等數(shù)據(jù)表。3.2.1 商品數(shù)據(jù)表商品（商品ID，商品名稱，型號，分類，商品圖片，原價，現(xiàn)價，銷量，規(guī)格參數(shù)）3.2.2 用戶數(shù)據(jù)表用戶（用戶ID，用戶名，用戶密碼，用戶積分，用戶頭像，用戶郵箱，用戶郵遞地址，手機號碼）3.2.3 訂單數(shù)據(jù)表訂單（訂單ID，用戶

9、ID，商品金額，快遞費用，訂單金額，訂單狀態(tài)）3.3 界面設(shè)計3.3.1 注冊登錄界面第一次使用該APP時，需要先注冊。用戶需輸入用戶名和密碼等信息進行注冊。注冊成功后，以后用戶通過輸入用戶名和密碼進行登錄，驗證通過后才能進入到APP首頁，進行購物、享受用戶權(quán)利，界面如圖1所示。3.3.2 主界面設(shè)計該界面主要包括圖片廣告輪播，熱搜商品分類、最新心愿、明天穿什么、商品展示、每日一See等，界面如圖2所示。3.3.3 商品詳情界面設(shè)計主要用于顯示用戶選擇好的商品詳細(xì)信息，包括商品的名稱、價格、商品圖片集合、尺寸、顏色等信息，界面如圖3所示。3.3.4 我的界面設(shè)計在該界面中，可以查看我的購物車、

10、我的訂單、我的優(yōu)惠券、我的收藏、我的關(guān)注、瀏覽記錄等信息，界面如圖4和圖5所示。4 系統(tǒng)實現(xiàn)由于篇幅所限，只對主界面、商品詳情界面模塊進行闡述。4.1 主界面實現(xiàn)該界面主要包括圖片廣告，熱搜商品、明天穿什么、商品展示等。這些細(xì)致的分類采用CollectionView控件展示，點擊進入后有相應(yīng)的頁面顯示詳細(xì)信息，這個采用TableView控件來展示，相關(guān)數(shù)據(jù)動態(tài)加載顯示，通過編程實現(xiàn)，部分核心代碼如下：- （void）requestData /解析數(shù)據(jù)AFHTTPRequestOperationManager *manager = AFHTTPRequestOperationManager ma

11、nager；manager GET：indexUrl parameters：p：NSString stringWithFormat：%ld，self.page success：（AFHTTPRequestOperation *operation， id responseObject） failure：（AFHTTPRequestOperation *operation， NSError *error） MBProgressHUD hideHUDForView：self.view animated：YES；ZHAlertAction alertWithMsg：網(wǎng)絡(luò)出錯 addToViewCont

12、roller：self ActionSheet：NO； 4.2 商品詳情界面實現(xiàn)這個界面不再用TableView控件顯示數(shù)據(jù)，而是使用UICollectionView控件來顯示數(shù)據(jù)，因為該控件是系統(tǒng)控件，其原生代碼已經(jīng)做了完美的封裝，它給我們提供了很多API調(diào)用接口函數(shù)和回調(diào)方法，能實現(xiàn)一行顯示多個數(shù)據(jù)塊的效果，適合商品詳情的展示，部分核心代碼如下：/ 返回組數(shù)：- （NSInteger）numberOfSectionsInCollectionView：（UICollectionView *）collectionView/ 返回每一組item的個數(shù)：- （NSInteger）collectio

13、nView：（UICollectionView *）collectionView numberOfItemsInSection：（NSInteger）sectionreturn self.dataArr.count；/ 返回每一個item（cell）對象；- （UICollectionViewCell *）collectionView：（UICollectionView *）collectionView cellForItemAtIndexPath：（NSIndexPath *）indexPath/ 每一個item的大?。? （CGSize）collectionView：（UICollecti

14、onView *）collectionView layout：（UICollectionViewLayout *）collectionViewLayout sizeForItemAtIndexPath：（NSIndexPath *）indexPath/ 選擇某一個cell：- （void）collectionView：（UICollectionView *）collectionView didSelectItemAtIndexPath：（NSIndexPath *）indexPath5 系統(tǒng)測試在本網(wǎng)絡(luò)商城APP軟件開發(fā)整個過程中，開發(fā)組成員精心設(shè)計了測試方法和測試用例，對該軟件進行了多次功能

15、測試和性能測試，找出了一些Bug，然后進行了修改完善，最后上傳到AppStore上線。通過在IPhone手機上使用效果體驗，證實該APP運行效率不錯，功能和性能都達到了設(shè)計要求。6 結(jié)束語筆者通過這個APP的設(shè)計與開發(fā)，對基于IOS系統(tǒng)的APP開發(fā)過程有了深入理解，同時也感悟到一個軟件項目的完成與敢于迎難而上和持之以恒的態(tài)度是密不可分的。Reference：1 （日）荻原剛志.Objetive-C編程全解（第3版）M.人民郵電出版社，2012.2 （美）艾倫，（美）歐文斯. SQLite權(quán)威指南（第2版）M.電子工業(yè)出版社，2012.3 朱元波. IOS 8案例開發(fā)大全M.人民郵電出版社，2015.4 （美）巴納德. IPhone用戶界面設(shè)計典型實例M.人民郵電出版社，2