基于小程序“校之助”平臺(tái)的開發(fā)和研究

王 麗，羅平娟，龍和妹，姚敦黔，邱蘇洋

（1.興義民族師范學(xué)院，畢節(jié) 552100；2.興義民族師范學(xué)院，興義 562400；3.興義民族師范學(xué)院，凱里 556000）

0 引言

微信之父張小龍?jiān)_表態(tài):“小程序未來能取代百分之八十的APP”，小程序是一種不需要安裝即可使用的應(yīng)用，用戶掃一掃或搜一下就可以打開應(yīng)用。隨著2017年微信小程序的興起，各種各樣的小程序應(yīng)運(yùn)而生，小程序開發(fā)者大多認(rèn)為小程序簡(jiǎn)單、易開發(fā)、bug少、流暢度高，而且開發(fā)成本比APP低。當(dāng)然，把大學(xué)生的生活與小程序相結(jié)合也是人們關(guān)注的熱點(diǎn)之一?！靶Ｖ本褪菍⒍呦嘟Y(jié)合的產(chǎn)物，它為在校學(xué)生建立了一個(gè)二手交易以及信息發(fā)布平臺(tái)。

1 系統(tǒng)簡(jiǎn)介

在大數(shù)據(jù)時(shí)代的今天，我們深切地感受到手機(jī)內(nèi)存不夠用，各種軟件應(yīng)用鋪天蓋地，內(nèi)存即將暴走。在此情況下，小程序的優(yōu)勢(shì)漸漸凸顯?！靶〕绦颉?，顧名思義，小、占用運(yùn)行內(nèi)存小、使用快捷?！靶Ｖ逼脚_(tái)從二手交易平臺(tái)、電腦知識(shí)科普、兼職信息三個(gè)方面入手，打造一個(gè)令大學(xué)生稱心的小程序。校之助小程序可以幫助同學(xué)們提高找兼職、了解電腦、掌握生活技巧和處理二手物品的效率，并且提供的平臺(tái)簡(jiǎn)潔、使用方便，不需要下載浪費(fèi)時(shí)間，也不需要占用手機(jī)運(yùn)行內(nèi)存。

要開發(fā)這樣一個(gè)小程序需要一個(gè)過程，其簡(jiǎn)單開發(fā)流程如下：

（1）通過分發(fā)問卷，公開提問調(diào)查，對(duì)需要開發(fā)的功能進(jìn)行商討，例如有多少同學(xué)是需要出售或者購(gòu)買二手物品，有多少同學(xué)需要校內(nèi)兼職，以及校內(nèi)兼職的種類等，以及各個(gè)專業(yè)的同學(xué)對(duì)電腦小知識(shí)的需求度等相關(guān)問題；對(duì)調(diào)查結(jié)果進(jìn)行分析，總結(jié)。

（2）深入學(xué)習(xí)微信小程序的相關(guān)知識(shí)，構(gòu)建微信小程序“校之助”的基本框架和建立云數(shù)據(jù)庫(kù)；分析、解決如何建立云數(shù)據(jù)庫(kù)，如何上傳圖片到云存儲(chǔ)中，選取組件庫(kù)等相關(guān)問題。

（3）功能開發(fā)的實(shí)現(xiàn)，解決一系列開發(fā)技術(shù)問題。如何實(shí)現(xiàn)前后端交互，如何提取數(shù)據(jù)庫(kù)中的數(shù)據(jù)到前端頁(yè)面，如何將商品圖片存儲(chǔ)在云存儲(chǔ)中，以方便需要時(shí)便捷提取，以及如何排版使得頁(yè)面美觀等。

（4）內(nèi)部測(cè)試，測(cè)試功能是否可用，是否完善。本平臺(tái)在前期開發(fā)階段測(cè)試人員只涉及本小組成員，隨著程序不斷完善，開始加入更多測(cè)試人員，幫助小程序逐漸完善。

2 “校之助”相關(guān)技術(shù)及功能分析

2.1 “校之助”相關(guān)技術(shù)

“校之助”小程序使用微信小程序所自帶的云數(shù)據(jù)庫(kù)，云開發(fā)提供了一個(gè)JSON數(shù)據(jù)庫(kù)，每一條記錄是一個(gè)JSON格式的對(duì)象，用到增、刪、改、查功能。在app.js中定義相關(guān)函數(shù)，在需要頁(yè)面進(jìn)行引用。

上傳相關(guān)圖片時(shí)需要云存儲(chǔ)，云存儲(chǔ)依賴于云開發(fā)，微信為開發(fā)者提供了一塊存儲(chǔ)空間，可以將圖片、文件上傳到云端，主要是用兩個(gè)API來對(duì)云儲(chǔ)存進(jìn)行相關(guān)操作wx.cloud.uploadFile。獲取的用戶信息存儲(chǔ)在緩存中，主要用wx.setStorage進(jìn)行存儲(chǔ)再緩存，使用wx.getStorage取出相應(yīng)的數(shù)據(jù)。

