2022年你还不会serverless?看看这篇保姆级教程(中)

本篇主要介绍serverless在小程序云开发的实践

小程序传统开发模式

前后台联调时间有时候更多,等项目上线需要考虑更多运维的问题,买域名买服务器等

image

云开发正在改变小程序的开发模式

云开发是什么

  • 让开发者更专注于业务的开发,在云开发云函数中,我们可以很方便获取小程序用户openId、unionId一些鉴权信息,减轻后台开发量

  • 云开发是一套综合类服务的技术产品,通常开发一个完整的应用(小程序也好,Web、移动应用也好)都需要数据库、存储、CDN、后端函数、静态托管、用户登录等等,但是云开发将这些服务都集成到了一起,而且以一种全新的开发方式,让开发一个应用更加快速、方便、便宜且强大,引领未来技术开发的新趋势。

简单的说,就是云开发是一套综合类服务的技术产品,通常开发一个完整的应用(小程序也好,Web、移动应用也好)都需要数据库、存储、CDN、后端函数、静态托管、用户登录等等,但是云开发将这些服务都集成到了一起,而且以一种全新的开发方式,让开发一个应用更加快速、方便、便宜且强大,引领未来技术开发的新趋势。

image

我们不需要区分那部分是前端那部分是后端,我们只需要调用函数一样去哪里这个流程就可以,云函数也可以在本地调式,调式云函数就像调式我们的代码一样的

云开发优势

  • 快速上线
  • 更加专注我们的业务
  • 独立开发一个完整的小程序,云开发提供非常丰富的接口,我们通过这些接口很方便文件上传等操作
  • 不需要考虑运维等问题,云开发是弹性扩容的
  • 数据更安全

小程序云开发提供哪些基础能力

image

小程序云函数计费

产品定价

img

支持地域

img

免费额度

每个月的免费额度,会在每月开始时刻重置,不会进行累积

img

配额限制说明

img

小程序云开发项目的创建与配置

img

云开发项目初始化

找到云开发的环境ID,点击云开发控制台窗口里的设置图标,在环境变量的标签页找到环境名称和环境ID。

用户在开通云开发之后就创建了一个云开发环境,微信小程序可拥有最多两个环境,每个环境都对应一整套独立的云开发资源,包括数据库、云存储、云函数、静态托管等,各个环境是相互独立的。每个环境都有一个唯一的环境ID(环境名称不唯一)。

img

img

指定开发者工具的云开发环境

当云开发服务开通后,我们可以在小程序源代码cloudfunctions文件夹名看到你的环境名称。如果在cloudfunctions文件夹名显示的不是环境名称,而是“未指定环境”,可以鼠标右键该文件夹,可以看到弹窗的第一项为“当前环境”,有个小三角,在这里可以选择或切换已经建好的云开发环境。如果环境为空白,重启开发者工具,再来选择。

img

指定小程序的云开发环境

在开发者工具中打开源代码文件夹miniprogram里的app.js文件,找到如下代码:

wx.cloud.init({
  // env 参数说明:
  //   env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
  //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
  //   如不填则使用默认环境(第一个创建的环境)
  // env: 'my-env-id',
  traceUser: true,
})
img

在 env: ‘my-env-id’处改成你的环境ID,注意需要填入的是你的环境ID而不是环境名称哦,结果如下:

// 因为云开发可以创建多个环境,比如微信小程序就可以创建两个免费的云开发环境,一个用于测试,一个用于正式发布。如果你没有在小程序端指定环境,会默认选择为你创建的第一个云开发环境。我们可以通过修改env的参数来切换小程序端用来调用的云开发环境。
wx.cloud.init({
  env: 'cloud1-2g12nyjfdh7f4caed9',

  // 云开发能力全局只需要初始化一次即可,这里的traceUser属性设置为true,会将用户访问记录到用户管理中,在云开发控制台的运营分析—用户访问里可以看到访问记录。
  traceUser: true,
})

小程序云开发资源的管理

小程序云开发控制台

img

腾讯云云开发网页控制台

我们还可以使用腾讯云云开发网页控制台来管理云开发资源,需要注意两点,一个是登录方式需要选择其他登录方式里的微信公众号,点击然后使用手机微信扫码,在微信上选择你要登录的小程序;二是要进入腾讯云后台之后切换选择云开发Cloudbase。

image

img

img

其他工具与方式

