小程序云开通和入门 | 学习笔记

本文涉及的产品
函数计算FC,每月15万CU 3个月
.cn 域名,1个 12个月
日志服务 SLS,月写入数据量 50GB 1个月
简介: 快速学习小程序云开通和入门

开发者学堂课程【如何实现小程序云开发小程序云开通和入门】学习笔记,与课程紧密连接,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/750/detail/13218


小程序云开通和入门

 

内容介绍:

一.小程序开发现状

二.小程序服务端开发痛点

三.如何更高效更简单开发小程序

四.使用 Serverless 能带来什么

五.架构示例

六.开通小程序云

七.演示

八.使用云数据库

九.使用云调用

 

一、小程序开发现状

首先需要前端开发,前端开发主要是开发小程序的业务代码。然后需要后端开发,需要相关的一些后端接口、相应的后端服务器、后端数据库以及后端文件存储。此外还需要运维人员关注服务器、数据库以及存储的稳定性。这是传统的小程序的开发现状。

 

二、小程序服务端开发痛点

环境搭建门槛高。例如做一个会员报名、抽奖和发奖的流程的小程序,首先需要准备服务器,可以自己准备也可以在阿里云或者其他云服务提供商购买。其次,需要购买域名/证书/解析以及搭建服务器,在服务器上初始化应用环境,还需要安装数据库和证书。这一系列操作至少需要二至五天。业务开发之后,需要通过一些技术手段将业务代码上传服务器进行发布部署、构建应用,包括后期运维,也需要相当的时间。同时涉及后端接口的准备和前后端的联调,包括在小程序中使用例如支付宝的开发能力比如签约、接口,需要准备支付宝小程序的公钥私钥和版本升级,这些都需要相当大的一部分耗时。

 

三、如何更高效更简单开发小程序

以前的开发者需要关注代码,如何写前端代码、后端代码,还要关注购买服务器、缓存文件的存储、域名证书、负载均衡等,即既要关注服务器,要关注运维,要关注设备稳定性,同时还要关注业务代码。如果在小程序云开发的模式下,只需要关注代码以及运用到开发能力的 API,不需要关注运维细节、服务器开支等。

image.png

在传统的开发模式下使用的一些要素与云开发模式的要素的对比中发现,过去会关注服务器、物理机、虚拟机包括容器的情况,在云开发模式下,技术平台相当于屏蔽了这些,不需要关注运维托管的细节、服务器、虚拟机购买情况、容器扩充情况。后端的传统开发模式需要关注文件存储、数据库存储包括 CDN 离线存储以及技术能力。在云开发模式下,云开发平台 Baas 也就是后端即服务,通过服务的方式将上述的一些细节提供给开发者。开发者需要使用的数据库通过集成 SDK、通过 API 的调用,可以直接调到云上数据库。包括文件存储、运维、流量管控、域名、域名安全都不需要考虑,这是小程序云开发平台的能力。所以,在云开发模式下,只需要通过一种极简的方式通过 API 开箱即用的方式就能够做到一些基础能力。这是小程序云的基础的框架,开发者都不需要考虑这些细节,因为底层包括阿里云的基础设施作为基座,还有例如蚂蚁的生态能力、支付宝会员包括资金的一些能力,可以供小程序云进行快捷的调用。

image.png

在核心层,存储文件包括容器这样的一些动态的伸缩服务引擎函数的计算、数据分析、安全管控都是通过 API 极简的集成方式提供。在接入层,提供了一个小程序的开发工具 IDE,开发者可以直接完成前端的搭建包括小程序云开发的一些业务开发,在 IDE 上一个前端就可以实现三至五个前端、后端以及运维需要完成的事情。

image.png

 

四、使用 Serverless 能带来什么?

1. 研发效率

比如做一个具有一定业务复杂度的小程序,会使用到一些后端的能力与业务,传统的可能需要二十天左右,在 Serverless 模式下,只需要平均不到五天。

