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

　　本著開(kāi)源(偷懶)精神，先上某度和GitHub搜索一下是否已經(jīng)有類(lèi)似的開(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)自己想要模仿著做類(lèi)似界面的時(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、類(lèi)似的,，創(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)轭?lèi)型不匹配導(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)期待！