走进小程序【十】微信小程序【云开发】

简介: 走进小程序【十】微信小程序【云开发】

🌟前言

哈喽小伙伴们,小程序的新星计划在这周也进入了尾声,回顾一个月输出小程序相关文章以来,收获颇多充实了很多;今天这篇文章 接着上篇 将结合官方文档带大家 继续 来了解一下微信小程序的云开发;话不多说,咱们直接开整!🤘


🌟云函数

云函数即在云端(服务器端)运行的函数。在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源;各云函数完全独立;可分别部署在不同的地区。开发者无需购买、搭建服务器,只需编写函数代码并部署到云端即可在小程序端调用,同时云函数之间也可互相调用。


一个云函数的写法与一个在本地定义的 JavaScript 方法无异,代码运行在云端 Node.js 中。当云函数被小程序端调用时,定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作,而且我们还可以通过云函数后端 SDK 搭配使用多种服务,比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作,这部分可参考数据库和存储后端 API 文档。


云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时,云函数的传入参数中会被注入小程序端用户的 openid,开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权,开发者可以直接使用该 openid。


🌟我的第一个云函数

我们以定义一个将两个数字相加的函数作为我们第一个云函数的示例。


在项目根目录找到 project.config.json 文件,新增 cloudfunctionRoot 字段,指定本地已存在的目录作为云开发的本地根目录


示例:

{
   "cloudfunctionRoot": "cloudfunctions/"
}

project.config.json 的其他配置,详见文档


完成指定之后,云开发根目录的图标会变成 “云开发图标”,云函数根目录下的第一级目录(云函数目录)是与云函数名字相同的,如果对应的线上环境存在该云函数,则我们会用一个特殊的 “云图标” 标明

15.png


接着,我们在云函数根目录上右键,在右键菜单中,可以选择创建一个新的 Node.js 云函数,我们将该云函数命名为 add。开发者工具在本地创建出云函数目录和入口 index.js 文件,同时在线上环境中创建出对应的云函数。我们可以看到类似如下的一个云函数模板:

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

云函数的传入参数有两个,一个是 event 对象,一个是 context 对象。event 指的是触发云函数的事件,当小程序端调用云函数时,event 就是小程序端调用云函数时传入的参数,外加后端自动注入的小程序用户的 openid 和小程序的 appid。context 对象包含了此处调用的调用信息和运行状态,可以用它来了解服务运行的情况。在模板中也默认 require 了 wx-server-sdk,这是一个帮助我们在云函数中操作数据库、存储以及调用其他云函数的微信提供的库,关于 wx-server-sdk 的使用我们在另一个章节讲述。


我们修改一下模板的返回值:


// …

exports.main = async (event, context) => {
  // ...
  return {
    sum: event.a + event.b
  }
}

本段代码的意思是将传入的 a 和 b 相加并作为 sum 字段返回给调用端。

在小程序中调用这个云函数前,我们还需要先将该云函数部署到云端。在云函数目录上右键,在右键菜单中,我们可以将云函数整体打包上传并部署到线上环境中。

部署完成后,我们可以在小程序中调用该云函数:


wx.cloud.callFunction({
  // 云函数名称
  name: 'add',
  // 传给云函数的参数
  data: {
    a: 1,
    b: 2,
  },
  success: function(res) {
    console.log(res.result.sum) // 3
  },
  fail: console.error
})

当然,Promise 风格的调用也是支持的:

wx.cloud.callFunction({
  // 云函数名称
  name: 'add',
  // 传给云函数的参数
  data: {
    a: 1,
    b: 2,
  },
})
.then(res => {
  console.log(res.result) // 3
})
.catch(console.error)

在正式的开发中,建议先在本地调试云函数通过后,再上传部署云函数进行正式测试,以保证线上发布的稳定性。使用本地调试的方法是:


1.编写如上云函数代码

2.对云函数目录右键,选择 “启动云函数本地调试”

3.此时应该看到本地调试窗口打开,同时该云函数的 tab 也已打开,如果没有,在左侧列表中选择该函数,双击打开 tab

4.如果右侧的控制面板中的 “开启本地调试” 没有勾选,勾选上,勾选后会开启对该云函数的本地调试,所有模拟器中的请求会请求到本地调试的云函数实例

5.在小程序模拟器中操作,发起对该云函数的调用

6.此时云函数本地实例被触发,可以进行断点等调试操作

那么到这里,我们就成功创建了我们的第一个云函数,并在小程序中成功调用!


🌟获取小程序用户信息