2. 安全性

传统模式需要运维,专门关注安全性及防御。在 Serverless 模式下不需要,因为在平台层已经为开发者屏蔽了这些细节。

3. 可靠性

平台上会做许多机房的容灾、数据的实时备份,并且在业务流量激增的情况下也会动态的自动的为用到小程序的业务进行服务器的伸缩,在高峰流量完成之后,服务器会动态的进行缩减,还有一个特点就是现在都是完全免费。

4. 成本

从前需要三至五人协作开发联调的工作流程,现在只需要一个前端就可以完成。

5. 便捷的 Baas 基础服务

Serverless 是一个很广的概念,简单理解成 Baas 加 Faas。Baas

(后端即服务),就是将云端的能力进行服务化,进行封装,然后屏蔽服务的一些复杂的细节,开发者只需要通过 SDK 一键使用服务能力,这些服务包括数据库、文件存储和一些定时任务等基本的能力。Faas 可以简单理解为函数即服务,每个函数就是一个服务应用,有一个独立的业务单元,由一个函数组成。在云端的开发过程中开发业务,需要把业务拆解成一个个相对独立的业务单元,以云函数的方式实现。写完代码之后一键部署,不需要关心部署情况包括服务器运营细节。小程序云就是建立在 Serverless 上,结合了支付宝小程序的场景,提供了一个免费的云开发解决方案。

 

五、架构示例

image.png

上图代码完成了通过集成 SDK 访问数据库,获得数据库中相关的数据的一个操作。直接通过 SDK 方式一键使用数据库的 Baas 服务。

image.png

上图代码通过 API 的方式直接调用使用到文件存储的服务。除了 Baas 能力之外,还有包括支付宝、阿里云、淘宝的一些开放能力的开箱即用的功能,在小程序中可以直接通过 SDK 集成的方式,使用代码进行调用。例如支付宝支付接口、二维码的创建接口、红包、转账、阿里云短信包括后期的淘宝的一些开发能力,需要在业务代码中集成所有的生态能力接口,不需要后端介入。

 

六、开通小程序云

1. 支付宝开放平台账号(已入驻)

https://open.alipay.com/playform/home.htm

2. 实名认证的阿里云账号

https://www.aliyun.com/

3. 小程序开发工具 IDE

https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html

4. 支付宝开放平台开发助手

https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html

小程序云开发电子书

https://developer.aliyun.com/article/766426

开通小程序云进行入门配置和使用,首先需要准备一个已入驻的支付宝开放平台账号,同时需要一个实名认证的阿里云账号,需要下载的小程序开发者工具是 IDE,也需要下载一个支付宝开放平台的开发助手,主要使用在配置小程序的应用的公钥私钥方面,此外还提供一个小程序云开发的电子书。

 

七.演示

1. 首先登录支付宝的开放平台

2.新建小程序的应用,填入简单的应用信息

3应用完成创建之后,在开发的应用详情中的开发设置去设置接口加签方式,在后续云开发设置会用到。接口加签设置会使用到链接中的开发者助手,点击生成密钥,用到里面的公钥信息。

image.png

4.进行加签管理,输入密码,填写公钥字符,保存设置。

5.设置成功后,会出现一个支付宝公钥,支付宝公钥信息以及私钥需要保存,在后续中会使用到。

image.png

6.完成应用开发之后,打开小程序的IDE,最好选用云开发的入门模板,在模板选取入门这个类目中选取云开发的模板 Serverless 入门 Demo。这个模板实际上为大家演示了一些数据库的操作以及云存储的操作包括云调用,直接一键调用支付宝和阿里云云开发接口。

image.png

6. 登录小程序开发者工具,登录之后,关联相关应用,点击上面云开发按钮,至此就开始了开通流程:

image.png 

①绑定:支付宝账号与相关阿里云账号进行绑定,点击绑定阿里云账号,在弹出的授权框中,点击同意授权,选择绑定已有的阿里云账号,登录并绑定可以看到以绑定成功页面,点击返回页面,已绑定成功,点击确认。

