云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文

正式开始,这篇很长长长长长长长… 要说什么是云开发,首先得来看看,在没有云开发的时代,身为全栈工程师,我们要掌握并完成哪些前置条件才可以开始写业务。 这一套拳打完,我们可以开始写业务代码了… 可是光写代码还不算呐,你要是真自己一个人干,你还得掌握一堆运维相关的知识……

近期热文

  • 做了一夜动画,就为让大家更好的理解Vue3的Composition Api (获得700+点赞)
  • 一键反编译微信小程序获取源码,并转换为uniapp或taro跨端项目
  • 给1024程序员节献礼“虚拟程序员鼓励师”,摸鱼架构师在此集结!

正式开始,这篇很长长长长长长长

什么是云开发

要说什么是云开发,首先得来看看,在没有云开发的时代,身为全栈工程师,我们要掌握并完成哪些前置条件才可以开始写业务。

  • 一台服务器或虚拟空间
  • 域名(解析、备案、HTTPS证书
  • 安装服务端环境(python/php/nginx/apache/redis/node
  • 数据库(mysql/nosql/mongodb

云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文

这一套打完,我们可以开始写业务代码了…

可是光写代码还不算呐,你要是真自己一个人干,你还得掌握一堆运维相关的知识…

年轻人不讲武德啊

云开发(Serverless)可以让你直接过上面那一堆麻烦

专注于闪电五连鞭的发招..

云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文

啊…不是

云开发可以让我们专注于业务逻辑的开发

微信小程序云开发

微信小程序于2018年末隆重推出微信小程序云开发模式,本人还参加了那一年的WeGeek黑客马拉松,获得了第5名的好成绩…咳咳… 云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文

由于微信生态圈里的独立开发者众多,小程序云开发模式又如此的直击独立开发者的痛点,相信很多开发者都已经在产品中应用云开发了。

云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文

  • 这样的羊毛薅起来不香吗?

开通注意事项

云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文

不可使用测试号,必须自己注册一个Appid。

云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文

新建云开发项目时会默认新建一个云开发的demo项目,里面详细的演示了如何使用云开发的各项能力,大家自己去看文档,这里就不多此一举凑字数了。

微信小程序云开发文档

本文案例

我们利用云开发,做一个画画接龙留言板

留言板UI搭建

云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文

画图

云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文

云存储

  • canvas转临时文件转base64
wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: function (res) {
    wx.cloud.callFunction({
      name:"painterbbs",
      data:{
        act:"post",
        file:wx.getFileSystemManager().readFileSync(res.tempFilePath,"base64")
      },
      success:(result)=>{
        wx.hideLoading();
        console.log(result);
        that.setData({
          painterIsShow: false
        });
      }
    });
  }
})
  • 云函数接收参数并上传到云存储
let res = await cloud.uploadFile({
  cloudPath:"painterbbs/"+wxContext.OPENID+Date.now()+".png",
  fileContent:Buffer.from(event.file, 'base64')
});

云数据库

提交

db.collection("painterbbs").add({
  data:{
    openid:wxContext.openid,
    fileid:res.fileID
  }
});

读取

const res = await db.collection("painterbbs")
  .skip(event.page?event.page:0)
  .limit(10)
  .get();

return res;

删除

const res = await db.collection("painterbbs").doc(event.id).remove();

return res;

源码下载

github.com/ezshine/wxc…

结语

原本我们要做一个这样的功能,要么自己掌握前面写的那一堆麻烦事,要么和后端工程师进行一个配合。现在有了云开发Serverless,我们可以非常轻松的独立完成业务模块。在可以预见到的未来,前端工程师会和后端工程师逐渐融合…

关注大帅搞全栈


云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文

  • 这是我们团队的开源项目 element3
  • 一个支持 vue3 的前端组件库

云开发实战绘图留言板!云开发免费额度香不香? | 🏆 技术专题第七期征文


🏆 技术专题第七期 |万物皆可 Serverless

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/9829.html

(0)
上一篇 2023年 4月 22日 下午9:20
下一篇 2023年 4月 22日 下午9:20

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信