基于uni-app滿分教育小程序設(shè)計與實現(xiàn)*

浙江經(jīng)貿(mào)職業(yè)技術(shù)學院 毛凌志

駕考滿分教育小程序是針對一個周期內(nèi)扣滿12分的用戶，需要進行滿分教育學習并通過滿分教育考試而研發(fā)的一款小程序，該考試的特點是題量大，易混淆、難度較大，加上考生水平層次多樣，通過率只有50%，為此研發(fā)此小程序，提供錯題回顧，題目解析等功能，幫助學員順利通過考試。產(chǎn)品采用uni-app云端一起化彈性架構(gòu)，有效降低初創(chuàng)企業(yè)成本。

1 業(yè)務背景

駕駛證記滿12分的駕駛員，需要參考5+2的學習，即5天網(wǎng)絡(luò)學習，每天3小時，還有兩天的現(xiàn)場學習，現(xiàn)在學習需要人臉識別，課前、課中、課后都要簽到，不能找人代替。學習后交80元報名費參加考試，考試題型分為單選和判斷，滿分100分，90分及以上為通過，考試有兩次機會，一次不過，可以立馬再考一次，合格后清分，領(lǐng)回駕駛證?？荚嚥缓细竦?，繼續(xù)參加學習和考試。拒不參加學習，也不接受考試的，由公安機關(guān)交通管理部門公告其機動車駕駛證停止使用。駕駛證被扣期間不能開車上路。

2 用戶痛點

各培訓學校的排期較滿，能約上學習基本要2周以后，拋開考試不過的因素基本上順利拿證要持續(xù)一個月甚至更久。在此期間用戶都不能用車，非常不便。培訓學校自身提供了一本紙質(zhì)書和配套的App（交通365），但是書籍內(nèi)容老久閱讀不便沒有什么實際效果，而App題量要又較大，很多是多選題，又不在考試的范圍之內(nèi)，使用起來不便。部分用戶的手機老久，不知如何下載安裝使用，且使用起來卡頓。一般記滿12分的為酒駕、或是長途車等專業(yè)貨車司機，其文化程度不高、年紀偏大，不擅長考試，且考試題庫的題量較大，各省的考試略有不一樣，以浙江省為例，90%的題目出自科目一，10%的題目出自科目四，且相較拿證考試，滿分教育的題目和難度更難，雖然有駕考寶典、駕校一點通、元培駕考等，也有單獨針對滿分教育的模塊，但各省的考題重點仍有不一，考生也不知該使用哪個產(chǎn)品能順利過關(guān)，且從實際的考試通過率來看，一次通過率不高，加上很多考生不重視，沒有復習直接參加考試，通過率近20%。

3 產(chǎn)品設(shè)計

通過對科目一、科目四的題目進行歸類總結(jié)，利用科學的記憶方法，將題目進行關(guān)聯(lián)和關(guān)鍵詞組合記憶技巧，對易混淆及測試的錯題進行收藏便于回顧，同時提供搜索功能，幫助用戶查找特定關(guān)心的題目。UI參考小米以簡潔在大方的風格為主。管理后臺可以開通用戶的VIP會員權(quán)限，直接在手機上完成的所有工作，無PC管理后臺，方便直接。做為會員類產(chǎn)品，且是一次性的使用產(chǎn)品，特別適合小程序，無需下載，即用即走，且綁定微信賬號，用戶不便于分享給其他人，涉及個人隱私數(shù)據(jù)。小程序跨端，也支持PAD大屏，是產(chǎn)品落地的不二之選[1]。

4 技術(shù)架構(gòu)

延用此前研發(fā)的教師資格證崗培訓小程序的架構(gòu)體系[2]，在此基礎(chǔ)上，僅對界面部分略做調(diào)整。整個系統(tǒng)基于uni-app/uniCloud進行展開。uniCloud屏幕了阿里云、騰訊云的差異，構(gòu)筑在兩者之上，避免程序被某一平臺綁架。整體使用nodejs/vue做為語言底層支撐。使用阿里云做為云端服務，因為騰訊云免費的有10個云函數(shù)的限制，且騰訊的云存儲給出的圖片鏈接是臨時URL，使用起來不方便。云端一體化架構(gòu)，同時是一個可擴展的彈性架構(gòu)，用戶不再需要去考慮高可用，或是周戶增長帶來的系統(tǒng)架構(gòu)升級擴展等復雜問題，同時使用了Schemaless的Mongodb后端，使得業(yè)務擴張不需要調(diào)整架構(gòu)。在項目從0-1的過程中，使用uni-app架構(gòu)不用花一毛錢?？胺Q業(yè)界典范。同時云端一體化使得我們省去了，配置Https證書，同時購買域名等基本費用，整個架構(gòu)從傳統(tǒng)的注重性能、高可用、注重前后端分離，注重管理后臺的CRUD等技術(shù)層面的東西，推向到向商業(yè)、業(yè)務場景的交付，不再關(guān)注這些技術(shù)細節(jié)，這些都由云端一體化的架構(gòu)幫我們?nèi)ソ鉀Q，整個思考的層次上提升了好幾個維度和量級。這一點上筆者認為是非常牛的。特別適合個體或是創(chuàng)業(yè)型企業(yè)。小公司的架構(gòu)選擇和大公司是完全不一樣的。uniCloud還創(chuàng)新的吸收了其他快速開發(fā)框架的優(yōu)點，在不斷的進化，其借鑒了Meteor.js框架，通過應用clientDb組件將前后端一體，直接在前端完成數(shù)據(jù)的CRUD。