②授权:授权含义就是授权当前登录的支付宝账号有权限去访问阿里云的账号对应的一些云开发的资源。点击前往授权,在授权页面中,点击同意授权。授权成功之后跳回 IDE 的云控制台,点击确认。

③开通小程序云:前两步完成之后只需一键点击开通小程序云。支付宝账号所对应的云开发资源就已经准备就绪。该一系列流程都是免费的,不需要单独购买小程序云的云资源。在跳出的链接中点击立即开通。开通完成之后,返回小程序云控制台,点击确认。

image.png

④完成:从页面中可以看到已经完成整个开通小程序云的流程,点击进入云控制台。

image.png

7. 云控制台中会提供一些主要的功能:服务空间管理下面的云函数、云数据库、云存储、扩展能力。在创建小程序之后,开通一个服务空间。点击创建服务空间,生成新的服务空间之后击设置,选择刚才创建的服务空间。这里需要用到刚刚产生的支付宝公钥以及应用私钥两个信息。点击添加密钥,AppID 需要用到刚才新建的小程序应用的AppID,在开发平台的小程序页面会有相应的显示。输入 AppID,输入应用私钥、支付宝公钥,点击确定,服务空间成功设置好了开放平台的小程序应用ID。

image.png

8.在小程序代码中将小程序云的相关设置进行填写。

9.在小程序 IDE 点击模板,在打开的编辑器中进行小程序云的配置,点开app.js(小程序应用周期的文件),在模板生成的工程中可以看到会有三步进行小程序云的设置:初始化 MPServerless,在下一段切换之前生成的一些信息包括appID、spaceID(服务空间详情中的spaceID)、clientSecret(服务空间的 SECRET 信息),完成了云开发 SDK 的实例化,将实例注入到 my,后续可以用my.serverless 直接引用云开发的 SDK。在完成了 SDK 实例化之后,需要用到实例化产生的对象初始化云调用 SDK。在应用初始化的生命周期中,调用 SDK 授权的方法,这个方法的含义是授权该小程序能够访问小程序云的云开发资源,包括云数据库、云存储以及云调用的相关资源。授权的操作是必要的,且是静默的。

image.png


八.使用云数据库

云数据库简单来讲就是小程序的云数据库是托管在云端的数据库的实例,使用的是分布式的文件存储,数据库 MongoDB 是一个以 JSON 格式存储数据的数据库,数据库中的每一条记录都是一个 JSON 格式的对象。一个数据库可以包含多个集合,每个集合相当于关系数据库中的表。

操作流程:

点击 IDE 的云控制台对应的云数据库。新建一张数据表,相当于新建一个数据库的集合。新建表成功之后注意需要设置数据库的表权限。小程序提供了简明的 JSON 语法控制用户对资源的访问,类似于身份验证体系的 IM 体系,会为每一个新建的数据表提供默认的权限规则。默认的新建的数据库表,用户没有写的操作权限,如果要在代码中对数据库的表写入数据,需要把 false 改为 true,点击确定。可以建多张表,写入数据的方式有两种,一种是在控制台点击添加记录,每一条记录都是 JSON 格式的数据结构,在数据库IDE控制台中可以直接新建一条用户打卡的数据,包含用户的 ID、用户的名字、打卡报名的时间和其他的字段,点击确定。在数据库 IDE 控制台上可以点击编辑和删除,可以删除掉相关的数据。

image.pngimage.png

在数据云中有两种方式可以使用云数据库,第一种是在小程序页面使用云数据库。云数据库的调用方式实际上是注入在实例化的 SDK 中,可以在小程序页面直接使用 my.serverless.db. collection('test'). insert One(model),表示调用 test 实例,插入一条数据。具体增删改查可以参考 MongoDB 的语法。第二种方法是在云函数端使用云数据库,在云函数端通过上下文注入 mpserverless 实例,通过 db 的语法进行数据库的操作。

