“幫我開發(fā)個(gè)微信小程序吧。”
“不是都是程序開發(fā)嘛，很簡(jiǎn)單的吧?！?/p>
“什么？這么簡(jiǎn)單的要開發(fā)這么久？”
1 緣由
公司的Exchange一直都未曾在Outlook創(chuàng)建會(huì)議室房間（不要吐槽，不要吐槽，不要吐槽），所以最初會(huì)議室預(yù)定都是找廠辦（廠長(zhǎng)辦公室）人員確定和預(yù)定會(huì)議室，一來(lái)二去比較繁瑣與低效。前不久廠辦人員在微信找到了一個(gè)用于會(huì)議室預(yù)定的免費(fèi)小程序，可以自定義創(chuàng)建會(huì)議室，關(guān)注該會(huì)議室后還可以看到會(huì)議室的使用狀態(tài)以及根據(jù)需要自己預(yù)定會(huì)議室，方便了不少。
本周的時(shí)候，該小程序突然無(wú)法正常預(yù)定會(huì)議室，于是只好回到老路子直接找廠辦人員預(yù)定會(huì)議室。廠辦妹子順便說(shuō)到，要不你給弄個(gè)微信小程序唄。
我是搞嵌入式軟件，對(duì)這類Web及移動(dòng)端的程序軟件開發(fā)其實(shí)一無(wú)所知。因?yàn)橹耙恢睂?duì)這個(gè)行業(yè)比較好奇，想趁此機(jī)會(huì)了解下這方面的開發(fā)模式與方法，所以在每天一杯奶茶的誘惑下，腦袋一熱，答應(yīng)下來(lái)，打算工作之余做個(gè)類似的小程序，給自己定的時(shí)間為兩周。之所以定了兩周，是覺(jué)得功能相對(duì)簡(jiǎn)單，即便之前沒(méi)有接觸過(guò)這行，但是開發(fā)理念是相通，主要的障礙是編程語(yǔ)言的重新熟悉而已。
下了班，回到家，簡(jiǎn)單理了一遍從0到1的幾個(gè)過(guò)程，如下圖，我就后悔了，因?yàn)橹挥泄ぷ髦嗟臅r(shí)間可以利用，按每天兩個(gè)小時(shí)預(yù)估（要是有人幫忙溜娃，我可以騰出三個(gè)小時(shí)以上），兩周時(shí)間根本不夠。于是腆著臉跟廠辦人員說(shuō)兩周完不成，最后達(dá)成第三季度完成即可。
2 準(zhǔn)備工作-開發(fā)流程與工具
簡(jiǎn)單理了一下小程序的開發(fā)基本流程。
1. 申請(qǐng)賬號(hào)（AppID）：開發(fā)小程序的第一步，你需要擁有一個(gè)小程序帳號(hào)，通過(guò)這個(gè)帳號(hào)你就可以管理你的小程序。申請(qǐng)鏈接如下。需要注意的是小程序的AppID和公眾號(hào)的AppID是兩個(gè)東東，不要混淆了。https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#申請(qǐng)帳號(hào)
2. 安裝開發(fā)者工具：前往開發(fā)者工具下載頁(yè)面，根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng)的安裝包進(jìn)行安裝，有關(guān)開發(fā)者工具更詳細(xì)的介紹可以查看《開發(fā)者工具介紹》。下圖為微信開發(fā)者工具的頁(yè)面實(shí)例圖。下載鏈接如下：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3. 設(shè)計(jì)編碼，測(cè)試驗(yàn)證，發(fā)布上線就不說(shuō)了，跟其他軟件開發(fā)流程是一致的
3 準(zhǔn)備工作-代碼構(gòu)成與開發(fā)語(yǔ)言
本章節(jié)部分內(nèi)容摘自微信小程序指南，現(xiàn)在看不懂沒(méi)關(guān)系，可以先假裝看得懂，因?yàn)槲椰F(xiàn)階段也看不懂。先心中建立大致的框架與概念即可。用思維導(dǎo)圖歸納了下：
無(wú)論是哪一行業(yè)的軟件開發(fā)，都有一些通用的代碼文件結(jié)構(gòu)。所以首先講講小程序的代碼文件構(gòu)成：
JSON配置文件
JSON 是一種數(shù)據(jù)格式，并不是編程語(yǔ)言，在小程序中，JSON扮演的靜態(tài)配置的角色。
我們可以看到在項(xiàng)目的根目錄有一個(gè) app.json 和 project.config.json，此外在 pages/logs 目錄下還有一個(gè) logs.json。這些文件里面保存了小程序相關(guān)的配置。
其他三類文件
從事過(guò)網(wǎng)頁(yè)編程的人知道，網(wǎng)頁(yè)編程采用的是 HTML CSS JS 這樣的組合，其中 HTML 是用來(lái)描述當(dāng)前這個(gè)頁(yè)面的結(jié)構(gòu)，CSS 用來(lái)描述頁(yè)面的樣子，JS 通常是用來(lái)處理這個(gè)頁(yè)面和用戶的交互。—摘自微信小程序指南
（可是我并沒(méi)有從事過(guò)啊.gif）
同樣道理，在小程序中也有同樣的角色：
- WXML 充當(dāng)?shù)木褪穷愃?HTML 的角色，描述頁(yè)面的結(jié)構(gòu)，但是在語(yǔ)法標(biāo)簽和部分開發(fā)模式上與HTML略微不同。（HTML沒(méi)用過(guò) 1）
- WXSS 充當(dāng)CSS的角色，具備了CSS大部分特性，并做了一些擴(kuò)充和修改，用于描述頁(yè)面的樣子。（CSS沒(méi)用過(guò) 2）
- JS 處理與用戶的交互以及調(diào)用小程序提供的API等（JS沒(méi)用過(guò) 10086，越發(fā)覺(jué)得坑越挖越大）
4 準(zhǔn)備工作-云開發(fā)
在最初打算設(shè)計(jì)會(huì)議室預(yù)定系統(tǒng)小程序的時(shí)候，有個(gè)困擾我的問(wèn)題就是服務(wù)器的架設(shè)。因?yàn)闀?huì)議室系統(tǒng)需要用戶權(quán)限管理和保存會(huì)議室相關(guān)的數(shù)據(jù)，所以肯定需要服務(wù)器進(jìn)行數(shù)據(jù)庫(kù)的云端保存。然而，我們公司IT這方面的能力只能用“呵呵”來(lái)表達(dá)。
在安裝了微信開發(fā)者工具以后，我發(fā)現(xiàn)了一個(gè)云開發(fā)選項(xiàng)，不由得眼前一亮。趕緊去官網(wǎng)看了下云開發(fā)的介紹。雖然現(xiàn)在還沒(méi)有完全理解，但是初步判斷應(yīng)該能滿足會(huì)議室的這一需求。
且基礎(chǔ)版的功能是免費(fèi)的（現(xiàn)在想想之前廠辦用的免費(fèi)小程序，用的應(yīng)該是這個(gè)模式，用的人多了估計(jì)相關(guān)服務(wù)就受限導(dǎo)致無(wú)法使用）。
作者：跨界程序員Vincent。持續(xù)更新中。。。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。