01、初衷

大概上上周我花了周末兩天的時(shí)間編寫(xiě)了一款小程序并順利提交審核。

也就在前兩天我的小程序 「Github開(kāi)源社區(qū)」 歷經(jīng)了兩周的審核，終于。。。。。。成功發(fā)布了，并且綁定到了公眾號(hào)。

以下是這兩天時(shí)間的數(shù)據(jù)分析報(bào)表。

（實(shí)時(shí)訪問(wèn)次數(shù) pv）

粗略的分析下：實(shí)時(shí)訪問(wèn)次數(shù)波動(dòng)很明顯，當(dāng)然這也是正常的。高流量基本保持在早上十點(diǎn)到中午。晚上還會(huì)出現(xiàn)個(gè)別熬夜的程序員在看代碼?？傮w呈下降趨勢(shì)。

(訪問(wèn)來(lái)源、訪問(wèn)時(shí)長(zhǎng)、訪問(wèn)深度)

粗略的分析下：

訪問(wèn)來(lái)源主要來(lái)自會(huì)話，其次來(lái)自掃小程序碼。

訪問(wèn)時(shí)長(zhǎng)最高點(diǎn)在 11-20 秒，當(dāng)然還有大量用戶超過(guò)1分多鐘在使用小程序。

其次，訪問(wèn)深度（訪問(wèn)了多少個(gè)頁(yè)面），大部分只訪問(wèn)了一個(gè)頁(yè)面，最深頁(yè)面在5個(gè)頁(yè)面的深度。

------------------劃重點(diǎn)-----------

那么，為什么我會(huì)選擇去編寫(xiě)一個(gè)關(guān)于 程序員 的小程序呢？

首先，我是程序員。其次，也是因?yàn)榍岸螘r(shí)間我一直在更新關(guān)于Github的教程。因此，為了方便自己，同時(shí)方便讀者和開(kāi)發(fā)者，我選擇開(kāi)發(fā)了一款關(guān)于Github的小程序。

02、小程序的功能

「Github開(kāi)源社區(qū)」目前的功能很簡(jiǎn)單，包括每日開(kāi)源趨勢(shì)、模糊搜索想要的代碼、查看具體的代碼文檔以及倉(cāng)庫(kù)的信息。

用微信掃一掃下方，可體驗(yàn)小程序。

效果圖

(啟動(dòng)小程序，默認(rèn)展示當(dāng)天最熱開(kāi)源項(xiàng)目,并支持查看文檔)

(支持搜索代碼)

后續(xù)將支持的功能

代碼查看
登錄Github賬號(hào)，實(shí)現(xiàn)點(diǎn)贊等
社區(qū)
。。。

03、開(kāi)發(fā)過(guò)程

雖說(shuō)這是一款工具性的小程序，但確切的說(shuō)是一款C/S的軟件。C端也就是集成進(jìn)微信的小程序，S端的話就是我編寫(xiě)并部署在阿里云的服務(wù)端。

C端包含了wxml、wxss、json、js還有其他配置屬性。

S端的話我就直接用Python + web.py構(gòu)建的，同時(shí)基于Github Api開(kāi)發(fā)。

開(kāi)發(fā)流程看似簡(jiǎn)單，但對(duì)于我這個(gè)前端半調(diào)子來(lái)講，確實(shí)在開(kāi)發(fā)C端遇到很多問(wèn)題。當(dāng)然，解決方法也就是Google + 大神。

04、如何開(kāi)發(fā)一款自己的小程序

一個(gè)idea

這個(gè)idea很重要，因?yàn)樽约旱南敕▽?huì)推動(dòng)自己去實(shí)踐并完成。如果沒(méi)有一個(gè)自己的idea，那么與其說(shuō)學(xué)技術(shù)，倒不如說(shuō)你是在說(shuō)服自己擁有多一點(diǎn)的技能。

所以，idea很重要。