image.png

演示:

新增数据:首先定义数据结构,与通过控制台手动添加的数据结构保持一致。假设场景是做用户打卡或者用户签到的一个小程序。每次用户产生签到行为,会有用户名字、ID、签到时间以及签到次数等基本数据,落到数据库中。定义好数据结构之后,用户点击打卡或签到,会通过全局变量注入到 SDK 实例,达到 db 的功能,锁定到 test 数据库中 insertOne 插入一条数据。点击新增记录,新增成功之后,对数据库的表进行了一次查询。

image.png

查询数据:通过 SDK 实例的 collection的 find 方法,可以采用查询参数比如产生的 ID 进行查询。如果不使用参数查询,就会查询所有形成一个列表。

image.png

更新数据:

使用 updateOne 方法进行更新,对 ID 字段进行更新,更新 count 从0至1,点击更新记录,原数据为 count 为0,更新之后 count 字段变为1。

image.png

删除数据:

使用 deleteOne 方法进行删除,通过对象的形式传入到方法中,删除最新一条数据集合,点击删除。

image.png

通过代码执行,可以在控制台看到记录。在电子书文档中提供了常用的数据库操作语法。

云函数简单理解就是一段运行在云端的业务代码,对于开发者只需要编写和上传云函数代码,然后通过调用云函数,可以获得对应的数据结果,开发者不用关心服务器底层运维管理。云函数特性:在云函数内部可以通过 API,也就是注入到上下文的实例去引用数据存储包括文件存储的 API。云函数被小程序端或者其他云函数调用时,可以进行参数传递,参数包含在 ctx.args 的对象中。在云函数端打印日志,ctx.logger 对象可以打印不同类型的日志信息,方便开发者在开发过程中问题的定位或者问题的追溯,打印的日志可以在云函数控制台中日志页面进行查看。同时在云函数注入了一些实用的实例包括 env 获取当前环境参数,通过该环境对象可以获取当前运行的服务空间 ID、调用来源、客户端源IP已经客户端 UserAgent 等信息。在云函数中可以获取当前访问用户的信息。在云函数端通过ctx.mpserverless.db 直接调用云数据库,通过注入的实例调到 db 相关的 API。还可以进行文件的上传,通过注入到上下文的对象进行文件的增加和删除。在小程序端初始化时进行的一段授权的代码,让小程序赋予访问资源的能力,还可以在云函数端通过注入 API 的形式获取当前用户的信息,使用方式就是user.getInfo,然后返回当前登录用户的信息。在云函数还可以调用其他云函数,产生云函数互调的功能,通过注入mpserverless.function.invoke('dataAnalytics',{range:30})调用,第一个参数是云函数名称,第二个参数是通过对象的形式传入需要传递给被调用云函数的参数。如果在云函数内部需要访问 HTTP 的服务,可以通过注入的 httpclient 对象进行 HTTP 请求。

新建云函数演示:

打开 IDE,关联对应 Serverless 的工程中可以看到标准小程序云的程序分为两部分,第一部分是 client,传统的小程序页面代码,还有一个目录是模板自动创建的 server 目录,是小程序 Serverless 的目录,目录下有一个 functions 是云函数特定的目录。首先关联之前创建的服务空间(yuntest),点击关联。点击新建云函数,新建成功的云函数会有一个云的标记。点击云函数的入口文件,在ctx 中注入一个 mpserverless 的实例,为封装开发云数据库云存储以及用户信息获取已经云函数互调或者 httpclient 一系列功能集合,都包含在上下文的mpserverless 对象中。比如插入一条新建的云数据库的记录:

module.exports=async function(ctx){

return await

ctx.mpserverless.db.collection('test').insertOne({

userName:“李二”,

userId:208800009,

count:0

});

};

