1、開(kāi)源走一波還是重復(fù)造輪子?

　　本著開(kāi)源(偷懶)精神，先上某度和GitHub搜索一下是否已經(jīng)有類似的開(kāi)源的小程序。遺憾的是雖然有一些，但是并沒(méi)發(fā)現(xiàn)有基于小程序云開(kāi)發(fā)的開(kāi)源軟件。其中一份還是比較有借鑒意義的。鏈接如下：https://www.oschina.net/p/wechat-meeting

　　開(kāi)源微信小程序界面，侵刪

　　這份小程序的功能相對(duì)來(lái)說(shuō)比較齊全，只是服務(wù)器和數(shù)據(jù)庫(kù)需要自己搭建，因此對(duì)于我們這種連辦公電腦的管理員權(quán)限都沒(méi)有的苦逼青(中)年來(lái)說(shuō)，太過(guò)“奢侈”。對(duì)于這份源碼，我是拿來(lái)作為頁(yè)面設(shè)計(jì)參考以及閱讀對(duì)方的js代碼，突擊學(xué)習(xí)下里面的邏輯和js語(yǔ)法。如果讀者不存在這個(gè)問(wèn)題，可以直接基于這份開(kāi)源代碼，做少量變更即可使用。

　　除此之外，大家還可以通過(guò)微信小程序搜索“會(huì)議室預(yù)定”，看看目前已有小程序的界面，作為頁(yè)面設(shè)計(jì)參考。

　　小程序搜索結(jié)果

　　2 小程序的組件不熟悉怎么辦?

　　之前搜索微信小程序時(shí)，發(fā)現(xiàn)不少已有的會(huì)議室預(yù)定小程序界面設(shè)計(jì)得很漂亮，但是當(dāng)自己想要模仿著做類似界面的時(shí)候卻發(fā)現(xiàn)由于語(yǔ)法和組件不夠熟悉，下手起來(lái)很難。機(jī)緣巧合之下，發(fā)現(xiàn)微信在github中有提供示例源碼，里面展示了幾乎所有組件的用法。當(dāng)然，里面的界面可能跟一些第三方的組件庫(kù)或者UI庫(kù)相比遜色一些，但是對(duì)于我這個(gè)輕量級(jí)的項(xiàng)目而言足夠用了。

　　Git地址：https://github.com/wechat-miniprogram/miniprogram-demo

　　有興趣可以掃碼體驗(yàn)一下。也可以下載到本地，用微信小程序開(kāi)發(fā)者工具打開(kāi)，查看里面的UI設(shè)計(jì)方法和js綁定的處理代碼。

　　另外，如果想要獲取icon圖標(biāo)，可以前往阿里巴巴矢量圖標(biāo)庫(kù)進(jìn)行尋找和下載。在我的小程序中用到的圖標(biāo)都是在那里找的。

　　https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472

　　3 開(kāi)始界面設(shè)計(jì)

　　下圖是系列一中的初步設(shè)計(jì)構(gòu)想，但是經(jīng)過(guò)了系列一和系列二的學(xué)習(xí)和體驗(yàn)以后，發(fā)現(xiàn)如果完全按照這個(gè)構(gòu)想去實(shí)現(xiàn)的話，工作量過(guò)于龐大，而且一些復(fù)雜的設(shè)計(jì)邏輯，需要較深入的學(xué)習(xí)才能實(shí)現(xiàn)，于是經(jīng)過(guò)一番艱難的抉(偷)擇(懶+1)以后，最終的頁(yè)面設(shè)計(jì)簡(jiǎn)化為圖二了。

　　原版的頁(yè)面設(shè)計(jì)

　　偷懶版的頁(yè)面設(shè)計(jì)

　　頁(yè)面1的效果圖

　　其中大部分都是依照微信官方demo中的頁(yè)面設(shè)計(jì)進(jìn)行微調(diào)。

　　4 云開(kāi)發(fā)處理

　　小程序中，有兩處用到云開(kāi)發(fā)：

　　- 會(huì)議室列表信息

　　- 會(huì)議室預(yù)定情況

　　會(huì)議室列表信息

　　主要用于“會(huì)議室”頁(yè)面。

　　1. 首先在云開(kāi)發(fā)數(shù)據(jù)庫(kù)中創(chuàng)建單獨(dú)集合，保存已有的會(huì)議室詳情：

　　2. 進(jìn)入會(huì)議室時(shí)，通過(guò)js代碼獲取云開(kāi)發(fā)的數(shù)據(jù)庫(kù)，更新此頁(yè)面的RoomListRadio數(shù)組

　　3. 在wxml中通過(guò)wx:for遍歷顯示

　　這樣，如果后續(xù)新增了會(huì)議室，則只要改動(dòng)云數(shù)據(jù)庫(kù)而不需要更新代碼即可。

　　會(huì)議室預(yù)定信息

　　主要用于“預(yù)定”頁(yè)面。

　　1、類似的，創(chuàng)建新的集合用于保存預(yù)定信息，如日期，起始時(shí)間，主題等等

　　2、有了記錄以后，我們還可以在預(yù)定頁(yè)面中，在確定了會(huì)議室和日期以后，在預(yù)定下方顯示此會(huì)議室當(dāng)天的預(yù)定情況，以提醒預(yù)定者注意時(shí)間沖突。

　　3、同時(shí)，在使用者填寫(xiě)好預(yù)定信息，并且點(diǎn)擊預(yù)約以后，js后臺(tái)檢查會(huì)議室時(shí)間是否有沖突

　　4、遇到的問(wèn)題分享

　　無(wú)法顯示其他用戶的預(yù)定信息?原因：數(shù)據(jù)庫(kù)權(quán)限設(shè)置錯(cuò)誤，默認(rèn)情況下，權(quán)限為“僅創(chuàng)建者可讀寫(xiě)”，更換為第一種權(quán)限就ok了

　　部分預(yù)定信息無(wú)法顯示?原因：“會(huì)議室”和“預(yù)定”頁(yè)面中都可以選擇會(huì)議室，如果是從“會(huì)議室”選定以后進(jìn)入“預(yù)定”頁(yè)面，則RoomSelectNum變量為數(shù)字型(1， 2，3。。。)，而如果是從“預(yù)定”頁(yè)面選擇會(huì)議室，則對(duì)應(yīng)變量為字符型(‘1’，‘2’，‘3’。。。)，點(diǎn)擊預(yù)約后保存的index變量則存在兩種格式，導(dǎo)致查找時(shí)因?yàn)轭愋筒黄ヅ鋵?dǎo)致部分結(jié)果無(wú)法顯示。

　　為什么小程序沒(méi)有按照順序?微信小程序的變量設(shè)置是異步的，所以當(dāng)你調(diào)試發(fā)現(xiàn)變量操作相關(guān)代碼沒(méi)有按照預(yù)想順序執(zhí)行時(shí)，不妨看看是否為此原因。以上就是長(zhǎng)沙小程序開(kāi)發(fā)公司智企云關(guān)于對(duì)小程序云開(kāi)發(fā)的相關(guān)介紹，后續(xù)關(guān)于更多小程序云開(kāi)發(fā)的相關(guān)教學(xué)，我們也會(huì)陸續(xù)為大家?guī)?lái)，敬請(qǐng)期待！