一站式快速开发多平台小程序

更新时间：2024-10-12 23:23:39 共1538人关注

方案概览

在本方案中，您可以使用阿里云多端低代码开发平台魔笔可视化搭建适配于微信和支付宝两个平台的小程序应用客户端，从而减少开发工作量。此外，本方案使用云效、云服务器等服务开发可持续构建的服务端应用。最终帮助您的企业快速搭建适用于多平台的小程序应用。

方案架构

方案提供的默认设置完成部署后在阿里云上搭建的多平台小程序应用架构如下图所示。

本方案相比于传统小程序开发，通过魔笔开发适配于多平台的小程序，可以提升开发效率降低维护成本，通过云效持续构建服务端应用，提升服务部署效率。本方案的技术架构包括以下内容：

应用
- 小程序服务端应用
- 支付宝小程序端应用
- 微信小程序端应用
基础设施和云服务
- 1个专有网络VPC：为云服务器ECS、云数据库 RDS MySQL 等云资源形成云上私有网络。
- 1台交换机：将1台云服务器ECS和1台云数据库RDS连接在同一网络上，实现它们之间的通信，并提供基本的网络分段和隔离功能。
- 1台云服务器ECS：用于部署小程序后端服务。
- 1个云数据库RDS MySQL：为小程序后端服务提供数据服务。
- 云解析DNS：将用户的请求解析到ECS。
- 1个域名：用于为小程序后端程序提供访问域名。
- 多端低代码开发平台魔笔：通过图形化界面可视化地配置应用程序，可导出支持多个平台的小程序代码。
- 云效：一站式 DevOps 平台，支持通过流水线构建持续交付的研发流程。

部署准备

耗时：10分钟

开始部署前，请按以下指引完成账号申请、账号充值。

准备账号

如果您还没有阿里云账号，请访问阿里云账号注册页面，根据页面提示完成注册并进行个人实名认证。阿里云账号是您使用云资源的付费实体，因此是部署方案的必要前提。
为阿里云账号充值。本方案的云资源支持按量付费，且默认设置均采用按量付费引导操作。如果确定任何一个云资源采用按量付费方式部署，账户余额都必须大于等于100元。

一键部署

耗时：10分钟

一键部署基于阿里云资源编排服务ROS（Resource Orchestration Service）实现，ROS模板已定义好脚本，可自动化地完成云资源的创建和配置，提高资源的创建和部署效率。ROS模板完成的内容包括：

操作步骤

您可以通过下方提供的ROS一键部署链接，来自动化地完成这些资源的创建和配置：

创建1台云服务器ECS实例。
创建1个专有网络VPC。
创建1台交换机。
创建1个云数据库RDS MySQL。

一键部署资源。

单击一键部署，在顶部导航栏选择地域。
在配置页面修改资源栈名称，按需选择和配置参数。
当资源栈信息页面的状态显示为创建成功时表示一键配置完成。

部署服务端

耗时：20分钟

创建流水线

配置流水线

首次使用，进入云效控制台，单击立即使用，按操作步骤创建您的企业，选择您的角色之后，点击开始工作。

非首次使用，进入云效控制台，点击新建企业，完成后在操作列点击进入企业。
进入流水线Flow，单击立即新建或右上角新建流水线。

在弹出面板中选择Java，顶部选择可视化编排，找到Java构建、部署到阿里云ECS/自有主机流水线，单击创建，进入流水线配置界面。

部署服务端

耗时：20分钟

创建流水线

配置流水线

首次使用，进入云效控制台，单击立即使用，按操作步骤创建您的企业，选择您的角色之后，点击开始工作。

非首次使用，进入云效控制台，点击新建企业，完成后在操作列点击进入企业。
进入流水线Flow，单击立即新建或右上角新建流水线。
在弹出面板中选择Java，顶部选择可视化编排，找到Java构建、部署到阿里云ECS/自有主机流水线，单击创建，进入流水线配置界面。

搭建应用

