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

本文涉及的产品
函数计算FC,每月15万CU 3个月
.cn 域名,1个 12个月
简介: 快速学习小程序云开通和入门(一)

开发者学堂课程【小程序云开发速成小程序云开通和入门(一)】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/300/detail/3504


小程序云开通和入门(一)


内容介绍:

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

二、小程序运营

三、支付宝小程序基础的框架

四、演示开通小程序以及小程序云入门的配置使用

五、使用云数据库

六、使用云函数

七、使用云调用


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

1、环境搭建门槛高  耗时2-5天

客户之声:需要自行找云服务商购买这些能力(服务器,域名/证书/解析等),还要初始化应用环境(比如安装 mysql 和证书),耗时比较高,如果获取这些能力,一键生成域名和证书就好了。

2、部署发布流程复杂  耗时1-4小时

客户之声:不清楚怎么把代码上传到云服务器上进行发布部署,构建应用也很复杂,效率也很低

3、功能开发API开发联调耗时长  耗时2-8小时

客户之声:签约、接口权限、公钥私钥、版本升级踩的坑太多了

在业务开发之后,需要通过一些技术手段,把业务代码上传到服务器上进行发布部署,构建应用包括后期的运维也需要相当的时间。因为涉及前后端的链条,一些后端接口的准备和前端的链条,如果要在小程序中用到,比如支付宝的一些开放能力,签约接口。要准备一些支付宝小程序应用的公钥私钥还要准备一些版本升级的一些工作

怎样更高效更简单的开发小程序呢?

image.png

以前的开发者既要关注代码,比如怎么写前端代码,后代码怎么写,还要关注服务器怎么买缓存文件的存储域名证书负载均衡既要关注服务器、又要关注运维关注设备的稳定性同时还要关注业务代码。

在小程序云开发的模式下面,只需要关注代码怎么写,以及会用到的开放能力的api,不需要再关注运维的一些细节,也不需要关注服务器的开支。


二、小程序运营

image.png

在传统的开发模式下面,以前会关注服务器物理机的一些情况虚拟机的情况容器的情况,在云开发的模式下面云开发的技术平台相当于屏蔽了运维托管的一些细节

完全不需要关注需要买多少台服务器虚拟机的购买情况,以及容器扩充的一些情况。

以前传统的的开放模式当中,要去关注文件存储数据库cdn离线存储一些技术能力定时任务怎么做消息怎么做。在云开发模式下通过后端及服务,通过服务的方式 api 的方式将上面的一些细节提供给开发者

开发者需要用到数据库,通过集成sdk通过api的调用就可以直接调到云上的数据库。包括需要文件存储也是一样的,以前的运维的知识包括流量管控域名内容安全,不用考虑,因为这个是小程序云开发的平台能力。所以在云开发的模式下面,只需要通过一种极简的方式,通过api开箱即用的方式,就可以做到,以前诸多的一些运维细节完全屏蔽需要用到的一些基础能力

 

三、支付宝小程序基础的框架

image.png

1、底层有阿里云的基础设施作为基座,还有蚂蚁的生态能力支付会员基础资金,这样一些能力可以供小程序云进行快捷的调用

2、在核心层就是存储文件,包括容器一些动态伸缩服务引擎函数的计算数据分析安全管控,是通过api,也就是极简的一种集成方式提供

3、在接入层,有提供小程序的开发工具以及id令小程序开发者可以在ide上完所有前端小程序的搭建,包括小程序云业务的一些开发

使用S主要带来研发效率,比如要做一个有一定业务复杂度小程序,它会用到一些后端的能力运用一些后端的业务。

传统可能需要20天左右在类的模式上面,一个前端或者一两个前端平均五天不到就可以做到。安全性方面传统模式需要运维的人员专门关注安全性防御在sof类模式下面,不需要关心为什么,因为架构层面在平台层面已经为开发者屏蔽了这些细节。在业务高峰流量完成之后,它的服务器也会动态的进行缩减,这样也可以让开发者不用操心因为社会有一个特点,所有事都是完全免费的。

