微信云开发管理工具入门教程

深碍√TFBOYSˉ_ 2023-10-14 08:35 54阅读 0赞

### 前言 ###

微信云开发管理工具是是什么？  
提供了一套云开发的后台管理工具，并且提供低代码开发工具，开发者可基于低代码工具，连接到业务数据库，拖拽组件生成前端UI，从而定制各类管理端应用。

在这里肯定有同学会问它与 [云开发内容管理CMS][CMS] 有什么区别？  
可以理解为更加灵活，可随意定制的内容管理，结合了微搭使用起来更简单更灵活。  
如果还不知道微搭的同学可以看下我之前写过的[低代码平台微搭入门教程][Link 1]

### 体验 ###

目前微信云开发管理工具还在内测当中，如需申请内测权限，戳这里[申请入口][Link 2]

#### 开通主页 ####

当我们开通权限成功后

1.  下载/更新最新版微信开发者工具
2.  进入云开发 IDE 控制台

![87698202307271411424067.png][]

3.选择「更多」中的「管理工具」

![da989202307271411598452.png][]

4.打开后会提示是否打开微搭低代码插件提示，选择「允许」

![4dc8e202307271412176926.png][]

#### 模板体验 ####

从这一步开始就已经正式进入管理工具了，首先可以看到的就是模板页面，目前已经内置了常用的模板，需要那个模板点击「查看/安装工具」即可。

> 这让我感觉这就像手机系统上的App市场，需要什么就安装什么，只要模板足够多那么开发者使用起来能提升不少效率，开发成本可以得到极大的提升。如果这个模板市场可以支持开发者接入发布，类似 App 开发者自由发布 App 市场一样，还可以做付费模板，那么想象空间还是很大的。

![5a7b1202307271412349216.png][]

我先选择一个轮播图管理测试下效果。

![23a06202307271412463408.png][]

> 提示：首次加载会比较慢，需要耐心等待下

安装成功后，可以获得管理后台地址和管理员账号密码

![f833c20230727141257147.png][]

复制链接输入账号密码即可进入后台管理

![8f8b9202307271413091674.png][]

管理后台有个简单的 banner 管理后台案例数据  
菜单分别为：轮播图管理、轮播图图片管理

![04600202307271413223400.png][]

如果需要自定义轮播图需要现在图片管理上传图片

![010f2202307271413313301.png][]

然后再到轮播图管理添加

![4d8ce202307271413407210.png][]

那么小程序如何获取数据呢？我们可以回到云开发 IDE 控制台看到数据库多了一张表 cloudbase-sample-banner 里面有三条数据

![cfa9f202307271413507071.png][]

小程序获取数据代码

wx.cloud
          .database()
          .collection("cloudbase-sample-banner")
          .where({
            status: "online",
          })
          .get({
            success: (res) => {
              this.setData({
                banner: res.data,
              });
            },
          });

Copy

#### 编辑模版 ####

那么如果轮播图模版无法满足我们的需求怎么办？  
如：轮播图需要点击可以跳转显示公众号文章，这个时候需要加文章路径字段  
基于以上需求我们来修改一下，首先回到管理工具首页

![53721202307271414071066.png][]

点击轮播图模版查看详情，选择最下方的「编辑工具」

![20917202307271414175696.png][]

在这里可以对管理页面进行「页面设计」

![ba7fe202307271414285659.png][]

所有页面的数据的显示当然离不开数据，第二个菜单就是「数据源」

![9e165202307271414391925.png][]

剩下两个菜单分别是：素材、应用设置，这两个菜单相对比较简单就不做过多介绍。

新增字段需要在「数据源」中找到「添加轮播图」然后点击「编辑」

![8585a202307271414502698.png][]

添加一个入参，path 参数就代表文章路径（编辑轮播图信息操作类似）

![16ee1202307271414592639.png][]

然后还要修改代码，在获取参数和添加参数的地方加上 path 这个属性

![d06ac202307271415095574.png][]

最后点击「方法测试」添加一条数据看下效果

![e353e20230727141518294.png][]

可以通过后台管理页面或云开发 IDE 数据库看到数据已经添加成功

![1e479202307271415285025.png][]

![4445d202307271415348132.png][]

添加方法已经改造完成，接下来就是修改查询方法，选择「查询轮播图列表」然后在「出参」进行添加子集，因为查询数据是多条所以是一个数组，我们要查询显示的是数据里面的对象。（查询轮播图信息操作类似，区别是添加入参而不是子集）

![a6ade202307271415449251.png][]

添加是什么字段显示就是什么样的字段

![6d41a202307271415539895.png][]