為了小程序的美觀，引用ColorUI組件庫(kù)。ColorUI組件庫(kù)擁有鮮亮的高飽和色彩，專注于視覺的小程序組件庫(kù)，引入后，可以直接采用原本的樣式，也可以適當(dāng)?shù)匦薷?。本小程序的底部?dǎo)航欄，豎直導(dǎo)航欄，輪播圖等就是采用ColorUI的樣式。

開發(fā)此小程序存在如何分離前后端、一個(gè)用戶怎樣實(shí)現(xiàn)既可以發(fā)表物品出售又可以發(fā)表兼職信息以及怎樣判斷發(fā)布內(nèi)容是否審核通過等問題?！靶Ｖ焙笈_(tái)從“我的”頁(yè)面進(jìn)入，建立一個(gè)管理員Openid數(shù)組，獲取當(dāng)前用戶的用戶Openid并判斷是否在該數(shù)組中，如果在數(shù)組中，“我的”頁(yè)面會(huì)出現(xiàn)后臺(tái)管理按鈕，進(jìn)入后臺(tái)執(zhí)行相關(guān)操作，如果不在數(shù)組中，就不會(huì)展示，關(guān)鍵代碼如下：

that.setData（{

openid:openid,

isAdmin:that.data.adiminArr.indexOf（openid）

}）

發(fā)布是一個(gè)頁(yè)面，發(fā)布類型有三個(gè)，要做到發(fā)布分離，“校之助”采用了選項(xiàng)卡，給不同選項(xiàng)卡里的內(nèi)容添加不同事件，將用戶填的內(nèi)容存儲(chǔ)到相應(yīng)的數(shù)據(jù)表中，選項(xiàng)卡部分代碼如下：

＜view class=′tapCard′＞

＜view class= "addCard1{{cardNum===1?′tapOn′:′tapOff′}}"bindtap=′tapTo1′＞申請(qǐng)出售＜/view＞

＜view class= "addCard2{{cardNum===2?′tapOn′:′tapOff′}}"bindtap=′tapTo2′＞兼職信息＜/view＞

＜view class= "addCard3{{cardNum===3?′tapOn′:′tapOff′}}"bindtap=′tapTo3′＞生活技巧＜/view＞

＜/view＞

審核是一個(gè)重要的環(huán)節(jié)，用戶申請(qǐng)內(nèi)容一開始應(yīng)是未審核狀態(tài)，除了自己和后臺(tái)人員，其他用戶是看不到的，后臺(tái)人員審核通過后才可以展現(xiàn)在相應(yīng)頁(yè)面，所以將采用一個(gè)字段去控制審核狀態(tài)，后臺(tái)人員通過修改該字段的值來達(dá)到審核，“我的”頁(yè)面中的發(fā)表狀態(tài)也對(duì)應(yīng)該字段的值，部分代碼如下：

app.getInfoWhere（′thing′,{check:1},

e=＞{

getCurrentPages（）［"0"］.setData（{

shopInfo:e.data,

isShow:true

}）

wx.hideLoading（）

}

）

2.2 “校之助”相關(guān)功能

“校之助”小程序分為兩大部分，前端和后臺(tái)。前端包括“首頁(yè)”、“兼職”、“小知識(shí)科普”、“我的”以及“發(fā)布”模塊；后臺(tái)包括“訂單管理”以及“審核管理”模塊。審核模塊又分為三種，分別為“二手物品審核”、“兼職信息審核”和“小知識(shí)審核”。具體模塊功能如下：

（1）“首頁(yè)”模塊：是二手物品的一個(gè)頁(yè)面，主要內(nèi)容包括一個(gè)搜索框，可以搜索出關(guān)于關(guān)鍵字的物品；商品列表即展示所出售的物品，當(dāng)選中其中一個(gè)物品時(shí)會(huì)跳轉(zhuǎn)到商品詳情頁(yè)，方便進(jìn)行購(gòu)買。

（2）“兼職”頁(yè)模塊：本頁(yè)面有一個(gè)搜索框可以查詢出相對(duì)應(yīng)類型的兼職，兼職列表可以任意點(diǎn)擊一個(gè)進(jìn)入兼職詳情頁(yè)查看兼職的主要內(nèi)容和兼職環(huán)境以及招聘人的相關(guān)聯(lián)系方式等。

（3）“小知識(shí)科普”模塊：可以輸入自己所遇到相關(guān)問題的關(guān)鍵字查詢相應(yīng)的知識(shí)。例如，搜索“電腦”，便有相應(yīng)的電腦知識(shí)點(diǎn)排列在頁(yè)面，也可以查看失物招領(lǐng)、生活技巧這些信息。

（4）“我的”模塊：有地址信息欄需要完善，填寫好自己姓名、聯(lián)系電話等信息，還可以看到自己購(gòu)買物品的訂單。