创建导航栏。
1. 在左侧导航组件中，从布局中拖拽一个容器到页面顶部。
2. 从文本中拖拽一个文本放置到容器中，在右侧样式设置文字粗细为粗体；字色改为蓝色；对齐方式为中；行高设置为2；文字内容改为TODO List。
集成服务端API。
1. 打开集成管理面板，点击添加连接器，点击 API 集成。
2. 在接口定义面板中，填入API信息，打开调测模式，获取API返回结果。URL使用您后端服务的域名或ECS公网IP。单击测试按钮获取接口数据。
3. 单击解析为Response Body，将数据解析为接口配置的Response。
4. 单击保存结构体，将数据保存为结构体。然后单击确定，完成创建。
5. 打开数据模型，点击添加结构体转实体映射。
6. 在弹出的添加面板中，设置名称并选择结构体。
7. 进入跳转页面后，单击自动生成映射，进入自动生成映射弹窗，单击内存实体，映射完成后，单击完成。
配置页面列表。
1. 左侧菜单，选择页面管理，单击首页，进入首页配置。
2. 在左侧菜单中，从数据容器拖拽一个List到页面中。
3. 在右侧配置界面，选择逻辑流。
4. 在选择后端逻辑流、前端逻辑流弹窗，单击添加逻辑流。在添加逻辑流弹窗，设置如下参数。数据模型选择解析的列表data数据。
5. 单击箭头，跳转到逻辑流设计页面，进行配置。
6. 展开左侧「其他操作」面板，将「后端调用指定的集成 API」操作拖入主干。鼠标聚焦「后端调用指定的集成 API」节点，并在右侧配置面板中选择之前集成的「查询TODOList」 API 。
7. 在逻辑流中加入结构体对象转实体对象，配置数据转换。
8. 配置查询对象，获取返回结果中的列表数据。
9. 配置结果，设置返回值。
10. 回到首页配置页面，单击一键填充组件，选择要填入的字段。
11. 通过拖拽调整页面如下。

在顶部导航栏右侧，单击提交按钮，提交成功后，单击发布。

发布成功后，点击点击查看，跳转到部署信息页面，单击查看环境详情，下载小程序源码到本地。

上传到支付宝小程序审核需要一定时间，您可以在本地安装环境并下载小程序开发工具，进行本地验证。然后再上传到支付宝小程序。

开发支付宝小程序前需要您入驻支付宝开放平台，具体操作请参见开发者入驻。
1. 进入支付宝开放平台注册页根据指引填写信息和提交相应的资料，完成账号申请。
2. 在支付宝开放平台上创建小程序应用，具体操作请参见创建小程序。
说明

您可以通过此账号关联本地开发项目和小程序，上传您的小程序项目到支付宝开放平台。
安装小程序开发环境。
1. 安装Node.js开发环境，请到Node.js页面下载并安装Node.js环境。
2. 下载并安装支付宝小程序开发者工具。详细信息请参见下载说明。
3. 打开小程序开发者工具。
4. 单击加号创建支付宝小程序空白项目。
5. 单击右上角打开项目，打开下载的支付宝小程序源码。
查看运行效果。

上传到微信小程序审核需要一定时间，您可以在本地安装环境并下载小程序开发工具，进行本地验证。然后再上传到微信小程序。

在开发小程序之前，您需要先注册微信小程序。
1. 进入小程序页面，单击前往注册，根据指引填写信息并提交相应的资料，完成账号申请。
2. 使用申请的微信公众平台账号登录小程序后台，单击开发管理> 开发设置，可以看到小程序的AppID，请记录AppID，后续操作中需要使用。
安装小程序开发环境，并运行代码。
1. 安装Node.js开发环境，请到Node.js页面下载并安装Node.js环境。
2. 下载并安装微信小程序开发工具。详细信息请参见开发工具下载。
3. 打开小程序开发工具，使用微信扫码登录。
4. 单击导入，打开下载的微信小程序源码。
5. 配置项目允许访问非HTTPS域名。在顶部配置栏，选择设置>项目设置，在本地设置页签，选中不校验合法域名、web-view（业务域名）、TLS版本一级HTTPS证书。
6. 查看效果。

上传到微信小程序审核需要一定时间，您可以在本地安装环境并下载小程序开发工具，进行本地验证。然后再上传到微信小程序。

