在開發(fā)微信小程序之前,你需要有對整個開發(fā)階段的全局認(rèn)識,清楚在各階段的工作重點。此外,你還需要借助現(xiàn)成的一些優(yōu)質(zhì)工具或代碼等資源,高效快速開發(fā)出小程序,實現(xiàn)你的創(chuàng)意。 —— 由徐佳義分享 ... ...
摘要:最近從1月25日到2月8日的兩周之內(nèi)抽空編寫了“小打卡”微信小程序,該產(chǎn)品主要是針對每日早起、健身、閱讀等習(xí)慣進(jìn)行打卡記錄和分享,幫助用戶養(yǎng)成好習(xí)慣!目前支持私密打卡、打卡推送提醒、分享邀請群友打卡、數(shù)據(jù)統(tǒng)計、打卡記錄、打卡排行、拍照/定位發(fā)布打卡公開/私密日記、點贊好友打卡日記等功能。特別在此記錄分享一下開發(fā)過程中所用到的工具和開發(fā)心得。
一個微信小程序需要經(jīng)過產(chǎn)品功能構(gòu)思、模塊劃分、原型設(shè)計、UI設(shè)計、前端開發(fā)、后端開發(fā)、接口聯(lián)調(diào)、測試上線等開發(fā)階段,最終推向市場,進(jìn)入用戶的視野。在開發(fā)之前,你需要有對整個開發(fā)階段的全局認(rèn)識,清楚在各階段的工作重點。此外,你還需要借助現(xiàn)成的一些優(yōu)質(zhì)工具或代碼等資源,高效快速開發(fā)出小程序,實現(xiàn)你的創(chuàng)意。本文不會手把手教你編寫代碼,主要講述在整個產(chǎn)品開發(fā)階段中,前后端開發(fā)的一些要點。旨在提供一些能讓你事半功倍、快速開發(fā)小程序的相關(guān)資源和開發(fā)心得!
1.根據(jù)所構(gòu)思的產(chǎn)品的相關(guān)功能,采用「百度腦圖」來規(guī)范化產(chǎn)品的功能模塊。
去粗取精,將與產(chǎn)品功能相關(guān)的想法進(jìn)行梳理。
產(chǎn)生一個產(chǎn)品idea后,我一般做法是盡快記錄到備忘錄。隨后圍繞這個產(chǎn)品的功能、市場、特色、使用流程等其它想法,不斷補(bǔ)充到備忘錄上。這樣隨著記錄越多,產(chǎn)品也會變得越復(fù)雜。這時,可以采用腦圖工具,借鑒一般App的設(shè)計,對備忘錄上關(guān)于功能和流程的記錄做重新梳理,確定整個產(chǎn)品的模塊劃分及各個模塊下的小功能,剝離出相同的功能。如下圖,這是早期小打卡的功能模塊劃分。只保留了我認(rèn)為比不可少的功能,產(chǎn)品的第一屏我準(zhǔn)備放置四個平級的主頁面,每個主頁面又包含相應(yīng)的次級頁面和功能。
圖:小打卡的功能模塊劃分
2.根據(jù)完成的“功能模塊設(shè)計”,采用“墨刀”在線設(shè)計完成產(chǎn)品的原型圖。
借助簡單的原型設(shè)計工具,在編碼之前,以較低的成本將創(chuàng)意可視化。
這一步,其實需要你簡單了解一下現(xiàn)在小程序開發(fā)中可用到的UI組件,在小程序官方文檔的組件這部分內(nèi)容中,詳細(xì)介紹了小程序提供的視圖容器、表單、媒體、導(dǎo)航等組件,在開發(fā)之前,你至少要弄明白這些組件長啥樣子,初期保證功能優(yōu)先,在設(shè)計你的小程序時,先別瞎折騰華麗的界面,應(yīng)該盡量參考官方已有的組件來設(shè)計你的產(chǎn)品,這樣可以先跳過UI設(shè)計這個階段,并且在編寫前端代碼的階段,你可以復(fù)用官方提供的組件和代碼,至多只需對官方組件進(jìn)行稍微改動。從而可以事半功倍地進(jìn)行開發(fā)。此外這些所謂的UI組件應(yīng)用很廣泛,在各類App上基本都能見到。在墨刀這個在線原型設(shè)計網(wǎng)站上,你可以拖拽式地設(shè)計你的小程序界面。
圖:墨刀——在線原型設(shè)計網(wǎng)站
3.使用“白鷺Egret Wing”和“微信官方IDE”編寫前端代碼
使用兩個工具搭配,更高效地開發(fā)。
工欲善其事,必先利其器,小程序前端部分的開發(fā),可以采用官方IDE+白鷺Egret Wing搭配,前者可是讓你很方便的預(yù)覽產(chǎn)品、手機(jī)掃碼聯(lián)調(diào)、上傳你的小程序代碼到線上部署。后者則彌補(bǔ)了官方IDE在編輯代碼方面的不足,提供了很便捷的代碼Page模板創(chuàng)建、代碼補(bǔ)全以及實時編輯預(yù)覽功能。
圖:白鷺Egret Wing代碼編輯
4.仔細(xì)查閱“官方接口組件文檔”弄懂小程序提供的相關(guān)組件和API。
對比小程序的能力,仔細(xì)分析你的產(chǎn)品,思考怎么組織小程序的組件和API去實現(xiàn)你的功能和頁面。
熟讀官方提供的接口及組件文檔,這個階段雖說只是編寫界面展示的代碼,但是你得先搞清楚小程序的基本骨架、配置、邏輯、視圖及樣式之間的聯(lián)系。簡單說,小程序包含一個描述整體程序的 App 和多個描述各自頁面的 page。這里的 App 是指放在根目錄的app.js/app.json/app.wxss這三個文件,他們主要負(fù)責(zé)全局性的邏輯、配置及樣式。page則是你即將編寫的多個頁面,對應(yīng)到你的原型設(shè)計中的每一頁,多個page之間可以通過官方提供的導(dǎo)航功能進(jìn)行跳轉(zhuǎn)。每個page頁面由page.js/page.json/page.wxml/page.wxss四個文件組成,其中wxml頁面類似于html文件,主要負(fù)責(zé)頁面的結(jié)構(gòu),不過比起html來,它更加簡化了,你的布局基本上是在使用和標(biāo)簽以及其它官方文檔上說明的其他標(biāo)簽,這里注意查看官方文檔中的組件這部分的內(nèi)容。
5.結(jié)合“weui-wxss”和“官方Demo”的相關(guān)代碼,來編寫產(chǎn)品的前端界面的代碼
這一步主要是對照你的原型設(shè)計,使用微信小程序的WXML語法,借助小程序的樣式組件來把你的產(chǎn)品界面寫出來。
搭建產(chǎn)品界面不得不提weui-wxss這個官方開源的樣式庫,他封裝了很多實用的組件,比如圖片上傳、消息提示、日期選擇、Tab選項卡等組件,你只需要復(fù)制相應(yīng)的WXML和WXSS代碼到你的項目中對應(yīng)的文件里面即可。這也是一開始讓你盡量參考微信已有組件來設(shè)計原型圖的原因。這樣做還有個好處,就是能讓界面風(fēng)格和微信盡量統(tǒng)一,保持一致。另外,官方Deom代碼包含了官方組件和API的在小程序的中具體使用的代碼,值得開發(fā)者借鑒使用。
總結(jié):上面部分主要是小程序前端界面的開發(fā)流程,對于沒有后端開發(fā)基礎(chǔ)和經(jīng)驗的用戶,想寫一個沒有和服務(wù)器進(jìn)行數(shù)據(jù)交互的產(chǎn)品,基本上是可以實踐了。別忘了頁面邏輯寫好,測試修復(fù)好bug再上線。對于有后端開發(fā)經(jīng)驗的朋友可以繼續(xù)往下看,下面會聊聊關(guān)于怎么快速后端開發(fā)的內(nèi)容,當(dāng)然也是盡可能的結(jié)合已有的資源或代碼。
1.根據(jù)“已完成的前端界面和邏輯”,采用“ShowDoc”在線完成API接口文檔。
小程序通過邏輯page.js中設(shè)置數(shù)據(jù)的改變,帶來界面相應(yīng)的變化,需要和服務(wù)器端程序約定好數(shù)據(jù)交互的格式。
完成前端的界面以后,你可能寫了一堆假界面,或者說是靜態(tài)的界面。在微信小程序中,我們改變邏輯層的page.js文件中定義data對象下某個屬性的值,則引起視圖page.wxml文件中的該屬性值自動變?yōu)楦淖兒蟮闹?。簡而言之,如果需要改變界面上的?nèi)容,比如不同的用戶顯示不同的昵稱,我們只需要在page.js這樣定義data對象數(shù)據(jù):
data: {nickName: '某某'}
在page.xml中使用這個數(shù)據(jù):
在通過網(wǎng)絡(luò)請求后可以通過setData()函數(shù)來改變數(shù)據(jù):
this.setData({nickName: '小打卡'})
執(zhí)行這個函數(shù)操作后,你所看到的界面內(nèi)容也隨之改變。
因此,在寫后端代碼之前,我們可以先捋一捋各個頁面或者功能需要發(fā)生變化的數(shù)據(jù),并且該數(shù)據(jù)需要從服務(wù)器獲取,我們通過撰寫接口文檔,讓前后端遵循這個規(guī)定進(jìn)行數(shù)據(jù)交互。下圖是我的小打卡小程序的接口示例:
圖:接口文檔示例
使用小打卡的用戶都知道,在創(chuàng)建打卡的時候,可以在推薦列表中直接選擇某個習(xí)慣,我之后會根據(jù)大家的習(xí)慣使用頻次,來更新這個推薦的習(xí)慣,所以先通過文檔約定這個數(shù)據(jù)的請求方式、請求鏈接、請求時所帶的參數(shù)以及返回的數(shù)據(jù)格式。首先在page的data對象中定義這個屬性habitList,在小程序中向服務(wù)器發(fā)送網(wǎng)絡(luò)請求并獲取返回的數(shù)據(jù)后,通過setData()更新data對象下定義的habitList的值。后,推薦列表的內(nèi)容將自動呈現(xiàn)在界面上。代碼如下:
//page.js
Page({
data:{
habitList: [],
},
onLoad:function(){//頁面初始化時,發(fā)送網(wǎng)絡(luò)請求
this.habitFind();
},
habitFind: function(){
var that = this;
wx.request({
url: 'https://www.x.com/habit/find',
method: 'GET',
data: {
openId: userInfo.openId
},
success: function(res) {//成功獲取返回的數(shù)據(jù)
if(res.data.code == '2000'){
let habitList = res.data.data.habitList;
if(habitList.length){
that.setData({//更新data數(shù)據(jù)中的habitList
habitList: habitList
});
}
}
}
});
}
})
//page.wxml 可以參考官方文檔中的列表渲染部分的內(nèi)容
<view class="weui-cells weui-cells_after-title" wx:for="{{habitList}}" wx:key="unique">
<view class="weui-cell" bindtap="habit_create" data-mode="find" data-habit-data="{{item}}">
<view wx:if="{{item.habitLogo}}" class="weui-cell__hd">
<image src="{{item.habitLogo}}" style="margin-bottom:2px;margin-right: 5px;vertical-align: middle;width:16px; height: 16px;" />
view>
<view class="weui-cell__bd">{{item.habitName}}view>
<view class="weui-cell__ft weui-cell__ft_in-access">view>
view>
view>
圖:渲染后的列表頁面
通過API文檔規(guī)范約定小程序中某一個頁面或操作所需發(fā)送的數(shù)據(jù)以及從服務(wù)端返回的數(shù)據(jù)格式,這對于獨立開發(fā)或團(tuán)隊協(xié)作開發(fā)都大有裨益。這樣的文檔編寫工具可以采用在線的網(wǎng)站,也可以自行編寫Word,目的都是約定好前后端數(shù)據(jù)輸入輸出,當(dāng)然也有比我提到的ShowDoc更強(qiáng)大好用的工具。在開發(fā)過程中,還需根據(jù)你的實際情況,補(bǔ)充完善API接口文檔,因為有些并不是所有數(shù)據(jù)都會在視圖層顯示,還有與你的邏輯相關(guān)的數(shù)據(jù),也需要在接口文檔中去考慮定義好,這個階段的工作直接回影響到你下個階段數(shù)據(jù)表的設(shè)計相關(guān)高總。所以在設(shè)計數(shù)據(jù)表之前,盡量把你的小程序的各種操作的邏輯代碼寫好,整理出你需要服務(wù)器端提供的各項數(shù)據(jù)。
2.根據(jù)“API接口文檔”和“前端小程序代碼”,設(shè)計所需的數(shù)據(jù)表。
數(shù)據(jù)庫設(shè)計請參考相應(yīng)的設(shè)計規(guī)范,一言難盡啊……
3.根據(jù)“API接口文檔”和“數(shù)據(jù)表”,閱讀“wafer自行部署方案”,采用“小程序后端套件wafer”中的會話服務(wù)和CI框架,確定后端的控制器、數(shù)據(jù)模型劃分,編寫后端代碼。
wafer是騰訊云開源小程序后端PHP套件,部署后可以輕松使用會話服務(wù)和信道服務(wù) 授權(quán)登陸、獲取用戶身份信息這些功能雖然官方文檔有提及,但是沒有給出具體的后端實現(xiàn)代碼,所以騰訊云的wafer套件剛好滿足了需求,后端可以直接部署使用,但是部署還是有點兒麻煩,更簡單點你可以購買配套這個服務(wù)的騰訊云服務(wù)器。若自行部署可以參考我的部署心得,部署后,其他具體的接口代碼你需要結(jié)合設(shè)計好的數(shù)據(jù)表進(jìn)行編寫、調(diào)試。
圖:騰訊云提供的小程序解決方案
后端代碼編寫后可以聯(lián)調(diào)數(shù)據(jù),記得完成前端小程序的Http請求、數(shù)據(jù)渲染及其他邏輯。對產(chǎn)品的相關(guān)功能和邏輯的進(jìn)行測試,修復(fù)相關(guān)Bug后再上線產(chǎn)品。
開發(fā)小程序的過程中難免踩坑,多研究小程序官方文檔,多研究小程序官方文檔,多研究小程序官方文檔,多搜索相關(guān)的開發(fā)知識,多閱讀優(yōu)質(zhì)的小程序源代碼,多寫多練熟能生巧??隙ㄟ€有很多優(yōu)質(zhì)的開源代碼、工具等資源沒有提及,歡迎補(bǔ)充!
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)