5 數(shù)據(jù)架構(gòu)

早先將數(shù)據(jù)以JSON的形式，直接存儲在客戶端，只有將用戶權(quán)限的部署和云端有交互，這樣云端只有一張用戶權(quán)限表，簡化了數(shù)據(jù)架構(gòu)，基本就沒有數(shù)據(jù)的表結(jié)構(gòu)，這樣做的好處是架構(gòu)的遷移不需要依賴云端架構(gòu)，減輕了遷移的成本。同時整個架構(gòu)非常的輕，也減輕了用戶訪問的壓力，用戶首次訪問將數(shù)據(jù)緩存到本地，之后除非系統(tǒng)數(shù)據(jù)版本進行更新，否則就不和服務器進行交互。同時最新的數(shù)據(jù)存儲中云函數(shù)中，可以動態(tài)的更新，非常的方便。架構(gòu)較為巧妙。同時也提供Schema配置文件，基于配置文件可以動態(tài)生成CRUD的管理后臺，雖然應用的是類Mongodb的數(shù)據(jù)存儲結(jié)構(gòu)，但仍可以以傳統(tǒng)表結(jié)構(gòu)的方式進行設(shè)計存儲。

6 營銷推廣

通過線下滿分教育學習基地進行地推。

產(chǎn)品的延展:先期以滿分教育為切口，后期逐步切換到駕考領(lǐng)域。

產(chǎn)品的交互體驗:借鑒同類競品的UI體驗，主調(diào)以簡潔清新為主。

前端代碼:基于code.fun，直接生成uni-app的前端代碼，此功能要求開發(fā)者需要有一臺mac電腦，Sketch僅支持mac。

定價策略:基礎(chǔ)功能免費，高階功能收費，且提供不過退的服務。使用戶放心購買使用。

研發(fā)策略:使用MVP策略，構(gòu)建最小可用產(chǎn)品，通過用戶反饋再不停迭代[3]。

7 第三方技術(shù)應用

Iconfont:國內(nèi)功能很強大且圖標內(nèi)容很豐富的矢量圖標庫，提供矢量圖標下載、在線存儲、格式轉(zhuǎn)換等功能。阿里巴巴體驗團隊傾力打造，設(shè)計和前端開發(fā)的便捷工具，使用字體的方式實現(xiàn)圖標的顯示。

Codechina:應用代碼倉庫進行代碼管理，由于Gitlab在國內(nèi)的訪問有時候受限，而開源中國的Gitee，在大文件的支持上需要收費，因此可以使用Gitlab或是CSDN的Codechina做為替代，兩者均免費支持LFS，花精力一定能找到免費的替代品，個體創(chuàng)收就是要靈動。后續(xù)在使用過程中，發(fā)現(xiàn)Gitlab有時網(wǎng)頁端也無法打開，因此后續(xù)就直接切換為由CSDN國內(nèi)產(chǎn)商提供的免費服務。其實從這些案例中可以看出，并不能盲目崇洋媚外，近幾年在架上的技術(shù)演進發(fā)展，在一些領(lǐng)域，已經(jīng)做了一些吸收再改良的軟基礎(chǔ)設(shè)施。

uChart圖表組件:用于可視化展示用戶的行為軌跡、按課程、按天。

知曉云進行CDN文件存儲:由于歷史原因，視頻、圖片、PDF等靜態(tài)資源，放置在知曉云中進行免費存儲和分發(fā)加速。