在开发小程序之前，您需要先注册微信小程序。
1. 进入小程序页面，单击前往注册，根据指引填写信息并提交相应的资料，完成账号申请。
2. 使用申请的微信公众平台账号登录小程序后台，单击开发管理> 开发设置，可以看到小程序的AppID，请记录AppID，后续操作中需要使用。
安装小程序开发环境，并运行代码。
1. 安装Node.js开发环境，请到Node.js页面下载并安装Node.js环境。
2. 下载并安装微信小程序开发工具。详细信息请参见开发工具下载。
3. 打开小程序开发工具，使用微信扫码登录。
4. 单击导入，打开下载的微信小程序源码。
5. 配置项目允许访问非HTTPS域名。在顶部配置栏，选择设置>项目设置，在本地设置页签，选中不校验合法域名、web-view（业务域名）、TLS版本一级HTTPS证书。
6. 查看效果。

领取免费证书额度。
1. 登录数字证书管理服务控制台。
2. 在左侧导航栏，选择证书管理 > SSL证书管理。
3. 在个人测试证书（原免费证书）页签，单击立即购买。
4. 在立即购买面板，参考下表购买免费证书，仔细阅读并勾选服务协议，单击立即购买并完成支付。
  
  配置项
  
  示例
  
  产品
  
  个人测试证书
  
  证书类型
  
  个人测试证书（免费版）
  
  服务
  
  保持默认
  
  购买数量
  
  保持默认
  
  其他服务
  
  不需要

提交证书申请。

返回个人测试证书（原免费证书）页签，单击创建证书。

在证书申请面板，配置证书参数，选中快捷签发，单击提交审核。

配置项		说明
证书类型		选择个人测试证书（免费版）：证书签发后有效期3个月。
证书剩余数量/总数		表示剩余可申请的证书个数/总共可申请的证书个数。只有当剩余可申请的证书个数不为0时，您才可以创建证书。
域名名称		填写该证书用于保护的网站域名。申请个人测试证书时，此处只可以填写一个单域名，例如，`aliyundoc.com`。重要不支持后缀为特殊词的域名申请个人测试证书。例如`.edu`、`.gov`、`.org`、`.jp`、`.pay`、`.bank`、`.live`、`.nuclear`和`.ru`等等。正式证书无此限制。如果您需要为后缀为特殊词的域名申请证书，您只能申请正式证书。不支持为公网IP申请个人测试证书。仅Globalsign、GeoTrust、vTrus、CFCA品牌的OV单域名证书支持绑定IP。具体操作，请参见购买SSL证书。如需一次操作申请多个域名的证书，需购买正式证书。具体操作请参见购买SSL证书。
数量		证书数量，默认为1，不支持增加。
快捷签发说明快捷签发是指在当前步骤填写证书申请资料并提交审核。	域名验证方式	如果您当前的阿里云账号与域名的DNS云解析服务所在账号一致，申请证书时，阿里云数字证书管理服务将会自动识别，并默认选择自动DNS验证方式，且不支持修改，提交审核后，系统会自动进行DNS验证。如果您当前的阿里云账号与域名的DNS云解析服务所在账号不一致，您可以选择以下任意一种方式进行域名所有权验证。手动DNS验证：您需要手动修改域名的DNS解析记录，并在证书绑定域名的域名控制台，添加一条解析记录用于域名所有权验证。域名授权自动化验证：您需要手动在对应的DNS域名解析服务商，添加一条CNAME类型的解析记录用于域名所有权验证。添加成功后，后续申请对应域名的SSL证书时可以直接选择该方式，且无需再添加域名解析记录。具体操作，请参见域名所有权验证。文件验证：您需要手动从数字证书管理服务控制台下载一个专用的证书验证文件，然后将该文件上传到站点服务器的指定验证目录。
	联系人	从下拉列表中选择本次证书申请的联系人（包含邮箱、手机号码等联系信息）。重要收到证书申请请求后，CA中心会向联系人邮箱发送证书申请验证邮件或者通过联系人手机号码沟通审核相关事宜。因此，请务必确保联系人信息准确且有效。如果您未创建过联系人，可以单击新建联系人，新建一个联系人。数字证书管理服务会保存新建的联系人信息，方便您下次使用。关于新建联系人的具体配置，请参见管理联系人。
	所在地	选择申请人所在城市或地区。
	密钥算法	证书使用的密钥算法。默认选择为RSA，且不支持修改。RSA算法是目前在全球应用广泛的非对称加密算法，兼容性好。
	CSR生成方式	CSR（Certificate Signing Request）文件是您的证书请求文件。该文件包含您的SSL证书信息，例如，证书绑定的域名、证书持有主体的名称及地理位置信息等。您向CA中心提交证书申请时，必须提供CSR。CA中心审核通过您的证书申请后，将使用其根CA私钥为您提供的CSR签名，生成SSL证书公钥（即签发给您的SSL证书）。SSL证书的私钥即您在生成CSR时同时生成的私钥。您可以选择以下CSR生成方式：系统生成：表示由数字证书管理服务自动使用您在密钥算法指定的加密算法生成CSR文件（您可以在证书签发后下载证书和私钥）。推荐您使用该方式。手动填写：表示您是使用OpenSSL或Keytool等工具手动生成的CSR和私钥文件，并将CSR内容复制粘贴到CSR文件内容（私钥文件由您自行保管）。关于如何制作CSR和私钥文件，请参见如何制作CSR文件。重要 CSR生成方式选择手动填写后，您将无法在数字证书管理控制台将该证书部署到阿里云产品中。申请国密算法证书且选择手动填写CSR时，由于私钥不在阿里云，获得的加密证书需要私钥配合完成解密，请您联系私钥生成方协助完成解密工作。您提供的CSR内容正确与否直接关系到证书申请流程是否能顺利完成，建议您使用数字证书管理服务自动生成的CSR（即选择系统生成方式），避免因提供的CSR内容不正确导致证书审核失败。请确保您手动填写的CSR使用的加密算法与密钥算法中选择的算法相同，否则您将无法顺利提交证书审核。如果您不清楚CSR使用的加密算法，您可以通过查看CSR工具查看，具体操作，请参见查看CSR详情。在制作CSR文件时请务必保存好您的私钥文件。私钥和SSL证书一一对应，一旦私钥丢失，您的SSL证书也将不可使用。阿里云不负责保管您的私钥，如果您的私钥丢失，您必须重新购买SSL证书。选择已有的CSR：表示从您在数字证书管理服务控制台创建的CSR或上传的CSR中，选择与证书绑定域名相匹配的CSR。您必须先使用数字证书管理服务提供的CSR管理工具手动创建CSR或上传已有的CSR，才可以使用该方式。具体操作，请参见创建CSR和上传CSR。重要您选择的CSR使用的加密算法需要和您在密钥算法中设置的算法相同，否则您将无法顺利提交证书审核。如果您不清楚CSR使用的加密算法或域名，您可以通过查看CSR工具查看，具体操作，请参见查看CSR详情。
	CSR文件内容	只有在CSR生成方式为手动填写或选择已有的CSR时，需要配置该参数。在此处填写您的CSR文件内容。

