【微信小程序】会议室预定系统从0开始开发系列二

因为之前都是做嵌入式软件开发的，所以在做系列一的时候，还未完全理解小程序的页面是如何显示出来并且响应用户行为的。因此在本章节中提下我对这块的理解。

如果之前有从事过网页设计开发，可略过此章节。

重新贴下系列一中归纳的文件基础结构。

之前看到网上归纳了HTML、CSS、JavaScript之间的关系，原文链接如下。

https://www.cnblogs.com/dreamingbaobei/p/10407626.html

同样的，以此去理解WXML（HTML）、WXSS（CSS）、JavaScript之间的关系。

“HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人”

具体而言：JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

举个例子。在我们刚才创建的Demo工程中，在index.wxml中为第一栏创建了两个Button。

第一个button描述：

这个Button的作用为获取用户基本信息，绑定的响应操作为onGetUserInfo函数，头像图片的获取路径定义为avatarUrl。onGetUserInfo对应到js文件的代码为

第二个button描述：

这个button的文本为“点击获取 openid”，点击以后关联的操作为onGetOpenid。相应的js代码如下：

具体该栏长成什么样子，则在对应的wxss文件中做了细化了，如背景颜色，对齐，大小等。

类似的，打开其他页面的文件，都存放了该页面对应的代码文件：

- Js

- Json

- Wxml

- Wxss

温馨提示：如果之前没有接触过三种文件语言的语法语义，不用纠结，先按着英文单词的意思去理解即可。

另外，在WXML文件中定义了不少组件，对于组件的标签如果不理解的，可以参考下面链接中对组件的定义：

https://developers.weixin.qq.com/miniprogram/dev/component/

如果对js中定义的API不了解的，可以参考下面链接中对个API的详细解释：

https://developers.weixin.qq.com/miniprogram/dev/api/

之前提到，接下来要开发的会议室预定系统需要用到云数据库进行数据存储管理。所以本阶段再更深入看看这块的内容，确保能满足我们的需求。

云开发的基础文档可以通过以下链接查看。

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/data-type.html

数据库的基本数据类型如下：

权限控制方式如下,可以在进入云开发的数据库-权限设置进行修改:

另外云数据支持两种方式进行编辑与访问：

1. 使用数据库API在小程序或者云函数中进行

   
   

2. 控制器后台中直接编辑与查看
   

再看看开头创建的Demo程序中数据库的操作：

1. 点击“前端操作数据库”

2. 根据提示去云开发后台新增数据库合集-此时对应的操作方式为第二种。所谓的集合你可以理解为在电脑硬盘中创建一个文件夹，方便你进行不同类型的数据集合进行存放。

3. 删除页面中的注释代码，在刚刚创建的合集中新增一条数据库记录-此时对应的操作方式为第一种

所以总的来说，云开发中的数据库操作很简便，不仅可以满足需求，还能够大大简化我们的数据操作。

https://www.imooc.com/video/19371