云开发资源还支持其他方式来调用

  • CloudBase CLI:我们可以使用云开发提供的命令行工具 CloudBase CLI 对云开发环境里面的资源进行批量管理,比如云函数批量下载更新;云存储里面的文件夹批量下载和上传等等;
  • Tencent CloudBase Toolkit:Tencent CloudBase Toolkit是一款Visual Studio Code的云开发插件,使用这个插件可以更好地在本地进行云开发项目开发和代码调试,并且轻松将项目部署到云端;
img

部署并上传云函数

云函数的根目录与云函数目录

cloudfuntions文件夹图标里有朵小云,表示这就是云函数根目录。展开cloudfunctions,我们可以看到里面有login、openapi、callback、echo等文件夹,这些就是云函数目录。而miniprogram文件夹则放置的是小程序的页面文件

cloudfunctions里放的是云函数,miniprogram放的是小程序的页面,这并不是一成不变的,也就是说你也可以修改这些文件夹的名称,这取决于项目配置文件project.config.json里的如下配置项:

"miniprogramRoot":  "miniprogram/",
"cloudfunctionRoot":  "cloudfunctions/",

但是你最好是让放小程序页面的文件夹以及放云函数的文件夹处于平级关系且都在项目的根目录下,便于管理。

云函数部署与上传

  • 右键云函数目录,选择在终端中打开,输入npm install命令下载依赖文件;
  • 然后再右键云函数目录,点击“创建并部署:所有文件”
  • 在云开发控制台–云函数–云函数列表查看云函数是否部署成功。

小程序云函数场景

小程序云开发对比不同方式获取用户信息的应用场景

img

img

img

小程序码

img

图片上传

img

img

云函数路由优化tcb-router

npm i tcb-router
img

img

img

云函数超时时间

img

订阅消息

  • 消息推送位置:服务通知
  • 消息下发条件:用户自主订阅
  • 消息卡片:查看详情可以跳转到小程序页面

使用步骤

1、在微信公众平台上获取消息模板的ID
2、获取下发的权限:

wx.requestSubscribeMessage({
    tmplIds: ['模板ID'],
    success(res) { 
      console.log(res)
    }
  })

subscribeNew: 获取下发消息的权限,由用户自主选择订阅

subscribeNew:function(){
   wx.requestSubscribeMessage({
     tmplIds: ['模板ID'],
     success(res) { 
       console.log(res)
     }
   })
}
img
img

img

img
img
img

3、调用接口下发订阅消息:subscribeMessage.send

这里是云调用订阅消息,首先要创建一个云函数

需要在config.json中配置subscribeMessage.send权限

config.json:

"permissions": {
  "openapi": [
    "openapi.subscribeMessage.send"
  ]
}

云函数编写

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  console.log(event,'sendMessage')
  // 订阅消息推送
  const res = await cloud.openapi.subscribeMessage.send({
    touser: wxContext.OPENID,
    page: `/pages/index/index`,
    lang: 'zh_CN',
    data: {
      name1: {
        value: event.user_name
      },
      thing7: {
        value: event.name
      },
      phone_number5: {
        value: event.phone
      },
      thing6: {
        value: event.xueli
      }
    },
    templateId: 'yXgBDeiRvjIZ98zOA1212CJeCXw8fj09Ir0sNT3ZXI7H0sw', // 模板id
  })
  return res
}
img

当用户订阅消息之后,就可以给用户下发消息了。

<view bindtap="sendNew">发送消息</view>
sendNew:function(){
    wx.cloud.callFunction({
      // 要调用的云函数名称
      name: 'sendNew',
      // 传递给云函数的参数
      data: {
        openid: '',
        theme:"团建",
        address:"xx"
      },
      success: res => {
        console.log(res)
        // output: res.result === 3
      },
      fail: err => {
        console.log(err)
        // handle error
      },
    })
}

最后将云函数上传部署,使用手机测试,成功后,在微信的服务通知就会收到了订阅的消息

img

定时触发器

每天指定时间执行云函数

img

img

云数据库

1. 云数据库获取100条数据突破

img

2. 分页查询数据库

img

3. 模糊查询

img

img

4. 数据权限管理

img

5. 云数据库中1对N关系的三种设计方式

img

img

img

小程序云函数调试

控制台调试

img

img

vscode本地调试

选择“云端函数”列表右侧的 ,向云端函数发送触发事件。

img

我是程序员小月,更多干货在公号「前端进阶之旅」分享

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 142,061评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,947评论 1 255
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 93,744评论 0 211
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,878评论 0 175
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,601评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,696评论 1 175
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,324评论 2 267
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,120评论 0 165
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,921评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,459评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,234评论 2 214
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,558评论 1 226
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,203评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,088评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,460评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,604评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,975评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,460评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,536评论 2 229

推荐阅读更多精彩内容