按照验证信息中的提示，完成域名所有权的验证。

域名所有权验证成功后，证书通常会在1~2个工作日完成签发，最快10分钟内签发。证书签发后，证书状态将变更为已签发。如果SSL证书长时间未签发，请您检查DNS验证配置是否正确。域名所有权验证更多信息和常见报错，请参见域名所有权验证。

说明

如果您未选中快捷签发，创建证书申请后，您将获得一个证书（对应要申请的证书）。您需要在该证书操作列，单击证书申请，填写证书申请信息并提交审核后，再按照该步骤进行验证。

下载SSL证书。

登录数字证书管理服务控制台。
在左侧导航栏，选择证书管理 > SSL证书管理。
在SSL证书管理页面，定位到目标证书，在操作列，单击下载。
在服务器类型为Nginx的操作列，单击下载。

解压缩已下载的SSL证书压缩包。

根据您在提交证书申请时选择的CSR生成方式，解压缩获得的文件不同，具体如下表所示。

CSR生成方式	证书压缩包包含的文件
系统生成或选择已有的CSR	证书文件（PEM格式）：Nginx支持安装PEM格式的文件，PEM格式的证书文件是采用Base64编码的文本文件，且包含完整证书链。解压后，该文件以`证书ID_证书绑定域名`命名。私钥文件（KEY格式）：默认以证书绑定域名命名。
手动填写	如果您填写的是通过数字证书管理服务控制台创建的CSR，下载后包含的证书文件与系统生成的一致。如果您填写的不是通过数字证书管理服务控制台创建的CSR，下载后只包括证书文件（PEM格式），不包含证书密码或私钥文件。您可以通过证书工具，将证书文件和您持有的证书密码或私钥文件转换成所需格式。转换证书格式的具体操作，请参见证书格式转换。

