云端：定义数据结构和云函数

在微信开发者工具里面点云开发按钮就可以打开云开发相关的界面，我们在数据库页面上可以定义数据结构。

小程序的数据库背后实际上是MongoDB，“客流”这个小程序一共定义了7个集合，集合的概念类似于关系性数据库里的一张表，我们所有的数据都放在不同的集合里。

但是，NoSQL里面的集合跟传统关系型数据库有很多不一样的地方。除了刚才有人问的事务问题之外，实际开发过程中还有一些比较麻烦的地方。比如，多个集合的关联查询写起来比较恶心，没有传统的SQL语句那么方便。

对象存储这块可以建立不同的目录，用来放不同的上传文件，根据不同的业务模块建一些文件夹，把同一个业务模块相关的文件都放在对应的目录里面。

云函数用来定义云端调用的方法，提供了定时器之类的工具函数。我们可以利用云函数来实现很多业务功能，比如说定时把数据库里面某些用来做统计的集合生成数据。

我们一共定义了7个集合，分别解释如下：

这样我们得到了基本数据结构的定义，有了这些之后我们就可以开开心心来实现界面了。

小程序端：编写界面实现功能

你们这里面有多少已经注册号云开发appid，如果注册好了就跟着我一起尝试做一个界面出来，如果还没有的话就听我解释代码里面比较关键的点。

刚才有人关注开发过程中有没有坑，我会把一些坑解释一下，实际上我踩了很多坑。

我们一起来创建一个项目，然后导入一些组件库、样式库，编写一些全局的样式。
把四个主入口页创建起来，然后创建一些可复用的组件。
在写界面的过程中怎么找到好看好用的图表，怎么在小程序实现图形的界面，像曲线图、柱状图。
再看云函数和云数据库访问的过程，怎么调用云端的数据库和云函数。
然后给大家讲一些避坑指南。
最后一部分是把所有写好的代码链接给你，如果你对这个小程序感兴趣，可以自己继续往前开发，最终得到一个完整的小程序。

以下是开发过程中的一些注意点和小坑，给大家解释一下：

第一步要在微信开放平台注册一个账号，邮箱只能注册一个小程序，这是开发过程中遇到的第一个小坑。账号注销掉邮箱也不释放，你肯定要准备好几个邮箱，所以这里请小心一点。

小程序起名字是有讲究的，有自动校验的，比如说你起一个很奇怪的名字或者上传很奇怪的logo是肯定审核不通过，所以要预先准备好。

走完注册过程之后会拿到一个很关键的较appid，它是唯一的，有了appid之后就可以创建小程序了。

打开微信开发者工具，开发者工具也需要登陆的，创建一个项目。创建项目的时候有两个关键点，你可以选择不适用它的云服务，如果不用就选第二个小程序开发。然后这里有一个appid，你在注册小程序的时候系统给你的，这样就创建一个界面出来。

创建完之后会自动生成一个默认的界面，还会生成一些代码，这些都是默认的，你在开发的时候肯定是要把它删掉的，删掉之后会得到一个比较干净的项目结构。

你不一定要在微信开发者工具里写代码，因为这个开发者工具虽然集成了很多功能，部署、版本管理都可以在这里面完成，但是写代码的能力实在太差了。比如说没有智能提示，然后也没有插件。所以，推荐大家还是用VS Code去写代码，在VS Code里面打开小程序项目的根目录就可以了。

虽然是小程序，但我们在写的过程中代码的量并不小，所以目录和文件数量还是比较多。这个项目最关键的是两个根目录，一个是cloudfunctions，一个是minprogram。minprogram是小程序端的代码，cloudfunctions是云端相关的代码。

minprogram会里面放三个字目录，assets里面放一些静态资源，pages目录里面放页面，components里面放组件，这是一个经典的目录划分方式。

