01、初衷

大概上上周我花(hua)了(le)(le)周末(mo)兩天(tian)的時(shi)間編寫(xie)了(le)(le)一款小程序(xu)并順利提交審(shen)核。

也(ye)就在(zai)前兩(liang)天我的小程序 「Github開源社區」 歷經了兩(liang)周的審核，終于。。。。。。成功發布了，并且綁定(ding)到(dao)了公眾(zhong)號。

以下是這兩天時(shi)間的數據分析報表。

（實時(shi)訪問次數 pv）

粗略(lve)的分(fen)析(xi)下：實時訪(fang)問次數(shu)波動很明(ming)顯，當(dang)然這(zhe)也是正(zheng)常的。高流量基本(ben)保持在早上(shang)十點到(dao)中(zhong)午。晚上(shang)還會(hui)出現個(ge)別熬夜(ye)的程序員在看代碼。總體呈下降(jiang)趨勢。

(訪問(wen)來源、訪問(wen)時長(chang)、訪問(wen)深(shen)度)

粗略的分析下(xia)：

訪問來源主要來自(zi)會話(hua)，其次(ci)來自(zi)掃小程序碼。

訪(fang)問時(shi)長最高點在 11-20 秒(miao)，當然還(huan)有大量用(yong)戶超過(guo)1分(fen)多鐘在使用(yong)小(xiao)程序。

其次，訪(fang)問(wen)深(shen)度（訪(fang)問(wen)了多少個(ge)(ge)頁面(mian)），大部(bu)分只(zhi)訪(fang)問(wen)了一(yi)個(ge)(ge)頁面(mian)，最(zui)深(shen)頁面(mian)在5個(ge)(ge)頁面(mian)的深(shen)度。

------------------劃重點(dian)-----------

那么，為什么我會選擇去編寫一個關于 程序員 的小程序呢？

首先，我(wo)是(shi)程序(xu)員。其次，也是(shi)因(yin)(yin)為前段時(shi)間(jian)我(wo)一(yi)直在更新(xin)關于Github的(de)教程。因(yin)(yin)此，為了方便(bian)自(zi)己，同時(shi)方便(bian)讀者和開發(fa)(fa)者，我(wo)選(xuan)擇開發(fa)(fa)了一(yi)款關于Github的(de)小程序(xu)。

02、小程序的功能

「Github開(kai)源(yuan)社區(qu)」目前的功能(neng)很簡單，包括每日開(kai)源(yuan)趨勢、模糊搜索想要的代碼、查看具體的代碼文檔以及倉(cang)庫的信(xin)息(xi)。

用微信(xin)掃一掃下(xia)方，可體驗小程序。

效果圖

(啟動(dong)小程序，默(mo)認展示當天(tian)最熱開源項目,并(bing)支持查看(kan)文檔)

(支持搜索代碼)

后續(xu)將支持的功能

代碼查看
登錄Github賬號，實現點贊等
社區
。。。

03、開發過程

雖說(shuo)這是(shi)一(yi)款(kuan)(kuan)工具性(xing)的小程序(xu)，但確切(qie)的說(shuo)是(shi)一(yi)款(kuan)(kuan)C/S的軟件。C端(duan)也(ye)就是(shi)集(ji)成進微信的小程序(xu)，S端(duan)的話就是(shi)我編寫并部署在阿里(li)云(yun)的服(fu)務端(duan)。

 C端(duan)包含了(le)wxml、wxss、json、js還有其他配置屬(shu)性。

S端的(de)(de)話我就直接(jie)用(yong)Python + web.py構(gou)建的(de)(de)，同(tong)時(shi)基于Github Api開發。

開發流程看似簡單(dan)，但(dan)對于我這個前端半(ban)調子來講，確實在開發C端遇到(dao)很多問(wen)題。當然，解決方法也就是Google + 大神。

04、如何開發一款自己的小程序

一個(ge)idea

這(zhe)個idea很重要，因(yin)為自己(ji)的(de)想(xiang)法將會推(tui)動(dong)自己(ji)去實(shi)踐(jian)并(bing)完(wan)成。如(ru)果(guo)沒有一個自己(ji)的(de)idea，那么與其說學技術，倒(dao)不如(ru)說你是在說服(fu)自己(ji)擁有多(duo)一點的(de)技能。

所以，idea很重要。

如果一開(kai)始我并沒有想好要去做(zuo)什(shen)(shen)么小(xiao)程序，然后就(jiu)上手去學習(xi)如何開(kai)發，我猜可能在(zai)后面的學習(xi)過(guo)程中我將會很(hen)難堅持。因為那(nei)樣是枯(ku)燥無(wu)味的，我并不(bu)知道自己用(yong)這(zhe)個技術能做(zuo)點什(shen)(shen)么。