从成本来讲,以前需要3-5个人协作开发联调的,一个前端一个全站就可以直接完成了

image.png

收费类时是一个很广的概念,简单的把它理解端服务,简单的理解,就是将云端的能力进行孵化的封装,屏蔽了服务一些复杂的细节。开发者只需要通过sdk就可以一键使用服务能力,这些服务能力就包括了数据库文件存储。

后端介入直接一行代码也可以搞定所有。

 

四、演示开通小程序以及小程序云入门的配置使用

1、首先要准一个入驻支付宝开放平台的一个平台账号,同时要有一个实名认证的阿里云账号,需要下载小程序的开发者工具ide。同时也需要下支付宝开发平台的开发助手,主要配置小程序,这个应用的公钥私钥方面会使用到

扫码登录到开放平台。完成入驻的相关操作,登录上来之后,先要新建一个小程序的应用。填入一些简单的应用信息。

应用完成创建之后在开发的应用详情里面的开发设置去设置接口加签方式,因为会在后续云开发设置里面用到。首先进行加签设置,需要用到一个工具链接里面的开发者助手,可以根据系统平台自行选择

这个工具有一个功能生成应用的公司。点一下生成密钥,用到里面的应用公钥信息。输入密码之后,填入工具生成应用功效信息保存设置。设置成功之后,有一个支付宝公钥,公钥的信息需要保存,应用私钥也要进行保存,因为都会在后续的开发流程当中使用到。完成应用开发之后,打开小程序的ide也是开发工具,选用云开发的入门模板,它在那个模板选取。

入门内幕里面选择那个云开发的模板。数据库的操作以及云存储的操作是通过直接一键调用支付宝,包括阿里云一个开放接口能力。登录创建的小程序账号。

登录之后,创建小程序相关应用点击上面的云开发按钮,开始小程序的开通流程,开通绑定实际上就是使用登录的这个支付宝账号和之前准备好的阿里云账号进行相关的绑定。点击绑定账号,在弹出的一个授权框里面点击同意授权。

image.png

选择绑定已有阿里云账号选择准备好的阿云账号点击同意点击登录并绑定页面上提示云账号和支付宝账号已经绑定成功,点击返回页面。如果已经绑定成功,点击确认

第二步进行授权,授权就是,当前登录的支付宝账号有权限去访问阿里云的账号对应的云开发的资源点击前往授权会弹出一个授权的页面在页面上面点击统一授权

image.png

授权成功之后跳回ide的云控制台,点击确认前两部绑定授权完成,只需要一键点击开通语音,支付宝账所对应的云开发资源已经准备就绪。

上面的一系列流程都是完全免费的也就是说不用花钱去单独购买小程序的云资源,这个时候在跳出的链接里面点击同意那个服务协议,点击立即开通开通完成之后点确认。完成整个的小程序云的一个开通流程,点击进入控制台。

image.png

控制台就是平时在开发小程序过程当中会用到的云控制台,这个云控制弹台上面会提供一些主要的功能一个是服务空间的管理,就是服务控件下面云数据库云存储云调用的开通,以及设置支付宝应用的相关的入口

首先在开通小程序云之后,创建一个服务空间点击创建服务空间点击设置,选择创建服务空间,需要用到设置小程序应用。产生的支付宝公钥以及应用私的两个信息。点击添加必要,然后 api D 需要用到刚才新建的 api D

在开发平台的小程序页面会有相应的显示,包括这个地方的和链接上面都会有。输入api D私钥信息开发助手生成的应用私钥支付宝公钥就是设置成功应用公钥相应的信息设置完成之后,点击确定服务空间设置成功。与之相绑定的开放平台的小程序应用I D相应的设置步骤完成就需要在小程序的代码里面把小程序云的相关设置进行填写。

image.png

首先演示,如果第一次借助小程序云,在模板的选举在入门的tab里面选择第一个 sv 入门 demo入门 demo 会自动生成小程序云类型小程序工程结构以及试体代码。

代码:

import {log} from './utils';

import MPServerless from '@alicloud/mpserverless-sdk';

import cloud from 'alipay-serverless-sdk;