接下来注意一下app.json里面的关键配置，第一个是appid，这个ID一定要用你自己申请到的小程序ID，不能用别人。
在开发小程序的过程中因为要写前端代码，写界面，明显要用到一些样式。这些样式可以自己写，如果CSS足够好或者足够有耐心就自己写没有问题，写一些风格出来。如果想快一点的话用市面上成熟的组件库，比如说WeUI提供给我们的，微信官方团队提供一组官方样式的实现叫WeUI。目前是2.0.0，把它放在assets里面，还有CSS也可以引来过来。

WeUI提供哪些功能？

你可以访问一下他们的官方网站，里面有一个体验版的小程序可以扫描看一下。它把基础的表单、导航条、基础的grid都提供给你了，这些代码可以直接抄过去使用，不用自己写这些结构。另外，它还定义了层级规范，告诉你应该怎么组织界面的层次结构，这些都是很好的功能。

除了WeUI之外，在小程序文档上面还可以找到内置的组件。小程序内置了很多内部的组件，比如说图表、文本，这是已有的组件库。

我们在全局的app.wxss里面引入WeUI相关的样式。这些样式文件的后缀都是wxss，实际上是CSS的子集，并不能支持所有的CSS规范。大家注意wxml和wxss虽然他们都支持基本的HTML和CSS的语法，但并不是全集，所以在写的时候还是有一些坑的，要特别翻阅一下官方的文档。

我们有了样式之后就可以构建主入口四个主入口页，四个主入口野是在app.json里面改的，有一个配置项叫tabBar，list就是主入口的四个。

如果你不想用这个方式，可以把整个应用指向index，然后在index里面用其它布局模式来构建页面，就像你开发其它WEB应用那样。

我们主要功能是首页、用户之间的关系还有统计数据的图表和图形，最后是用户自己全局的设置页。

我们来看index里面的写法，这一些文件它们互相之间的关系，如果刚好做前端开发就明白这里面的，一个常见文件，一个js文件，一个是json文件，再是json是微信配置。这里要声明一下用的导航条的颜色还有标题的文本、标题的样式这都是微信特有的地方，必须写，不写不行。如果用到外部的功能必须要声明在里面才行。

我在index.wxss里面就可以使用微信所提供的基本的视图的标签来写我的结构，这个是微信里面小程序所提供的顶级的器类，可以类比与DIA，它也可以写glass，这些语法大家都比较熟悉就不多说了。

这些结构都可以逐层嵌套，我们再看怎么定义组件。

我们的界面上有很多是可以复用的内容，比如说首页有名片的区域，实际上在我编辑名片的地方也有这个界面，可以选择名片的模板，很明显我把它要定义为可复用的。

组件只能定义在components目录里面，我可以定义一个可复用的card-default组件。请注意，定义组件和定义页面的方式是不一样的，组件里面声明的类型是component而不是用page，在微信小程序这里是严格区分开的，跟其它前端框架不一样。

page本身是不能互相嵌套和复用，如果某个界面需要复用，必须定义成组件。

我们获得组件之后可以用组件名称作为标签使用，同时也可以给组件传递参数。比如说组件里面可以定义一些需要接收的参数，这个可以定义在component，如果你是（reart）的开发者，别人可以给传参数给它，参数可以传各种各样的类型，就是传一个大对象给它也是OK的。date都可以放在wxml文件里面取值都没有问题，这是组件的定义方式。有了之后就可以装出一大堆适合你的组件，可以复用的组件。

再来看图标，我们的界面上有一些看起来不错的图标，扫一扫、预览、编辑，等等。这些图标在我们做小程序的过程中也是很实际的需求，你可以找一组很好看、很和谐的图标。

给大家一个神器叫iconfont，https://www.iconfont.cn ，这里面所有的日常能想到的图标都有，比如说交易、朋友圈全部都有。当然也可以选择fontawesome，但fontawesome在微信小程序里面用起来有点麻烦，主要是字体文件的嵌入问题。我尝试了一下，没有成功，如果你有兴趣，可以自己尝试一番。

