乐趣区

关于云开发:收纳控福音从0到1用云开发制作物品管理小程序

先上咱们最终应用云开发开发的小程序,小程序码如下:

小程序名字为家物馆,次要用来治理家中物品。波及到用户账号零碎,物品治理,分类及搜寻等性能,应用了云开发的云函数,数据库,存储,CMS 内容治理等能力。

一、疾速开始

如果对云开发不相熟的话,能够先依照官网文档,疾速新建一个云开发的小程序用于参考。文档临时不必看太多,小程序跑起来了就能够(云开发的文档较多,下文会对所波及的内容会给出相应的文档链接)。

因为咱们要开发的小程序波及到数据库、云函数及云存储,接下来将依照这几个局部进行介绍。

二、数据库

2.1 内容管理系统

手写表构造切实是有点慢,而且一不小心还有可能犯错,于是借助了内容管理系统,这能够大大提高工作效率。具体的文档请移步 CloudBase CMS。

应用下面的内容管理系统,咱们既能够方便管理内容模型(留神内容模型的名字不要轻易改,不然内容那块会出问题,所以起名字要谨慎),还能够创立内容。

2.2 云开发面板之数据库

除了下面的内容管理系统,咱们同样还能够在云开发面板的数据库中进行治理。如下图:

除此之外,高级操作还提供了一些数据库操作实例,如下图:

2.3 数据库增删改查

这里先记住操作数据库三步走(具体的实例操作咱们在云函数中持续):

  1. 抉择哪个环境的数据库
const DB = wx.cloud.database({env: 'test' // 哪个环境});
  1. 抉择哪个汇合
const users = DB.collection('users');
  1. 对汇合进行增删改查操作
const user = users.doc('_id');

更详情的文档参考:数据库增删改查 SDK

2.4 文档 ID

在内容管理系统中,文档 ID 属于零碎字段,目前只能主动生成不可自定义。然而有些状况下,咱们还是想能够自定义文档 ID 的,如对立分类的数据。

所幸还有一条路,云开发面板的数据库中是反对自定义的,所以如果真须要自定义的文档 ID,能够间接在云开发面板的数据库中定义。不过云开发面板的数据库自定义 ID 的那个字段输入框,是有长度限度的。

文档 ID 在查问单个数据记录时十分有用,如获取某个用户信息:

// 以 openid 为自定义的文档 ID
// 如果找到则返回该用户信息
// 如果没有找到该用户信息,则示意该用户没有注册。users.doc('openid').get().then((res) => {console.log(res.data) }).catch((e) => {console.log('未注册')});

三、云函数

3.1 实现第一个云函数

首先咱们对着我的第一个云函数文档,实现咱们的第一个云函数。

这外面次要有一个库和两个 API 须要留神:

  • 一个库文档:wx-server-sdk
  • 两个 API 文档:getWXContext(肯定要留神不同的调用形式可能会返回不同的数据)、callFunction

接下来,咱们能够依照云函数的文档,始终看到本地调试。

看完这些之后,咱们就能够正式开始云函数开发了。上面以获取用户云函数为例。

3.2 云函数实战

  1. 咱们首先新建一个 user 云函数(在云函数根目录上右键,在右键菜单中,抉择创立一个新的 Node.js 云函数,命名为 user)。

  1. 装置依赖文件

右键 user 文件夹右键,抉择在内建终端中关上,输出 npm i 命令,装置依赖文件。

  1. 开启云函数本地调试

依赖文件装置实现后,同样右键 user 文件夹,抉择开启云函数本地调试。

关上的云函数本地调试面板如下,留神左边的那个勾选。

  1. 编写云函数

整体代码大略如下(可依据 type 类型判断要申请的数据):

  1. 小程序端调用

先在 app.js 中实现云能力初始化,代码如下:(文档可参考:小程序端云能力初始化文档)。

App({onLaunch() {if (!wx.cloud) {console.error('请应用 2.2.3 或以上的根底库以应用云能力');
    } else {
      wx.cloud.init({
        env: 'cloud1-xxx',
        traceUser: true,
      });
    }
  },
});

在须要的中央调用云函数 user,代码如下:

wx.cloud.callFunction({
  // 云函数名称
  name: 'user',
  // 传给云函数的参数
  data: {type: 'get'},
})
.then(res => {console.log(res.result)
})
.catch(console.error)
  1. 上传并部署

调试开发结束,就能够上传部署了,如下图:

3.3 云函数治理

咱们所有的云函数都能够通过云开发面板中进行治理,如下图:

四、云存储

其实在疾速开始外面,默认创立的小程序外面就有上传图片的一个云开发实例,对着外面的实例抄一遍,把一些信息打印进去看看就会用了。

具体文档参考:文件存储。

当然对于用户上传的图片来说,最好还得有个裁剪的性能,小程序裁剪图片的组件网上也有很多,找个适合本人即可。

对于存储的内容,咱们同样能够通过云开发面板查看,如下图:

五、凋谢数据

云开发还提供了一种新的办法去调用凋谢数据:凋谢数据校验与解密。

上面咱们以获取电话号码为例,具体实战下:

  1. 应用 button 组件,open-typegetPhoneNumber
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
  1. getPhoneNumber 中拿到 cloudID

  1. 编写云函数 user,调用 getOpenData API,次要代码为:
const {type, cloudID} = event;
// 电话号码受权
if (type === 'getPhone') {
  const res = await cloud.getOpenData({list: [cloudID],
  });

  const resPhone = res.list[0].data.phoneNumber;
  return resPhone;
}
  1. 小程序端调用云函数,这样就拿到了电话号码。
wx.cloud.callFunction({
  // 云函数名称
  name: 'user',
  // 传给云函数的参数
  data: {
    type: 'getPhone',
    cloudID, // 这个是下面获取到的 cloudID
  },
})
.then(res => {console.log(res.result)
})
.catch(console.error)

六、总结

总体来说,小程序云开发圆了咱们全栈的梦,一个人一把梭是高兴的,然而摸索的过程中其实也是有挑战的,云开发一直的倒退优化,须要咱们跟紧步调~

文章起源:腾讯 IMWEB 团队

产品介绍

云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、主动弹性扩缩的后端云服务,蕴含计算、存储、托管等 serverless 化能力,可用于云端一体化开发多种端利用(小程序,公众号,Web 利用,Flutter 客户端等),帮忙开发者对立构建和治理后端服务和云资源,防止了利用开发过程中繁琐的服务器搭建及运维,开发者能够专一于业务逻辑的实现,开发门槛更低,效率更高。

开明云开发:https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档:https://cloud.tencent.com/product/tcb?from=12763
技术文档:https://cloudbase.net?from=10004
技术交换群、最新资讯关注微信公众号【腾讯云开发 CloudBase】

退出移动版