如果一開(kāi)始我并沒(méi)有想好要去做什么小程序，然后就上手去學(xué)習(xí)如何開(kāi)發(fā)，我猜可能在后面的學(xué)習(xí)過(guò)程中我將會(huì)很難堅(jiān)持。因?yàn)槟菢邮强菰餆o(wú)味的，我并不知道自己用這個(gè)技術(shù)能做點(diǎn)什么。

其次，Github開(kāi)源社區(qū)的idea我在開(kāi)發(fā)前一個(gè)禮拜都有了。外加晚上熬夜到一兩點(diǎn)，加上周末，大概花了兩三天時(shí)間就出來(lái)了。

所以，在學(xué)習(xí)開(kāi)發(fā)小程序之前，先想好自己要做什么。接下來(lái)，再動(dòng)手去了解、學(xué)習(xí)這個(gè)技術(shù)，并運(yùn)用起來(lái)。

需要了解的技術(shù)點(diǎn)

雖說(shuō)小程序有一套自己的開(kāi)發(fā)語(yǔ)言，但是，框架中主要的還是Page的生命周期和App的管理。其次，就是css的一些知識(shí)點(diǎn)。

所以，一開(kāi)始你可以去小程序的官網(wǎng)著重了解Page生命周期和App的管理。其次，熟悉下小程序的那幾個(gè)重要的組件，其中包括View、button等等的。

官網(wǎng)：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/

接下來(lái)，你需要學(xué)習(xí)css的東西，這個(gè)其實(shí)不復(fù)雜，去w3c上面將css的關(guān)鍵知識(shí)點(diǎn)過(guò)一遍。了解前端的頁(yè)面是如何布局的。

上手

• IDE搭建
  微信團(tuán)隊(duì)針對(duì)小程序?qū)ｉT(mén)出了一款開(kāi)發(fā)工具。這里我直接上鏈接:
  https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
• 項(xiàng)目結(jié)構(gòu)

js ---------- JavaScript文件

json -------- 項(xiàng)目配置文件，負(fù)責(zé)窗口顏色等等

wxml ------- 類(lèi)似HTML文件

wxss ------- 類(lèi)似CSS文件

在根目錄通過(guò)App來(lái)命名這四種文件，也就是程序的入口。
App.js

這個(gè)文件是必須要有的。其中主要寫(xiě)的內(nèi)容也就是上面提到過(guò)管理App生命周期的。
App.json

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

有點(diǎn)類(lèi)似于css的，進(jìn)行布局用的。當(dāng)然，這也是全局的。
App.wxml

這個(gè)可選，是用來(lái)布局小程序的界面的。有點(diǎn)類(lèi)似于html。
關(guān)于具體的文檔，鏈接在這。
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
如果有需要詳細(xì)的講解，那么可以留言，我考慮后續(xù)更新一系列的小程序開(kāi)發(fā)教程。

05、個(gè)人開(kāi)發(fā)經(jīng)驗(yàn)

雖說(shuō)在不早之前，微信開(kāi)放了個(gè)人小程序的開(kāi)發(fā)資格。不過(guò)，你還是不能隨心所欲的開(kāi)發(fā)小程序。

你能隨心所欲開(kāi)發(fā)的功能也大概只有工具類(lèi)的。假設(shè)，你要是想開(kāi)發(fā)一個(gè)社區(qū)類(lèi)的小程序，那么你得要有諸多的證件。所以，在上手小程序之前，你需要看看小程序的開(kāi)發(fā)規(guī)約，確保自己的idea是否需要各種證件。

其次，小程序的兼容性，目前Github開(kāi)源社區(qū)在 iOS 9.3.2 上出現(xiàn) SDK Exception 。還沒(méi)找到合理的解決方案。

審核時(shí)間較長(zhǎng)。你能做的就是等待。

開(kāi)發(fā)工具有時(shí)候響應(yīng)很慢，同樣的你只有等待，畢竟目前開(kāi)發(fā)工具并沒(méi)有到1.0版本。

等等的坑。。。

目前動(dòng)態(tài)化的開(kāi)發(fā)模式越來(lái)越火了，包括JSBridge、Weex、React等等的。所以，作為非前端的你是否也需要學(xué)習(xí)下前端的知識(shí)點(diǎn)呢？