WUX、vant、iview、weui、uni-ui、colorUI第三方UI組件:各種開源的組件庫，可以做的視覺風格的參考，可以基于開源的略作調(diào)整，純直接使用的話，如果對界面風格要求不高是可以的，但是對整體性有要求，還是要進行調(diào)整和融合。加上要一些組件庫的代碼整體性較強，想要剝離單個使用，還是比較困難的，這個時候就需要自己二次定制，甚至只能放棄別覓其他，因為定制的難度太高。

8 研發(fā)中遇到的問題

uni組件文件的組織形式:早期的uni組件是放在Components文件夾下，后期調(diào)整為放在uni_modules文件夾中，再引入新組件后，可能依賴的組件會存在兩份分別存放在兩個文件中，可能會有沖突的存在，解決的方式就是在沒有問題的情況下，先暫時不動，待有問題再進行遷移。

編譯生成的JS過大，加載顯示不出來:點擊HBuilder中的運行-＞運行到小程序模擬器-＞運行時是否壓縮代碼。

無法打開微信開發(fā)者工具:沒有打開微信的服務端口。

撤消本地的變更，回退到上一個提交版本:git reset--hard last commit id。

樣式布局方式:基于flex布局，改變傳統(tǒng)使用div+css的網(wǎng)頁方式，相較后者而言更加簡單方便。

包含虛擬支付內(nèi)容，上線審核不通過:iOS內(nèi)不支持小程序包含虛擬支付，通過云函數(shù)來作為開關(guān)，進行敏感內(nèi)容的顯隱的開關(guān)。

uChart圖表為0的顯示文字重疊，導致看不清數(shù)字的值:將為0值的顯示隱去，從而將有數(shù)值的條目信息顯示清晰，避免重疊。官方提供了在線生成器，各個選項可以在線生成配置項，較為方便。

無法獲取手機號和使用Webview:這兩個功能只對企業(yè)用戶開戶。

題庫數(shù)據(jù)的獲取:通過雷電安卓模擬器，結(jié)合Fiddler抽取數(shù)據(jù)，并使用Django進行數(shù)據(jù)的存儲。

搜索功能如何實現(xiàn):早先考慮搜索功能使用SQL，但這樣要引入服務器端數(shù)據(jù)庫，和現(xiàn)有架構(gòu)不匹配，需要全面改動，后來考慮直接使用客戶端本地進行遍歷循環(huán)，雖然效率時間上慢了一些，但是效果良好，對于整體而言，還是相當滿意的。

橫屏功能:小程序本身定位于手機，目前也支持大屏的PAD，通過配置，可以使得橫向展示，從而拓展了其應用場景，在全真模擬考試場景中，就應用了橫屏功能，使得有條件的用戶可以使用PAD進行全真刷題，逼近真實內(nèi)容。

會員權(quán)限的分級:早先會員只有兩級會員、非會員，因此使用布爾變量進行存儲，產(chǎn)品進行升級后，會員分為三個等級，保過班會員、高級會員、基礎(chǔ)會員 再加上管理員和非會員，總共分為五級，因此就調(diào)整為使用數(shù)值型變量。

單路由云函數(shù):騰訊云對云函數(shù)免費的版本限制為10個，為此官方及第三方提供了創(chuàng)新的單路由云函數(shù)，即可以只使用一個云函數(shù)就完成所有的功能，其思路就是在一個函數(shù)在根據(jù)傳入的函數(shù)功能路徑來區(qū)分具體執(zhí)行的函數(shù)是哪一個，但筆者認為，這樣操作過于繁瑣，也可以使用clientDb直接在前端完成所有的工作。但clientDb可能會有一定的數(shù)據(jù)風險，且代碼邏輯嵌入在小程序端，需要發(fā)布審核才能上線，相比于直接的云函數(shù)，應該來說并不是特別好用。有條件還是直接上云函數(shù)更加適合。

iOS端“彈性滾動”的問題

雖然微信已經(jīng)幫助抹平了眾多iOS和安卓的差異，但是在一些細節(jié)上還是會存在一些問題，比如 view在是固定的，但是在iOS就會彈性滾動，需要特殊處理設(shè)置"enablePullDownRefresh":false，并設(shè)置"disableScroll":true，并使用scroll-view來設(shè)置內(nèi)容的布局，這樣就既能滾動適應頁面超出一頁的情況，又解決iOS"彈性滾動"的問題。

大屏適配:可以直接使用微信小程序提供的模擬器，其能真實模擬布局的情況，針對部分排版字體在不同平臺上的模擬顯示情況，來調(diào)整字體大小、布局等。對于高度過高的彈窗，則內(nèi)嵌一個滾動條，限制為固定高度，這樣就不會因為分辨率的問題，導致無法點擊其他按鈕操作。