（5）“發(fā)布”模塊：發(fā)布分為三類，分別為二手物品出售的申請(qǐng)，兼職信息的申請(qǐng)以及小知識(shí)的申請(qǐng)，用戶填好相關(guān)信息后，需等待管理員審核，在我的頁(yè)面中的我的發(fā)布欄下可以看到審核狀態(tài)，用戶第一次進(jìn)入發(fā)布頁(yè)面需要授權(quán)登錄，將用戶信息存到緩存中。發(fā)布管理是指可以查看到自己發(fā)布的信息當(dāng)前狀態(tài)，還可以刪除信息。

（6）“訂單管理”模塊：對(duì)所有訂單進(jìn)行管理、刪除、修改、查找。

（7）“二手物品管理”模塊：查看申請(qǐng)發(fā)布的二手物品并審核，刪除相應(yīng)物品信息，還可以查詢某個(gè)物品，并進(jìn)行刪除或者審核。

（8）“兼職信息管理”模塊：查看申請(qǐng)發(fā)布的兼職信息并審核，刪除相應(yīng)兼職信息，還可以查詢某個(gè)兼職，并進(jìn)行刪除或者審核。

（9）“小知識(shí)科普管理”模塊：查看申請(qǐng)發(fā)布的科普知識(shí)并審核，刪除相應(yīng)科普內(nèi)容，還可以查詢某個(gè)內(nèi)容，并進(jìn)行刪除或者審核。

2.3 “校之助”頁(yè)面效果圖

首頁(yè)頁(yè)面屬于上中下結(jié)構(gòu)，上面是搜索框和輪番圖，中間部分是豎直導(dǎo)航欄和對(duì)應(yīng)的商品列表，下面就是底部導(dǎo)航欄；發(fā)布頁(yè)面主要分為申請(qǐng)出售二手物品、發(fā)布兼職的申請(qǐng)、發(fā)布小知識(shí)的申請(qǐng)；我的頁(yè)面如果該用戶屬于管理員會(huì)有一個(gè)后臺(tái)管理按鈕，從此處進(jìn)入后臺(tái)，后臺(tái)分別為審核管理和訂單管理，“校之助”首頁(yè)效果如圖1所示，“校之助”后臺(tái)頁(yè)面展示效果如圖2所示。

圖1 首頁(yè)效果圖

圖2 后臺(tái)管理頁(yè)面效果圖

3 “校之助”發(fā)展?jié)摿σ约疤攸c(diǎn)

大四學(xué)生會(huì)產(chǎn)生二手物品的同時(shí)也會(huì)需要二手物品，實(shí)習(xí)時(shí)大多數(shù)同學(xué)會(huì)選擇租房，但是實(shí)習(xí)時(shí)間僅四個(gè)多月，過多添置物品較為浪費(fèi)，“校之助”在實(shí)現(xiàn)校內(nèi)二手交易的基礎(chǔ)上，可以考慮擴(kuò)展到校外，建立大四實(shí)習(xí)生和租房周圍的二手交易平臺(tái)，當(dāng)大四學(xué)生實(shí)習(xí)結(jié)束后又可以將物品再次出售。發(fā)布的兼職信息也可以擴(kuò)展到校外周圍的兼職，這對(duì)于課特別少的同學(xué)，可以提前到校外鍛煉。還有一些畢業(yè)但還沒正式工作的人，也可能會(huì)做一些臨時(shí)的工作，租房子需要購(gòu)買二手物品，找到正式工作的時(shí)候就會(huì)需要出售二手物品，所以“校之助”對(duì)于校外需要出售和購(gòu)買二手物品以及找兼職的人也同樣適用。

采用“校之助”能給大學(xué)生帶來良好的體驗(yàn)，本程序用JSON格式作為數(shù)據(jù)傳輸，凸顯程序的高效性、穩(wěn)定性以及安全性。一個(gè)好的程序除了功能完善，頁(yè)面肯定也需要美觀，“校之助”采用ColorUI的相關(guān)CSS組件樣式，使用亮麗的色彩吸引人的眼球，亮麗的顏色也符合大學(xué)生活潑好動(dòng)的形象。采用微信小程序自帶的云數(shù)據(jù)庫(kù)能帶來很大的便利，云數(shù)據(jù)庫(kù)存取比較方便，也容易開通、好學(xué)。將二手交易、兼職信息、小知識(shí)科普相結(jié)合是該小程序的亮點(diǎn)，也是難點(diǎn)，如何將它們通過用戶銜接起來是需要進(jìn)一步解決的問題。在保障每個(gè)用戶享有發(fā)表兼職、科普知識(shí)的權(quán)利的同時(shí)，后臺(tái)管理員認(rèn)真審核每條申請(qǐng)，以確保用戶使用小程序過程中的美好體驗(yàn)。