智企云三步教你从零开始搞定微信小程序云开发！

　　1、开源走一波还是重复造轮子?

　　本着开源(偷懒)精神，先上某度和GitHub搜索一下是否已经有类似的开源的小程序。遗憾的是虽然有一些，但是并没发现有基于小程序云开发的开源软件。其中一份还是比较有借鉴意义的。链接如下：https://www.oschina.net/p/wechat-meeting

　　开源微信小程序界面，侵删

　　这份小程序的功能相对来说比较齐全，只是服务器和数据库需要自己搭建，因此对于我们这种连办公电脑的管理员权限都没有的苦逼青(中)年来说，太过“奢侈”。对于这份源码，我是拿来作为页面设计参考以及阅读对方的js代码，突击学习下里面的逻辑和js语法。如果读者不存在这个问题，可以直接基于这份开源代码，做少量变更即可使用。

　　除此之外，大家还可以通过微信小程序搜索“会议室预定”，看看目前已有小程序的界面，作为页面设计参考。

　　小程序搜索结果

　　2 小程序的组件不熟悉怎么办?

　　之前搜索微信小程序时，发现不少已有的会议室预定小程序界面设计得很漂亮，但是当自己想要模仿着做类似界面的时候却发现由于语法和组件不够熟悉，下手起来很难。机缘巧合之下，发现微信在github中有提供示例源码，里面展示了几乎所有组件的用法。当然，里面的界面可能跟一些第三方的组件库或者UI库相比逊色一些，但是对于我这个轻量级的项目而言足够用了。

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

　　有兴趣可以扫码体验一下。也可以下载到本地，用微信小程序开发者工具打开，查看里面的UI设计方法和js绑定的处理代码。

　　另外，如果想要获取icon图标，可以前往阿里巴巴矢量图标库进行寻找和下载。在我的小程序中用到的图标都是在那里找的。

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

　　3 开始界面设计

　　下图是系列一中的初步设计构想，但是经过了系列一和系列二的学习和体验以后，发现如果完全按照这个构想去实现的话，工作量过于庞大，而且一些复杂的设计逻辑，需要较深入的学习才能实现，于是经过一番艰难的抉(偷)择(懒+1)以后，最终的页面设计简化为图二了。

　　原版的页面设计

　　偷懒版的页面设计

　　页面1的效果图

　　其中大部分都是依照微信官方demo中的页面设计进行微调。

　　4 云开发处理

　　小程序中，有两处用到云开发：

　　- 会议室列表信息

　　- 会议室预定情况

　　会议室列表信息

　　主要用于“会议室”页面。

　　1. 首先在云开发数据库中创建单独集合，保存已有的会议室详情：

　　2. 进入会议室时，通过js代码获取云开发的数据库，更新此页面的RoomListRadio数组

　　3. 在wxml中通过wx:for遍历显示

　　这样，如果后续新增了会议室，则只要改动云数据库而不需要更新代码即可。

　　会议室预定信息

　　主要用于“预定”页面。

　　1、类似的，创建新的集合用于保存预定信息，如日期，起始时间，主题等等

　　2、有了记录以后，我们还可以在预定页面中，在确定了会议室和日期以后，在预定下方显示此会议室当天的预定情况，以提醒预定者注意时间冲突。

　　3、同时，在使用者填写好预定信息，并且点击预约以后，js后台检查会议室时间是否有冲突

　　4、遇到的问题分享

　　无法显示其他用户的预定信息?原因：数据库权限设置错误，默认情况下，权限为“仅创建者可读写”，更换为第一种权限就ok了

　　部分预定信息无法显示?原因：“会议室”和“预定”页面中都可以选择会议室，如果是从“会议室”选定以后进入“预定”页面，则RoomSelectNum变量为数字型(1， 2，3。。。)，而如果是从“预定”页面选择会议室，则对应变量为字符型(‘1’，‘2’，‘3’。。。)，点击预约后保存的index变量则存在两种格式，导致查找时因为类型不匹配导致部分结果无法显示。

　　为什么小程序没有按照顺序?微信小程序的变量设置是异步的，所以当你调试发现变量操作相关代码没有按照预想顺序执行时，不妨看看是否为此原因。以上就是长沙小程序开发公司智企云关于对小程序云开发的相关介绍，后续关于更多小程序云开发的相关教学，我们也会陆续为大家带来，敬请期待！