云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时,云函数的传入参数中会被注入小程序端用户的 openid,开发者无需校验 openid 的正确性,因为微信已经完成了这部分鉴权,开发者可以直接使用该 openid。与 openid 一起同时注入云函数的还有小程序的 appid。


从小程序端调用云函数时,开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文(appid、openid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid)。可以写这么一个云函数进行测试:

// index.js
const cloud = require('wx-server-sdk')
exports.main = async (event, context) => {
  // 这里获取到的 openId、 appId 和 unionId 是可信的,注意 unionId 仅在满足 unionId 获取条件时返回
  let { OPENID, APPID, UNIONID } = cloud.getWXContext()
  return {
    OPENID,
    APPID,
    UNIONID,
  }
}

假设云函数命名为 test,本地调试/上传并部署该云函数后,可在小程序中测试调用:

wx.cloud.callFunction({
  name: 'test',
  complete: res => {
    console.log('callFunction test result: ', res)
  }
})
会在调试器看到输出的 res 为如下结构的对象:
{
  "APPID": "xxx",
  "OPENID": "yyy",
  "UNIONID": "zzz", // 仅在满足 unionId 获取条件时返回
}

🌟异步返回结果

经常,我们需要在云函数中处理一些异步操作,在异步操作完成后再返回结果给到调用方。此时我们可以通过在云函数中返回一个 Promise 的方法来完成。

一个最简的 setTimeout 示例:

// index.js
exports.main = async (event, context) => {
  return new Promise((resolve, reject) => {
    // 在 3 秒后返回结果给调用方(小程序 / 其他云函数)
    setTimeout(() => {
      resolve(event.a + event.b)
    }, 3000)
  })
}

假设云函数名字为 test,开启本地调试/上传部署该云函数后,我们可以在小程序端测试调用:

// 在小程序代码中:
wx.cloud.callFunction({
  name: 'test',
  data: {
    a: 1,
    b: 2,
  },
  complete: res => {
    console.log('callFunction test result: ', res)
  },
})

此时应该看到调试器输出:


callFunction test result: 3


🌟云函数本地调试功能

云开发提供了云函数本地调试功能,在本地提供了一套与线上一致的 Node.js 云函数运行环境,让开发者可以在本地对云函数调试,使用本地调试可以提高开发、调试效率:


单步调试/断点调试:比起通过云开发控制台中查看线上打的日志的方法进行调试,使用本地调试后可以对云函数 Node.js 实例进行单步调试/断点调试

集成小程序测试:在模拟器中对小程序发起的交互点击等操作如果触发了开启了本地调试的云函数,会请求到本地实例而不是云端