在ECS实例上安装Nginx服务
1. 登录ECS控制台，在列表操作列单击远程连接，在远程连接模态框，单击通过Workbench远程连接对应的立即登录。
2. 安装nginx
  1. 执行命令安装Nginx。
```
sudo yum update && sudo yum -y install nginx
```
  2. 启动Nginx。
```
sudo systemctl start nginx
```
  3. 执行以下命令，查看Nginx服务的运行状态。
    
    如果回显信息显示Active：active（running）时，表示Nginx已启动。
```
systemctl status nginx
```

在Nginx服务器安装证书。

执行以下命令，在Nginx的conf目录下创建一个用于存放证书的目录。
```
cd /etc/nginx
mkdir cert
```
在顶部导航栏，单击文件，单击打开新文件树。找到/etc/nginx/cert目录，右键打开菜单，单击上传文件。
将证书文件和私钥文件上传到Nginx服务器的证书目录（/etc/nginx/cert）。

编辑Nginx配置文件nginx.conf，修改与证书相关的配置。

执行以下命令，打开配置文件。
```
vim /etc/nginx/nginx.conf
```

删除行首注释符号#，并参考如下示例进行修改。。

    server {
        listen       443 ssl http2;
        listen       [::]:443 ssl http2;
        server_name  _;
        root         /usr/share/nginx/html;

        #填写证书文件绝对路径
        ssl_certificate "/etc/nginx/cert/<cert-file-name>.pem";
        #填写证书私钥文件绝对路径        
        ssl_certificate_key "/etc/nginx/cert/<cert-file-name>.key";
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        ssl_ciphers PROFILE=SYSTEM;
        ssl_prefer_server_ciphers on;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        #error_page 404 /404.html;
            location = /40x.html {
        }

        #error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

粘贴后，按Esc键，输入:x保存并退出编辑。
重启Nginx。
```
nginx -s reload
```

验证SSL证书是否配置成功

证书安装完成后，您可以通过访问证书的绑定域名验证该证书是否安装成功。

如果网页地址栏出现小锁标志，表示证书已经安装成功。

申请域名后，您需要配置域名解析到ECS实例的公网IP，以实现小程序可访问的服务。

登录云解析DNS控制台。
在域名解析页面，权威域名页签下，点击目标域名处的解析设置按钮，进入解析设置页面。

单击添加记录，填写域名解析信息，然后单击确认。

配置项	说明	示例值
记录类型	选择域名指向的类型。此处选择A。	A
主机记录	根据域名前缀填写主机记录。本方案以顶级域名为例，例如`example.com`，输入@。	@
记录值	填写ECS实例的公网ID。	10.0.x.x
TTL	域名的更新周期，保留默认值。	10分钟

完成及清理

耗时：10分钟

清理资源

您可以使用ROS一键删除创建的云资源，避免继续产生费用。

登录ROS控制台。
在左侧导航栏，选择资源栈。
在资源栈页面的顶部选择部署的资源栈所在地域，找到资源栈，然后在其右侧操作列，单击删除。
在删除资源栈对话框，选择删除方式为释放资源，然后单击确定，根据提示完成资源释放。

删除流水线

删除云效的流水线。

进入我的流水线，点击流水线右侧->删除。
删除代码仓库。

若您的示例代码是从atomgit上clone，则可以考虑删除代码仓库。

进入仓库主页，点击左下角的设置->基本设置-> 删除代码库。

后续

如果您期望上线您的小程序，您需要做下面几件事：
1. 在小程序配置后台，配置服务域名。
2. 上传小程序并提交审核，可以参考微信小程序发布上线和支付宝小程序发布上线。
待审核通过后，手动上线小程序，就可以在微信/支付宝客户端中查看和使用小程序了。
为了您的服务安全，建议您使用Web应用防火墙保护您的小程序后端服务。
如果您的应用有静态资源需要存储，如图片、视频等，建议您使用对象存储 OSS 和内容分发网络 CDN存储静态资源并提升访问速度。

一站式快速开发多平台小程序

方案概览

方案架构

准备账号

操作步骤

清理资源

删除流水线

后续

推荐阅读

上云服务

配置项	示例
产品	个人测试证书
证书类型	个人测试证书（免费版）
服务	保持默认
购买数量	保持默认
其他服务	不需要