小程序模板網(wǎng)

實(shí)戰(zhàn):“小打卡” 小程序從創(chuàng)意到上線完整開(kāi)發(fā)過(guò)程解析

發(fā)布時(shí)間:2017-12-16 14:59 所屬欄目:小程序開(kāi)發(fā)教程

在開(kāi)發(fā)微信小程序之前,你需要有對(duì)整個(gè)開(kāi)發(fā)階段的全局認(rèn)識(shí),清楚在各階段的工作重點(diǎn)。此外,你還需要借助現(xiàn)成的一些優(yōu)質(zhì)工具或代碼等資源,高效快速開(kāi)發(fā)出小程序,實(shí)現(xiàn)你的創(chuàng)意。 —— 由徐佳義分享 ... ...

 
 
 

摘要:最近從1月25日到2月8日的兩周之內(nèi)抽空編寫(xiě)了“小打卡”微信小程序,該產(chǎn)品主要是針對(duì)每日早起、健身、閱讀等習(xí)慣進(jìn)行打卡記錄和分享,幫助用戶養(yǎng)成好習(xí)慣!目前支持私密打卡、打卡推送提醒、分享邀請(qǐng)群友打卡、數(shù)據(jù)統(tǒng)計(jì)、打卡記錄、打卡排行、拍照/定位發(fā)布打卡公開(kāi)/私密日記、點(diǎn)贊好友打卡日記等功能。特別在此記錄分享一下開(kāi)發(fā)過(guò)程中所用到的工具和開(kāi)發(fā)心得。

一個(gè)微信小程序需要經(jīng)過(guò)產(chǎn)品功能構(gòu)思、模塊劃分、原型設(shè)計(jì)、UI設(shè)計(jì)、前端開(kāi)發(fā)、后端開(kāi)發(fā)、接口聯(lián)調(diào)、測(cè)試上線等開(kāi)發(fā)階段,最終推向市場(chǎng),進(jìn)入用戶的視野。在開(kāi)發(fā)之前,你需要有對(duì)整個(gè)開(kāi)發(fā)階段的全局認(rèn)識(shí),清楚在各階段的工作重點(diǎn)。此外,你還需要借助現(xiàn)成的一些優(yōu)質(zhì)工具或代碼等資源,高效快速開(kāi)發(fā)出小程序,實(shí)現(xiàn)你的創(chuàng)意。本文不會(huì)手把手教你編寫(xiě)代碼,主要講述在整個(gè)產(chǎn)品開(kāi)發(fā)階段中,前后端開(kāi)發(fā)的一些要點(diǎn)。旨在提供一些能讓你事半功倍、快速開(kāi)發(fā)小程序的相關(guān)資源和開(kāi)發(fā)心得!

準(zhǔn)備工作

  1. 在線思維導(dǎo)圖工具:百度腦圖
  2. 在線原型設(shè)計(jì)工具:墨刀
  3. 在線API文檔編寫(xiě)工具:ShowDoc
  4. 官方接口組件文檔
  5. 可視化編輯器白鷺Egret Wing
  6. 微信官方IDE
  7. 小程序界面樣式庫(kù)weui-wxss
  8. 官方Demo代碼
  9. 接口聯(lián)調(diào)插件Postman
  10. 騰訊云小程序后端開(kāi)發(fā)套件wafer
  11. 騰訊云wafer自行部署方案
  12. 小打卡微信小程序

前端開(kāi)發(fā)

1.根據(jù)所構(gòu)思的產(chǎn)品的相關(guān)功能,采用「百度腦圖」來(lái)規(guī)范化產(chǎn)品的功能模塊。

去粗取精,將與產(chǎn)品功能相關(guān)的想法進(jìn)行梳理。

產(chǎn)生一個(gè)產(chǎn)品idea后,我一般做法是盡快記錄到備忘錄。隨后圍繞這個(gè)產(chǎn)品的功能、市場(chǎng)、特色、使用流程等其它想法,不斷補(bǔ)充到備忘錄上。這樣隨著記錄越多,產(chǎn)品也會(huì)變得越復(fù)雜。這時(shí),可以采用腦圖工具,借鑒一般App的設(shè)計(jì),對(duì)備忘錄上關(guān)于功能和流程的記錄做重新梳理,確定整個(gè)產(chǎn)品的模塊劃分及各個(gè)模塊下的小功能,剝離出相同的功能。如下圖,這是早期小打卡的功能模塊劃分。只保留了我認(rèn)為比不可少的功能,產(chǎn)品的第一屏我準(zhǔn)備放置四個(gè)平級(jí)的主頁(yè)面,每個(gè)主頁(yè)面又包含相應(yīng)的次級(jí)頁(yè)面和功能。