优化开发流程、提高开发效率:调试阶段不需上传部署云函数,在调试云函数时,相对于不使用本地调试时的调试流程(“本地修改代码 -> 上传部署云函数 -> 调用")的调试流程,省去了上传等待的步骤,改成只需 “本地修改 -> 调用” 的流程,大大提高开发调试效率

同时,本地调试还定制化提供了特殊的调试能力,包括 Network 面板支持展示 HTTP 请求和云开发请求、调用关系图展示、本地代码修改时热重载等等能力,帮助开发者更好的开发调试云函数。功能具体介绍见下方。

建议开发者在开发阶段和上传代码前先使用本地调试测试通过后再上线部署。


🌟使用流程

1. 打开本地调试界面


开发者可通过右键点击云函数名唤起本地调试界面。

image.gif


在本地调试界面中点击相应云函数并勾选【开启本地调试】方可进行该云函数的本地调试。取消勾选【开启本地调试】后可关闭对该云函数的本地调试。


若云函数中有使用使用到 npm 模块,需在云函数本地目录安装相应依赖才可正常使用云函数本地调试功能。在开启本地调试的过程中,系统会检测该云函数本地是否已安装了 package.json 中所指定的依赖,如无会给出警告。


对于已开启本地调试的云函数,微信开发者工具模拟器中的对该云函数的请求、以及其他开启了本地调试的云函数的对该云函数的请求,都会自动请求到该本地云函数实例。


为方便调试,本地调试下,一个云函数在本地仅会有一个实例,实例会串行处理请求,本地云函数递归调用自身将被拒绝。


2. 调试方式


开启了本地调试后,IDE 小程序中所有对开启了本地调试的云函数的请求都会请求到本地云函数,可进行断点调试等操作。除了在 IDE 小程序中触发本地云函数外,还可以在本地调试界面输入请求参数并发起调用。在手动触发的模式下,系统支持两种模拟方式:


从小程序端调用:在云函数内可通过 cloud.getWXContext() 获取调用的微信上下文,包括 OPENID 等字段。

从其他云函数调用:调用时云函数内不带有微信上下文。

本地调试特殊 Feature


1.调用关系图展示

本地调试提供了丰富的执行过程信息。在小程序端调用本地云函数时,会在小程序调试器端展示调用关系图,即小程序调用了哪个本地云函数,随后又该本地云函数调用了哪些本地或云端的云函数。同时,在本地调试面板中各个云函数实例的调试器也会展示该实例发起的对外云函数调用的调用关系图。

image.png

2.Network 面板

即使是在 Node.js 的运行环境,我们也为本地调试环境提供了 Network 面板支持,可以展示在云函数实例中发起的对外 HTTP 请求和云开发请求。

image.pngimage.png


3. 热重载

本地调试云函数实例右侧的面板中可以开启 “文件变更时自动重新加载”,开启后,每当函数代码发生修改,会自动重新加载云函数实例,这就省去了关闭本地调试再重新打开本地调试开关的麻烦。


4. 模板管理

在通过面板手动触发云函数时,开发者需手动输入请求参数。为方便开发者进行模板管理,系统提供了模板的保存、另存为及删除功能。


同时在云函数本地调试界面保存模板时,系统会在小程序本地代码目录下创建cloudfunctionTemplate目录,并新建该云函数的模板文件。开发者也可通过直接修改该模板文件进行模板的管理。

image.png

使用须知

npm 依赖:若云函数中有使用到 npm 模块,需在云函数本地目录安装相应依赖才可正常使用云函数本地调试功能。

npm native 依赖:如果云函数中使用了 native 依赖,注意 native 依赖是需要各个平台分别编译的,比如在 Windows 上本地调试时安装的 native 依赖是 Windows 上编译的结果,而线上云函数环境是 Linux 环境,因此调试完毕上传云函数注意选择云端安装依赖的上传方式,该方式会自动在云端环境下编译 native 依赖,如果由于云端编译环境不足而需要选择全量上传则需要在 Linux CentOS 7 下编译后结果上传。

Node.js 版本:系统默认使用开发者工具自带的 Node.js,用户可通过点击本地调试面板左上方的设置进行修改。

云函数实例个数:本地调试下一个云函数最多只会有一个实例,对本地云函数实例的并发请求会被实例串行处理

运行环境差异

本地调试中的云函数运行环境与线上环境有如下区别:


本地调试中通过 getWXContext 获取的 env 值为 local,也就是不管小程序端指定访问哪个环境的云函数,如果该云函数开启了本地调试,都会被触发,且其中的 getWXContext().env 始终为 local

本地调试中不提供临时存储空间


🌟写在最后

这篇文章给大家讲解了一下在小程序当中如何使用云开发,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

目录
相关文章
|
5天前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
1月前
|
小程序
尝试使用阿里云服务器搭建微信小程序
华北电力大学核工程大一学生,出于对编程的热爱与大创项目需求,涉足微信小程序搭建。初期在实验指导下克服不熟悉编程的困难,但后期发现教程引导不足,尤其是对于代码定位缺乏清晰指引。建议加强网页图像指导,以适应不同编程水平用户,尤其是新手。
尝试使用阿里云服务器搭建微信小程序
|
7天前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
8天前
|
小程序
uni-app——微信小程序设置全局分享
uni-app——微信小程序设置全局分享
23 0
|
1月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
这是一篇关于微信小程序开发的文章摘要,作者介绍了如何创建一个网上花店小程序,旨在提供便捷的购花体验。小程序包含鲜花分类功能,允许用户按品种、颜色和用途筛选,确保快速找到合适的鲜花。它还提供了配送服务,保证鲜花的新鲜度。文章展示了`cash.wxml`、`cash.wxss`和`cash.js`的部分代码,用于实现分类和商品展示,以及`qin.wxml`、`qin.wxss`和`qin.js`,涉及商品详情和购买付款流程。代码示例展示了商品列表渲染和交互逻辑,包括页面跳转、数据传递和点击事件处理。文章最后提到了购买付款界面,强调了安全和便捷的支付体验。
68 0
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
57 7
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
46 7
|
1月前
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
122 0
|
1天前
|
小程序
微信小程序开发---购物商城系统。【详细业务需求描述+实现效果】
这篇文章详细介绍了作者开发的微信小程序购物商城系统,包括功能列表、项目结构、具体页面展示和部分源码,涵盖了从首页、商品分类、商品列表、商品详情、购物车、支付、订单查询、个人中心到商品收藏和意见反馈等多个页面的实现效果和业务需求描述。
微信小程序开发---购物商城系统。【详细业务需求描述+实现效果】
|
1天前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会

热门文章

最新文章