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

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

　　開源微信小程序界面，侵刪

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

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

　　小程序搜索結(jié)果

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

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

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

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

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

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

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

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

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

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

　　頁面1的效果圖

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

　　4 云開發(fā)處理

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

　　- 會議室列表信息

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

　　會議室列表信息

　　主要用于“會議室”頁面。

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

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

　　3. 在wxml中通過wx:for遍歷顯示

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

　　會議室預(yù)定信息

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

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

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

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

　　4、遇到的問題分享

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

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

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