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

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

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

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

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

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

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

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

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

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

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

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

1. 我们一起来创建一个项目，然后导入一些组件库、样式库，编写一些全局的样式。

2. 把四个主入口页创建起来，然后创建一些可复用的组件。

3. 在写界面的过程中怎么找到好看好用的图表，怎么在小程序实现图形的界面，像曲线图、柱状图。

4. 再看云函数和云数据库访问的过程，怎么调用云端的数据库和云函数。

5. 然后给大家讲一些避坑指南。

6. 最后一部分是把所有写好的代码链接给你，如果你对这个小程序感兴趣，可以自己继续往前开发，最终得到一个完整的小程序。

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

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

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

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

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

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

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

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

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

4. 接下来注意一下 app.json 里面的关键配置，第一个是 appid，这个 ID 一定要用你自己申请到的小程序 ID，不能用别人。

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

WeUI 提供哪些功能？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

13. 另外客服这部分，我们做小程序经常会出现这样的需求，当别人加我为好友之后，我希望能跟他聊天。我希望有一个微信聊天一样的组件，可以发语音、发文字、发图片，但是实际上没有这样的组件，微信小程序没有提供。所以，如果你需要这样的聊天组件，可以自己封装，或者到市面上去找开源的。

14. 图文详情页这边的坑也要注意，小程序提供了一个叫 richtext 的组件，但是它能支持的 HTML 标签是有限的。

15. 富文本编辑器也很难实现，虽然小程序里面提供了一个 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