再来看图表，我要在小程序里面展现一些分析性的界面，我要描述客户之间互相的关系，要展现一些带地理信息的东西，我要展现一些曲线图，怎么办？

在WEB开发里面，我们有Echarts这个神器，在小程序这块，有一个ec-canvas，它是基于Echarts封装的。ec-cavas专门针对微信小程序做了封装，所以请使用它。

我们再看怎么进行前后端的数据交互，比如说列表页和云函数是怎么用的。

在关系页面上只要用wx.cloud.database就可以拿到db对象，整个过程和以前操作关系的数据库还是比较类似的。在操作关系数据库的时候一般会拿一个connection对象，然后就可以用SQL进行数据库操作，做完这些操作之后可以提交事务或者回滚。

在云开发这里，你需要拿到一个db对象，然后利用db对象所提供的API进行数据库操作。你要搜索哪个集合，你告诉它集合的名称。下面的语法很好了解，提供一个where条件，限定取多少行，也可以orderby，提供这些语法之后就可以get到数据，提交一些函数如果成功怎么样，失败怎么样。这是操作数据库的方式。

操作云函数的方式也是类似的，它有对应的API，只要调用就行了。

在实际开发过程中，还有一些小坑需要注意。比如说在做界面的时候经常用九空格来构造排列的图标，这些图标扫一扫点一下就开始扫一个图片或启动相机。但是很可惜，微信小程序只在button对象上增加了open-type属性，我们可以利用这个属性来打开相机，但是其它组件是没有open-type属性的。那怎么办呢？一个比较常见的方式在图标下面藏一个button，把它搞成透明的，这样就可以绕过去。

另外客服这部分，我们做小程序经常会出现这样的需求，当别人加我为好友之后，我希望能跟他聊天。我希望有一个微信聊天一样的组件，可以发语音、发文字、发图片，但是实际上没有这样的组件，微信小程序没有提供。所以，如果你需要这样的聊天组件，可以自己封装，或者到市面上去找开源的。
图文详情页这边的坑也要注意，小程序提供了一个叫richtext的组件，但是它能支持的HTML标签是有限的。
富文本编辑器也很难实现，虽然小程序里面提供了一个RichEditor，但是功能还比较有限。所以，你可以发现，任何一个产品，当你做深入了之后，总能发现各种各样不爽的地方。对于这些东西，如果能绕开的话就尽量绕开，除非你的老板全力支持你，不限制你的时间，也不卡你的KPI，否则你可以需要花费大量的时间进行研究开发，出来的效果还不一定好。

接下来给大家看最终完成的代码，我提交了两份，在github和gitee上面都提了一份，我把路径发给你们，如果有兴趣可以自己下载下来继续研究。

注意，千万不要用我的appid。

我把云端的数据结构也给你们，这样你们就可以在本地把项目创建起来了。

这个小程序的主体框架我已经都实现了，总共有31个界面，总共花了4个完整的工作日，后面我找时间把它全部做好然后上线。

最后，请看这张图，“如何画马”？

先画两个圆圈，然后再画四条腿，然后面目表情，再画马鬃，再加一点细节，于是我们就得到了一匹好看的马，哈哈哈。

没办法今天现场的硬件有些限制，非常感谢大家坚持到现在。

完整的代码已经提交到GitHub和Gitee上。

作者介绍：
章小飞，网名大漠穷秋，腾讯云TVP，全栈开发者，先后参与过公司多个技术和业务系统的设计和研发。对技术拥有无限热情，热爱分享，最近2年为超过50家各种类型的企业提供过技咨询和培训服务，犀利的讲课风格，完善的内容和案例，受到客户的一致好评。

本文转载自公众号云加社区（ID：QcloudCommunity）。

原文链接：

https://mp.weixin.qq.com/s/5E4sqt-6i_xuYd-k_mgjpg

创作场景

大漠穷秋：如何快速构建一款 SCRM 小程序？（下）