圖:小打卡的功能模塊劃分

2.根據(jù)完成的“功能模塊設(shè)計(jì)”,采用“墨刀”在線設(shè)計(jì)完成產(chǎn)品的原型圖。

借助簡(jiǎn)單的原型設(shè)計(jì)工具,在編碼之前,以較低的成本將創(chuàng)意可視化。

這一步,其實(shí)需要你簡(jiǎn)單了解一下現(xiàn)在小程序開(kāi)發(fā)中可用到的UI組件,在小程序官方文檔的組件這部分內(nèi)容中,詳細(xì)介紹了小程序提供的視圖容器、表單、媒體、導(dǎo)航等組件,在開(kāi)發(fā)之前,你至少要弄明白這些組件長(zhǎng)啥樣子,初期保證功能優(yōu)先,在設(shè)計(jì)你的小程序時(shí),先別瞎折騰華麗的界面,應(yīng)該盡量參考官方已有的組件來(lái)設(shè)計(jì)你的產(chǎn)品,這樣可以先跳過(guò)UI設(shè)計(jì)這個(gè)階段,并且在編寫(xiě)前端代碼的階段,你可以復(fù)用官方提供的組件和代碼,至多只需對(duì)官方組件進(jìn)行稍微改動(dòng)。從而可以事半功倍地進(jìn)行開(kāi)發(fā)。此外這些所謂的UI組件應(yīng)用很廣泛,在各類App上基本都能見(jiàn)到。在墨刀這個(gè)在線原型設(shè)計(jì)網(wǎng)站上,你可以拖拽式地設(shè)計(jì)你的小程序界面。

圖:墨刀——在線原型設(shè)計(jì)網(wǎng)站

3.使用“白鷺Egret Wing”和“微信官方IDE”編寫(xiě)前端代碼

使用兩個(gè)工具搭配,更高效地開(kāi)發(fā)。

工欲善其事,必先利其器,小程序前端部分的開(kāi)發(fā),可以采用官方IDE+白鷺Egret Wing搭配,前者可是讓你很方便的預(yù)覽產(chǎn)品、手機(jī)掃碼聯(lián)調(diào)、上傳你的小程序代碼到線上部署。后者則彌補(bǔ)了官方IDE在編輯代碼方面的不足,提供了很便捷的代碼Page模板創(chuàng)建、代碼補(bǔ)全以及實(shí)時(shí)編輯預(yù)覽功能。

圖:白鷺Egret Wing代碼編輯

4.仔細(xì)查閱“官方接口組件文檔”弄懂小程序提供的相關(guān)組件和API。

對(duì)比小程序的能力,仔細(xì)分析你的產(chǎn)品,思考怎么組織小程序的組件和API去實(shí)現(xiàn)你的功能和頁(yè)面。

熟讀官方提供的接口及組件文檔,這個(gè)階段雖說(shuō)只是編寫(xiě)界面展示的代碼,但是你得先搞清楚小程序的基本骨架、配置、邏輯、視圖及樣式之間的聯(lián)系。簡(jiǎn)單說(shuō),小程序包含一個(gè)描述整體程序的 App 和多個(gè)描述各自頁(yè)面的 page。這里的 App 是指放在根目錄的app.js/app.json/app.wxss這三個(gè)文件,他們主要負(fù)責(zé)全局性的邏輯、配置及樣式。page則是你即將編寫(xiě)的多個(gè)頁(yè)面,對(duì)應(yīng)到你的原型設(shè)計(jì)中的每一頁(yè),多個(gè)page之間可以通過(guò)官方提供的導(dǎo)航功能進(jìn)行跳轉(zhuǎn)。每個(gè)page頁(yè)面由page.js/page.json/page.wxml/page.wxss四個(gè)文件組成,其中wxml頁(yè)面類似于html文件,主要負(fù)責(zé)頁(yè)面的結(jié)構(gòu),不過(guò)比起html來(lái),它更加簡(jiǎn)化了,你的布局基本上是在使用和標(biāo)簽以及其它官方文檔上說(shuō)明的其他標(biāo)簽,這里注意查看官方文檔中的組件這部分的內(nèi)容。

