- 官方下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
云开发数据模型实战
一、创建空白项目
1-1 首先是创建新项目
需要提前去注册一个属于自己的小程序,必须使用自己的appid,测试号无法创建环境。
1-2 获取appid
登录小程序管理后台,进入开发与服务目录下的开发管理,查看appid获取
1-3 创建项目
填入自己的appid,后端服务默认选择微信云开发
模板选择 全部来源,本次选择不使用模板
数据模型实战
2-1 开通云开发
进入开发者工具以后,云开发目前提供一个月的免费使用。
2-2 开通云后台
进入云开发控制台然后点击云后台或者云模板,开通后进入云后台
到这里只是开通了云后台和云模板,接下来还要继续开通cms
2-3 升级到基础版
默认的套餐只能创建5个数据表,不够我们使用,所以要升级下,选择基础版。
2-4 开通cms内容管理和新版数据管理
点击模板中心,也可以点击我的应用,然后再点击创建应用。
会跳转到微信云开发云后台网页里,需要点击模板中心。
点击模板市场,或者直接点击从模板市场安装
点击管理后台,就可以找到内容管理系统(CMS)
然后点击,可以看到两个选项,老用户可任意选择,新用户可选择使用新版数据管理
打开数据管理面板,直接打开新版数据管理或者内容管理,选择任一入口都可以创建新的数据模型
2-5 创建数据模型
先自己来创建一个数据模型,先从最简单的开始。默认是如下路径
2-5-1 对接已有数据库表并生成数据模型
2-5-2 可选择创建数据并配置数据模型
支持从使用模板创建,目前内置电商、项目管理、进销存、会员管理、博客模板
2-5-3 选择导入存量内容管理CMS模型
这里我们选择从空白创建,然后选择云数据库。
先创建一个good商品表的数据模型
然后点击添加字段
添加一个商品名和商品价格字段,数据类型要选数字
添加完字段以后,点击完成
good数据模型就创建好了
云数据库里也自动多了good表
2-6 在数据模型里添加数据
在数据模型里添加数据有以下几种方式:可以直接点击添加一行。
添加成功后,可以看到数据
可以去云数据库里刷新看到数据
还可以在内容管理里直接新增
在编辑页中,添加成功,提交
提交成功后,可以对内容进行筛选跟排序
也可在原有数据管理中直接修改数据,双击内容区域即可编辑修改
2-7 添加图片和多媒体数据
点开模型,然后点击配置模型,编辑字段
可以看出类型我们可以选择图片和多媒体。而多媒体又包含音视频文件等。
以图片和富文本为例,添加好以后记得点下保存。再去点内容管理,点击商品图片和商品介绍。
提交数据到数据库
数据库里就可以看到这个图片链接和富文本信息。
2-8 自动生成增删改查的代码
数据模型可以自动生成增删改查的代码。点开数据管理,选中一个数据模型,然后点击右上角的展开指引,就可以看到自动生成的代码了。在云函数,小程序,web网页里的增删改查代码都可以自动生成,直接展开使用。
2-9 支持在vue3或者web网页引用
支持web端网页也可以操作云数据库。还是点右上角的展开指引,可以看到web端引入和使用数据模型的代码。
2-9-1 npm安装依赖包
看上面自动生成的代码,要求我们先用npm安装依赖包。我这里以vue3项目为例。在vscode里打开命令行终端
然后执行,等待依赖包下载
2-9-2 引入依赖包请求数据
我们随便找一个页面引入依赖包
然后我们在页面初始化的地方进行云开发数据模型的初始化
运行下vue3项目,可以看到请求到了数据模型里的数据。
打印一条数据试试,看看得到的数据
2-9-4 添加数据
我们不仅可以查询数据,也可以使用自动生成的添加数据的代码。可以看到添加成功。
可看到完整代码如下:
2-10 一键生成数据管理应用
点击内容管理,生成应用
选择数据模型,选择要生成的场景,这里选择增删改查的页面,选择页面布局为无
选择修改为正式数据,点击预览
就可以查看测试发布后的正式应用效果了
点击发布
发布后,先对用户角色权限进行发布,在去配置应用列表展示
选中生成的应用,检查当前用户角色状态,点击发布角色
根据提示在工作台设置的应用管理中开启列表展示
最后,在云后台的的应用管理,可以看到一个基础的中秋月饼礼盒管理应用啦