数据源部分搞定了！  
接下来就是修改后台管理页面「添加」和「查询」，切换到「页面设计」菜单  
点击「添加轮播图」可以看到它的布局结构一个表单容器里面装了很多组件

![c7a0e202307271416039725.png][]

我们文章路径需要输入，那么可以从上方拖拽一个单行输入组件到布局里面来

![4eb63202307271416128464.png][]

然后修改下显示标题和绑定字段

![30f59202307271416284785.png][]

当我们编辑完成后可以点击右上角「预览」然后点击「实时预览」

![612b2202307271416386076.png][]

这样就可以单独打开 一个窗口进行功能测试，添加修改完成后我们再来修改「列表显示」，选中「数据表格」组件在「列管理」添加 path 路径

![ca8bd202307271416494979.png][]

列表显示效果

![1b82c202307271416583251.png][]

修改完成需要点击右上角「发布」即可同步线上版本后台。

#### 自定义模版 ####

还有一种情况就是目前的模版无法满足业务需求，比如下面这个「云数据库管理」模版，为了通用只能显示json，查询也没办法模糊查询，那么这个时候就需要自定义。

![334ff202307271417075409.png][]

接下来我们自己做个活动列表显示，然后再做个模糊查询，这个需求可以说是最常用的操作了。

#### 接入数据 ####

我们基于「云数据库管理」模版新增一个查询活动列表页面，首先切换到「数据源」点击+号选择「自定义代码」

![333f3202307271417178913.png][]

输入名称和标识点击创建

![21bfc202307271417253106.png][]

添加方法

![008e020230727141734823.png][]

查询代码，其他操作详细可见 [cloudbase node sdk 文档][cloudbase node sdk]

Copy

入参配置：pageSize、pageNo  
出参配置：使用「方法测试」运行测试后再使用出参数映射即可

![f92b4202307271417496443.png][]

#### 数据显示 ####

切换到「页面设计」点击右上角+号

![e23af202307271417599258.png][]

拖拽一个数据表格组件到布局中

![c0a94202307271418091536.png][]

设置数据表格数据来源

![404c4202307271418328236.png][]

列表中数据就显示出来了，但是我们会发现其中时间字段显示重复了，以及表头是字段名，使用者不一定能看懂。

![d6d4720230727141842947.png][]

我们可以在属性中列管理对不需要的字段进行删除

![1c10c202307271418543307.png][]

还可以修改属性标题，效果如下：

![d7585202307271419069790.png][]

### 建议 ###

1.模版需要更丰富，满足更多开发者场景  
2.自带模版业务思考不够全面，过于简单无法直接  
3.自定义模板操作过于复杂，需要简化，如：自动生成基础增删查改代码

### 相关教程 ###

[官方云开发管理工具教程][Link 3]  
[云开发Node.js SDK API][cloudbase node sdk]  
[微搭组件列表][Link 4]