5.結(jié)合“weui-wxss”和“官方Demo”的相關(guān)代碼,來(lái)編寫(xiě)產(chǎn)品的前端界面的代碼

這一步主要是對(duì)照你的原型設(shè)計(jì),使用微信小程序的WXML語(yǔ)法,借助小程序的樣式組件來(lái)把你的產(chǎn)品界面寫(xiě)出來(lái)。

搭建產(chǎn)品界面不得不提weui-wxss這個(gè)官方開(kāi)源的樣式庫(kù),他封裝了很多實(shí)用的組件,比如圖片上傳、消息提示、日期選擇、Tab選項(xiàng)卡等組件,你只需要復(fù)制相應(yīng)的WXML和WXSS代碼到你的項(xiàng)目中對(duì)應(yīng)的文件里面即可。這也是一開(kāi)始讓你盡量參考微信已有組件來(lái)設(shè)計(jì)原型圖的原因。這樣做還有個(gè)好處,就是能讓界面風(fēng)格和微信盡量統(tǒng)一,保持一致。另外,官方Deom代碼包含了官方組件和API的在小程序的中具體使用的代碼,值得開(kāi)發(fā)者借鑒使用。

總結(jié):上面部分主要是小程序前端界面的開(kāi)發(fā)流程,對(duì)于沒(méi)有后端開(kāi)發(fā)基礎(chǔ)和經(jīng)驗(yàn)的用戶,想寫(xiě)一個(gè)沒(méi)有和服務(wù)器進(jìn)行數(shù)據(jù)交互的產(chǎn)品,基本上是可以實(shí)踐了。別忘了頁(yè)面邏輯寫(xiě)好,測(cè)試修復(fù)好bug再上線。對(duì)于有后端開(kāi)發(fā)經(jīng)驗(yàn)的朋友可以繼續(xù)往下看,下面會(huì)聊聊關(guān)于怎么快速后端開(kāi)發(fā)的內(nèi)容,當(dāng)然也是盡可能的結(jié)合已有的資源或代碼。

2.后端開(kāi)發(fā)

1.根據(jù)“已完成的前端界面和邏輯”,采用“ShowDoc”在線完成API接口文檔。

小程序通過(guò)邏輯page.js中設(shè)置數(shù)據(jù)的改變,帶來(lái)界面相應(yīng)的變化,需要和服務(wù)器端程序約定好數(shù)據(jù)交互的格式。

完成前端的界面以后,你可能寫(xiě)了一堆假界面,或者說(shuō)是靜態(tài)的界面。在微信小程序中,我們改變邏輯層的page.js文件中定義data對(duì)象下某個(gè)屬性的值,則引起視圖page.wxml文件中的該屬性值自動(dòng)變?yōu)楦淖兒蟮闹?。?jiǎn)而言之,如果需要改變界面上的內(nèi)容,比如不同的用戶顯示不同的昵稱,我們只需要在page.js這樣定義data對(duì)象數(shù)據(jù):

data: {nickName: '某某'}

在page.xml中使用這個(gè)數(shù)據(jù):

{{nickName}}

在通過(guò)網(wǎng)絡(luò)請(qǐng)求后可以通過(guò)setData()函數(shù)來(lái)改變數(shù)據(jù):

this.setData({nickName: '小打卡'})

執(zhí)行這個(gè)函數(shù)操作后,你所看到的界面內(nèi)容也隨之改變。

因此,在寫(xiě)后端代碼之前,我們可以先捋一捋各個(gè)頁(yè)面或者功能需要發(fā)生變化的數(shù)據(jù),并且該數(shù)據(jù)需要從服務(wù)器獲取,我們通過(guò)撰寫(xiě)接口文檔,讓前后端遵循這個(gè)規(guī)定進(jìn)行數(shù)據(jù)交互。下圖是我的小打卡小程序的接口示例:

圖:接口文檔示例

使用小打卡的用戶都知道,在創(chuàng)建打卡的時(shí)候,可以在推薦列表中直接選擇某個(gè)習(xí)慣,我之后會(huì)根據(jù)大家的習(xí)慣使用頻次,來(lái)更新這個(gè)推薦的習(xí)慣,所以先通過(guò)文檔約定這個(gè)數(shù)據(jù)的請(qǐng)求方式、請(qǐng)求鏈接、請(qǐng)求時(shí)所帶的參數(shù)以及返回的數(shù)據(jù)格式。首先在page的data對(duì)象中定義這個(gè)屬性habitList,在小程序中向服務(wù)器發(fā)送網(wǎng)絡(luò)請(qǐng)求并獲取返回的數(shù)據(jù)后,通過(guò)setData()更新data對(duì)象下定義的habitList的值。后,推薦列表的內(nèi)容將自動(dòng)呈現(xiàn)在界面上。代碼如下:

//page.js
Page({
  data:{
    habitList: [],
  },
  onLoad:function(){//頁(yè)面初始化時(shí),發(fā)送網(wǎng)絡(luò)請(qǐng)求
    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>

圖:渲染后的列表頁(yè)面

通過(guò)API文檔規(guī)范約定小程序中某一個(gè)頁(yè)面或操作所需發(fā)送的數(shù)據(jù)以及從服務(wù)端返回的數(shù)據(jù)格式,這對(duì)于獨(dú)立開(kāi)發(fā)或團(tuán)隊(duì)協(xié)作開(kāi)發(fā)都大有裨益。這樣的文檔編寫(xiě)工具可以采用在線的網(wǎng)站,也可以自行編寫(xiě)Word,目的都是約定好前后端數(shù)據(jù)輸入輸出,當(dāng)然也有比我提到的ShowDoc更強(qiáng)大好用的工具。在開(kāi)發(fā)過(guò)程中,還需根據(jù)你的實(shí)際情況,補(bǔ)充完善API接口文檔,因?yàn)橛行┎⒉皇撬袛?shù)據(jù)都會(huì)在視圖層顯示,還有與你的邏輯相關(guān)的數(shù)據(jù),也需要在接口文檔中去考慮定義好,這個(gè)階段的工作直接回影響到你下個(gè)階段數(shù)據(jù)表的設(shè)計(jì)相關(guān)高總。所以在設(shè)計(jì)數(shù)據(jù)表之前,盡量把你的小程序的各種操作的邏輯代碼寫(xiě)好,整理出你需要服務(wù)器端提供的各項(xiàng)數(shù)據(jù)。

2.根據(jù)“API接口文檔”和“前端小程序代碼”,設(shè)計(jì)所需的數(shù)據(jù)表。

數(shù)據(jù)庫(kù)設(shè)計(jì)請(qǐng)參考相應(yīng)的設(shè)計(jì)規(guī)范,一言難盡啊……

3.根據(jù)“API接口文檔”和“數(shù)據(jù)表”,閱讀“wafer自行部署方案”,采用“小程序后端套件wafer”中的會(huì)話服務(wù)和CI框架,確定后端的控制器、數(shù)據(jù)模型劃分,編寫(xiě)后端代碼。

wafer是騰訊云開(kāi)源小程序后端PHP套件,部署后可以輕松使用會(huì)話服務(wù)和信道服務(wù) 授權(quán)登陸、獲取用戶身份信息這些功能雖然官方文檔有提及,但是沒(méi)有給出具體的后端實(shí)現(xiàn)代碼,所以騰訊云的wafer套件剛好滿足了需求,后端可以直接部署使用,但是部署還是有點(diǎn)兒麻煩,更簡(jiǎn)單點(diǎn)你可以購(gòu)買配套這個(gè)服務(wù)的騰訊云服務(wù)器。若自行部署可以參考我的部署心得,部署后,其他具體的接口代碼你需要結(jié)合設(shè)計(jì)好的數(shù)據(jù)表進(jìn)行編寫(xiě)、調(diào)試。

圖:騰訊云提供的小程序解決方案

后端代碼編寫(xiě)后可以聯(lián)調(diào)數(shù)據(jù),記得完成前端小程序的Http請(qǐng)求、數(shù)據(jù)渲染及其他邏輯。對(duì)產(chǎn)品的相關(guān)功能和邏輯的進(jìn)行測(cè)試,修復(fù)相關(guān)Bug后再上線產(chǎn)品。

開(kāi)發(fā)小程序的過(guò)程中難免踩坑,多研究小程序官方文檔,多研究小程序官方文檔,多研究小程序官方文檔,多搜索相關(guān)的開(kāi)發(fā)知識(shí),多閱讀優(yōu)質(zhì)的小程序源代碼,多寫(xiě)多練熟能生巧??隙ㄟ€有很多優(yōu)質(zhì)的開(kāi)源代碼、工具等資源沒(méi)有提及,歡迎補(bǔ)充!



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://u-renovate.com/wxmini/doc/course/18182.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