写入代码之后进行单独的部署,云函数在新建或者功能迭代之后需要进行部署,部署相当于传统开发工作的后端将功能写好然后在对应的服务器进行功能包的部署,在小程序云的开发模式下,只需要写完代码然后在 IDE 右键直接部署。部署成功之后,通过小程序在小程序端页面进行调用。在小程序端调用云函数,通过全局变量 my 下面的serverless.function.invoke 调用(sercerless是实例,function 是功能集合),在云函数中暂时未接受小程序端传递参数。点击开始计算,在控制台云数据库中可以看到插入的数据。

image.png

接收小程序端传递参数演示:

在小程序端可能会通过一些参数的传递,将对应的参数传递到对应的云函数端,云函数端接收参数之后,再进行业务的调用。

将地址进行更改,插入记录使用小程序端传递的参数,将参数定义为 name,参数可以是多个。修改之后点击部署,部署成功,云函数代码生效。通过参数传递插入数据,点击开始计算,在控制台云数据库中可以看到最新的记录。

image.png

云函数互调演示:

修改代码进行部署,新建一个云函数进行调用,创建成功之后,通过注入到上下文的 mpserverless. function.invoke 调用,再进行部署。部署成功之后,在小程序端调云函数,将调试器打开,在NetWork 中可以看到云开发的请求。点击开始计算,可以看到调用成功,调用返回的结果为被调用云函数中的 result结果。

image.png

 

九.使用云调用

云调用是在小程序端和云函数中通过极简的方式使用支付宝以及阿里云的开放接口。云调用提供了两种调用方式,一种是在云函数中调用,不需要引入依赖,直接使用上下文中注入的实例对象。另一种可以在小程序页面端通过引用云调用 SDK,初始化之后即可调用。image.png

在小程序端需要引入 alipy-serverless-sdk依赖,初始化之后可以使用在开放接口的任意地方比如小程序二维码。从前使用支付宝开放接口需要在后端通过开发接入 SDK 再封装成小程序可以调用的请求。通过云调用不需要做任何开发,直接在小程序端通过云调用 SDK,发起云调用请求。在云调用前需要:第一有对应的 SDK,第二开发能力需要在对应的小程序应用中添加对应的功能包。在小程序的代码通过 SDK直接调用小程序二维码,从小程序端发起的云调用请求成功返回。

在云函数端调用,直接通过注入到上下文参数的实例对象 API 直接调用各种开放能力。如果调用的开放能力已经在封装好的 API 中,可以直接调用,如果开放能力不在封装范围之内,没有通过通用接口能力调用。通用接口参数可以在文档中查看。首先新建一个云函数,在云函数端注入的 cloud 实例对象,直接调用支付宝或阿里云开放能力。云函数代码写完之后,进行部署,部署成功之后,注释掉小程序端调用云函数的代码。在 ServiceCall 中组装业务逻辑,可以写入复杂的业务逻辑处理,同时可以做数据库操作。发起请求,成功返回。

相关文章
|
7月前
|
JSON 小程序 JavaScript
微信小程序入门实践
微信小程序入门实践
|
7月前
|
JSON 小程序 前端开发
微信小程序框架(五)-全面详解(学习总结---从入门到深化)
微信小程序框架(五)-全面详解(学习总结---从入门到深化)
281 0
|
7月前
|
存储 缓存 JSON
微信小程序框架(四)-全面详解(学习总结---从入门到深化)
微信小程序框架(四)-全面详解(学习总结---从入门到深化)
221 0
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
60 1
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
46 1
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
117 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
93 0
|
7月前
|
小程序 JavaScript 前端开发
微信小程序云开发入门实践
微信小程序云开发入门实践
|
6月前
|
小程序
微信小程序学习笔记(入门篇)
微信小程序学习笔记(入门篇)
71 0
|
6月前
|
监控 小程序 前端开发
基础入门-抓包技术&HTTPS协议&WEB&封包监听&网卡模式&APP&小程序
基础入门-抓包技术&HTTPS协议&WEB&封包监听&网卡模式&APP&小程序
195 0