小程序云开发实例教程，微信小程序云开发操作全解

“云开发自带的Demo例程，了解一下！”

1 开始第一个小程序

安装完微信开发者程序以后，打开软件。

因为后续将要开发的会议室预定小程序要用到云开发，所以在新建项目的时候勾选上。

新建完以后自动生成云开发的基础Demo。最左侧为模拟器生成的模拟页面，中间为目录结构展示，最右侧为当前打开文件内容。脱机调试的话直接在模拟页面上进行操作即可，例如你想确定“上传图片”点击后的响应，则直接点击“上传图片”就可以模拟手机端点击操作。

如果需要实际在真机中测试，可以选择“真机调试”，会弹出二维码，供你的手机扫码调试。

2 小程序是如何显示和与用户交互的

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

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

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

之前看到网上归纳了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/

3 云开发数据库的操作

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

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

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

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

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

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

使用数据库API在小程序或者云函数中进行控制器后台中直接编辑与查看

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

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

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

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

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

另外，在搜索一些线上课程的时候，发现有个免费的课程，适合基础入门，有兴趣的可以看看。https://www.imooc.com/video/19371