[CMS]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/extensions/cms/introduction.html
[Link 1]: https://developers.weixin.qq.com/community/develop/article/doc/000a4e68fa80b069755d575f351013
[Link 2]: https://cloud.tencent.com/apply/p/mnu51e0yslf
[87698202307271411424067.png]: https://img-blog.csdnimg.cn/img_convert/cea8a08a92450862cce316cf2d3ec0b7.png
[da989202307271411598452.png]: https://img-blog.csdnimg.cn/img_convert/ac5484961876c2211e5b9be173171ba8.png
[4dc8e202307271412176926.png]: https://img-blog.csdnimg.cn/img_convert/5d5d0897f04ab55931b6df22cf271367.png
[5a7b1202307271412349216.png]: https://img-blog.csdnimg.cn/img_convert/601ea6447d5d91c41d9173cfe3407209.png
[23a06202307271412463408.png]: https://img-blog.csdnimg.cn/img_convert/b9871eb63d8f196f6d1a4e40cc55b976.png
[f833c20230727141257147.png]: https://img-blog.csdnimg.cn/img_convert/7e3b9321e2af5ffe3b2289f311fc657b.png
[8f8b9202307271413091674.png]: https://img-blog.csdnimg.cn/img_convert/b8be799fcffe9b4d46a65dafc8c58f23.png
[04600202307271413223400.png]: https://img-blog.csdnimg.cn/img_convert/1bf4f1f017214a238894e8a3aec775d5.png
[010f2202307271413313301.png]: https://img-blog.csdnimg.cn/img_convert/dc02938599f4c4783b4e76b2c7beec5a.png
[4d8ce202307271413407210.png]: https://img-blog.csdnimg.cn/img_convert/480425b9572b4f4f7ea2d1cc4d1a6162.png
[cfa9f202307271413507071.png]: https://img-blog.csdnimg.cn/img_convert/bc5cf27a6bd2838dfae4e60e6dc141b4.png
[53721202307271414071066.png]: https://img-blog.csdnimg.cn/img_convert/040f711711c23058f51d9827d4363135.png
[20917202307271414175696.png]: https://img-blog.csdnimg.cn/img_convert/973996cc6321549c743393a482426494.png
[ba7fe202307271414285659.png]: https://img-blog.csdnimg.cn/img_convert/cc3fbc83187a7b2e08a7805490ef6e8f.png
[9e165202307271414391925.png]: https://img-blog.csdnimg.cn/img_convert/0e522c9254e5f8af5ca099ed324b5506.png
[8585a202307271414502698.png]: https://img-blog.csdnimg.cn/img_convert/9a9dececfa3a95592e3841c66920f463.png
[16ee1202307271414592639.png]: https://img-blog.csdnimg.cn/img_convert/91945ba7748518f84fc94d0bd3f5fd50.png
[d06ac202307271415095574.png]: https://img-blog.csdnimg.cn/img_convert/00c0eb7f6c5fa407f74c4a47b832d0ef.png
[e353e20230727141518294.png]: https://img-blog.csdnimg.cn/img_convert/3e9d90eafca83ac47fd97a2aca58c2cf.png
[1e479202307271415285025.png]: https://img-blog.csdnimg.cn/img_convert/4ee8f7772136d8d3e16b92ed69456ce2.png
[4445d202307271415348132.png]: https://img-blog.csdnimg.cn/img_convert/fd8d7cb9da1fcc46d1c01e01cad3a4c6.png
[a6ade202307271415449251.png]: https://img-blog.csdnimg.cn/img_convert/234c287d4efaf9f65df4fc41ef73b5f2.png
[6d41a202307271415539895.png]: https://img-blog.csdnimg.cn/img_convert/49b1182fee340dc54f6194c0eda239a1.png
[c7a0e202307271416039725.png]: https://img-blog.csdnimg.cn/img_convert/d6f55716684ae0714d4dadf95c13788a.png
[4eb63202307271416128464.png]: https://img-blog.csdnimg.cn/img_convert/c2d6d86a7b4bc8ed6825d1519b509c54.png
[30f59202307271416284785.png]: https://img-blog.csdnimg.cn/img_convert/dfb76ddd7e57a3a7e9c3dce480910633.png
[612b2202307271416386076.png]: https://img-blog.csdnimg.cn/img_convert/26654a0dd390bb223a9b3276f4aead6c.png
[ca8bd202307271416494979.png]: https://img-blog.csdnimg.cn/img_convert/2d3ff1b5aac2eee44ef82f081e5c3e57.png
[1b82c202307271416583251.png]: https://img-blog.csdnimg.cn/img_convert/302c428f8d6d58ff12f44a970d4b5979.png
[334ff202307271417075409.png]: https://img-blog.csdnimg.cn/img_convert/c4dea7f4a9671d560e810bbc5e6e3d77.png
[333f3202307271417178913.png]: https://img-blog.csdnimg.cn/img_convert/ad5e4a02e7b8af4ab706145d91df0d46.png
[21bfc202307271417253106.png]: https://img-blog.csdnimg.cn/img_convert/c90a65f03bf7c9333435259c87608a3b.png
[008e020230727141734823.png]: https://img-blog.csdnimg.cn/img_convert/76efc9439397a700eb2de0f375e2555b.png
[cloudbase node sdk]: https://docs.cloudbase.net/api-reference/server/node-sdk/introduction
[f92b4202307271417496443.png]: https://img-blog.csdnimg.cn/img_convert/bee7982c30602ef1885f58048b88de31.png
[e23af202307271417599258.png]: https://img-blog.csdnimg.cn/img_convert/3d2ef46f76e6a1ba38addd2611b72162.png
[c0a94202307271418091536.png]: https://img-blog.csdnimg.cn/img_convert/97e97045144226aa87fa5ba8bc258dc6.png
[404c4202307271418328236.png]: https://img-blog.csdnimg.cn/img_convert/82cbcf86066d08cd97dac54b8eb92d09.png
[d6d4720230727141842947.png]: https://img-blog.csdnimg.cn/img_convert/e66eee3366b718ab4deb07a5e1f571f8.png
[1c10c202307271418543307.png]: https://img-blog.csdnimg.cn/img_convert/101539b796d3128227c4657f99d37448.png
[d7585202307271419069790.png]: https://img-blog.csdnimg.cn/img_convert/97c0edc74999e477a29dc01be8ececa1.png
[Link 3]: https://docs.cloudbase.net/toolbox/intro
[Link 4]: https://docs.cloudbase.net/lowcode/components/