其次，Github開源社區(qu)的(de)idea我在開發(fa)前一個禮拜都有(you)了。外加晚上熬夜到(dao)一兩(liang)點(dian)，加上周末，大概花了兩(liang)三天時間就出來(lai)了。

所以，在學習(xi)開發小程序之前，先想好自己要(yao)做(zuo)什么。接下來(lai)，再動手去(qu)了解、學習(xi)這(zhe)個技術，并運(yun)用起來(lai)。

需要了解(jie)的技術點

雖說小程序(xu)有一套(tao)自己的(de)開發語言(yan)，但是(shi)，框架中主要的(de)還是(shi)Page的(de)生(sheng)命(ming)周期和App的(de)管(guan)理(li)。其(qi)次，就(jiu)是(shi)css的(de)一些知識點。

所(suo)以(yi)，一開(kai)始你可以(yi)去小(xiao)程(cheng)序(xu)的(de)(de)官網著重了解Page生(sheng)命周期(qi)和App的(de)(de)管(guan)理。其(qi)次，熟(shu)悉下小(xiao)程(cheng)序(xu)的(de)(de)那幾個重要的(de)(de)組件，其(qi)中(zhong)包括View、button等(deng)等(deng)的(de)(de)。

官網：
//mp.weixin.qq.com/debug/wxadoc/dev/component/

接(jie)下(xia)來，你需要學習(xi)css的(de)東(dong)西，這(zhe)個其實(shi)不(bu)復雜，去(qu)w3c上面將css的(de)關鍵(jian)知(zhi)識點過一遍。了(le)解(jie)前(qian)端(duan)的(de)頁面是(shi)如何布(bu)局(ju)的(de)。

上手

• IDE搭建
  微信團隊針對小程序專門出了一款開發工具。這里我直接上鏈接:
  //mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
• 項目結構

js ---------- JavaScript文(wen)件

json -------- 項目配(pei)置文(wen)件，負責(ze)窗口顏色等(deng)等(deng)

wxml ------- 類似HTML文件

wxss ------- 類似CSS文件

在根目錄通過App來命名這四種文件，也就是程序的入口。
App.js

這個文件是必須要有的。其中主要寫的內容也就是上面提到過管理App生命周期的。
App.json

這個也是必須要有的。其中包含了整個小程序的全局配置。
App.wxss

有點類似于css的，進行布局用的。當然，這也是全局的。
App.wxml

這個可選，是用來布局小程序的界面的。有點類似于html。
關于具體的文檔，鏈接在這。
//mp.weixin.qq.com/debug/wxadoc/dev/component/
如果有需要(yao)詳細的講(jiang)解(jie)，那么可(ke)以留言，我考慮后(hou)續更(geng)新(xin)一系列(lie)的小程序開(kai)發教程。

05、個人開發經驗

雖說在(zai)不(bu)早之前，微信開放了個人小(xiao)程序的開發資格。不(bu)過，你還(huan)是不(bu)能隨心所欲的開發小(xiao)程序。

你(ni)(ni)能隨心(xin)所欲開(kai)發(fa)的功能也大概只有(you)工(gong)具類的。假設，你(ni)(ni)要(yao)(yao)是想開(kai)發(fa)一個(ge)社(she)區類的小程(cheng)序，那么(me)你(ni)(ni)得(de)要(yao)(yao)有(you)諸多的證(zheng)件。所以(yi)，在(zai)上(shang)手小程(cheng)序之前，你(ni)(ni)需(xu)要(yao)(yao)看看小程(cheng)序的開(kai)發(fa)規約，確保自己的idea是否需(xu)要(yao)(yao)各種證(zheng)件。

其次(ci)，小程序的(de)兼(jian)容性(xing)，目前Github開(kai)源社區在 iOS 9.3.2 上出(chu)現 SDK Exception 。還(huan)沒找到合理(li)的(de)解決方案。

審核時(shi)間較(jiao)長。你能做的就是等待。

開發工(gong)具有(you)時候響應很慢，同樣的你只有(you)等待，畢竟目前開發工(gong)具并(bing)沒有(you)到1.0版本。

等(deng)等(deng)的坑。。。

目前(qian)(qian)動態化(hua)的(de)(de)開發(fa)模式(shi)越(yue)來(lai)越(yue)火了，包括JSBridge、Weex、React等(deng)等(deng)的(de)(de)。所以，作為非前(qian)(qian)端的(de)(de)你是否也(ye)需要(yao)學習下前(qian)(qian)端的(de)(de)知識點呢？