my.serverless = my.serverless | | new MPServerless({

up loadFile:my.uploadFile,

request:my.request,

getAuthCode:my.getAuthCode,

} , {

appId:  替换成你自己的小程序应用 appid ' , / / 小程序应用标识

spaceId: 替换成你自己的服务空间 spaceId ' , / / 服务空间标识

clientSecret:secret'替换成你自己的服务空间 secret ’ ,

/ / 服务空间 secret key

endpoint:'https://api.bspapp.com', / / 服务空间地址,从小程序serverles

});

/ /  必须要初始化哦 ~ cloud 是一个单例,初始化一次 App 引入均可生效

cloud.init(my.serverless);

Appl{

async onLaunch(options){

Log.info('App onLaunch");

/ / 授权登录方法

await my.serverless.user.authorize({

authProvider:'alipay_openapi,

} ) ;

} ,

onShow(options) {

log. info('App onShow ' ) ;

} ] ;

把服务空间的 space I D 点击复制,替换到 a P.J S 对应的初始化的地方,同时需要把服务空间的 secret 信息点击复制,同时粘贴到小程序相关初始化的地方,小程序初始化代码的地方需要替换的信息填写完毕。

完成云开发 sdk 的实例化,并且把这个实例注入到全局变量上下文里面去然后在小程序页面直接引用云开发的 sdk

第二步完成sdk实地化之后,需要用到实地化产生对象。初始化 sdk 云调用的作用之后,在应用初始化的生命周期里面,去调用 sdk 提供的授权方法,这个授权的方法的含义就是授权该小程序能够访问小程序云的所有云开发资源云数据库云存储云调用相关的资源,如果要在小程序使用云开发,这一步是不可避免的,并且授权操作授权的行为是静默的不会弹出授权框让C端的那些用户主动去授权。刚才的代码可以看到,主要是分为三步

初始化 Sdk 实例注入全局变量以及初始化云调用 sdk 以及调用 sns D K 的授权小程序云代码初始化完成之后,就可以在小程序页面以及云行数页面使用相关的能力。首先介绍一个云数据库云数据库就是小程序云,云数据库是托管在云端的一些数据库的实例。它使用的是分布式的文件存储数据库。

bug D B是一个以节省格式存储数据的数据库,数据库里面的每条记录,都是节省格式的对象,一个数据库可以包含多个集合,每个合就相当于关系数据库当中的表云库的操作流程点击 ide 的云控制台,对应的云数据库的T,服务空间下面当前服务空间下面没有任何数据库的集合这个时候点击新建一张表积相当于新建一个数据库的集合,点击数据库的表名新建表成功之后,需要注意一点,设置一下数据库的表权限。

小程序群提供了一套简明的节省语法来控制用户对资源的访问,也就是类似于身份验证体系当中的im体系。每一个新建的数据库库表自动的提供一个默认的权限,规则默认的新建的数据库表是没有操作权限的,要在代码中对这个数据库的表进行写入数据的话点击确定。


五、使用云数据库

标准的小程序云的小程序呢,分为两部分,第一部分就是传统的存放小程序页面以及ui代码的地方,还有一个目录,自动创建的叫server目录,可以理解为我们小程序S的目录,这个目录下面有一个function,也就是云函数的特定的目录。首先要关联一下之前创建的服务空间,刚才创建了云的服务空间,点击关联之后,新建一个云函数。首先就是云函数,可以简单把它理解为一个漏洞,漏了 J S 的一个模块,开发的语法和我们的J S的模块的开发语法完全一致。点击新建一个云函数,可以看到云函数已经新建成功,会有一个云的标记,点击云函数,每一个新建完成的云函数,会自动有入口文件。

在入口文件里面,演示一下怎么用到一些相关能力。在上下文以及对象里面注入了一个名叫 SM ps 的一个实例,这样一个实例,实际上就是包含那个云开发会用到的云数据库、云存储信息获取以及云函数的互调,或者是 atp 这样的一系列的功能集合都在都包含在上下文的 M ps 对象里面。比如去插入一条新建的云数据库的记录,可以看到和后半部分就和我们刚才在小程序端去插入记录的代码完全一致。比如插入一条新用户的签到的一条数据记录的话。就按照数据库的结构设计。简单的写一个在云函数里面插入数据库的一段代码之后,需要进行单独的部署。云函数在新建或者是在进行功能迭代之后,都需要进行一次部署。

部署相当于传统开发过程当中的后端,功能写好,然后再对应的服务器上面进行功能包的部署,在开放模式下面,只需要写完代码。在ide右键直接部署的这一块的云函数的服务端的功能呢,就已经部署部署到了云上,也可以通过小程序,在这个小程序页面进行云函数的一些调用。部署成功之后,在对应的页面进行调用。在小程序段内页面进行调用。在小程序端调用云函数其实和刚才的云数据库操作比较类似,同样是通过全局变量,下面的 serv 也是刚才注入的的sdk实例,然后点方个型方刻性代表的就是云函数的功能集合。参数就可以暂时不用传递,因为在云函数里面是暂时没有接受这个强征序端传过来的参数,先演示一下,最简单的一种调法,也就是不传参去调云函数。也可以看一下是不是已经插入成功。可以看到通过那一段代码插入的一条云数据库的数据。在小程序端,有时候可能会通过一些参数的传递,把这个对应的参数传递到云函数端,然后云函数端再接入参数,之后再进行一些业务的调用,同样演示一下怎么在云函数端接收。

小程序端传过来的参数,把这个例子进行一些更改插入了记录,就会使用到小的一端传过来的一个参数,把这个参数定义为name,当然这个参数也可以是多个。包括用户id也通过参数的形式进行传递U id号两个字段。对这个云函数进行了修改之后同样需要再点一次部署,部署成功就代表云上的服务器的代码已经生效。演示一下怎么把通过参数传递的方式去插入一条指定的数据。比如说现在要插入一条uid,是一个新的序列,操作一下,通过数据库看刚才参阅的结果是,这条最新的记录呢就是刚才通过参数传递的方式,在小程序端调用云函数,然后云函数内部是调用了云数据库的能力,然后通过接受小程序端传过来的参数,插入了一条指定以及指定id的数据。上面主要是展示在云函数里面简单的去调云序库的一些操作,在云函数内部呢,其实可以做很多的事情,比如还可以调到其他的云函数。

先修改一下,比如这个云海处,可以返回一个指定的一个结果进行部署,DB云函数被另外一个云函数调用的那个云函数来,再新建一个可以调用到 D B 二的一个云函数。To do you work 已经创建成功之后,要调到刚才的那个云函数,通过注入到上下文的一个 M ps 的实例。Function 也就是云函数的功能集合,提供了一个方法,叫 in work,提供了两个参数,第一个参数就是要调用的云函数的一个函数名。第二个函数的参数,通过传参方式去调云函数的方法是完全一致的。部署成功之后,调这个云函数。可以把调试器打开或调试器的 let 这个地方,可以看到云开发的这样一些请求。如果在调试过程中遇到问题,同样可以通过这种方式来定位。

那在这个试题里面,实际上就是演示了一下在小程序端调用云函数a,然后云函数a内部又去调了其他的云函数的操作。调用已经成功了,调用返回的结果就是我们刚才被调用的云函数里面去返回的result。这样的一个结果是一种最简单的调法。假如有多个功能啊,第一个功能是每个功能可能比较原子化,在小程序端啊,去调用一个云函数a的时候,这个 a 它可能会去调用其他更原子化的。云函数的一些接口就通过这种方式进行组合。通过极简的方式去使用支付宝的呃,各项开放接口以及阿里云的开放接口。简单来看一下,云调用就提供了两种调用的方式,一种是在云函数中调用,这种方式,它不需要引入任何的依赖,直接使用上下文中注入的实例对象cloud这个对象可以方便的去调用到支付宝和阿里云的开放接口,这是一个简单的一个调用的方式。另外也可以在小程序页面端,通过研究云调用 S T K。然后初始化之后也可以方便的去调到那个各项的开放接口。

相关文章
|
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