阿里云上云解决方案：一站式快速开发多平台小程序方案

兵平

本方案使用阿里云多端低代码开发平台魔笔低代码快速搭建适配于微信、支付宝等多平台的小程序，帮助您提升开发效率、降低维护成本。体验本方案预计费用为30元（假设您配置的ECS和RDS与建议规格一致，为按量付费。使用云效基础版、魔笔免费版。方案过程中产生流量在10GB以内。且体验时长不超过24小时。域名、证书、备案费用不包含在内。实际产生费用因规格、版本不同可能产生变化，以控制台显示为准）
<h2>一、通过小程序开发企业移动端入口</h2>

随着移动互联网快速发展，移动端应用是企业获取流量的重要入口。小程序是一种无需下载安装即可使用的移动应用程序，它可以直接在支付宝和微信等平台上运行。得益于这些平台上超过1亿的月活跃用户，小程序的用户年增长率超过20?这种应用形式拥有庞大的用户群体、高使用频率以及出色的传播效率等显著优势。小程序相对于APP、Web网站具有开发成本低、使用成本低和容易获取流量等优势，是企业快速进入移动互联网的优先选择。
以下从开发成本、使用成本和流量获取详细对比小程序、APP和Web网站。





<div class="image-caption">使用成本对比图.png

<h2>二、小程序搭建方案对比</h2>
小程序应用一般由客户端+服务端两部分组成，将小程序部署在不同的平台（支付宝、微信）有助于您扩展更多的获客渠道和使用场景，但由于平台的差异，您需要为不同平台的小程序分别开发客户端应用。







<h2>三、一站式快速开发多平台小程序方案介绍</h2>
本方案使用阿里云多端低代码开发平台魔笔可视化搭建适配于微信和支付宝两个平台的小程序应用客户端。使用云效、云服务器等服务开发可持续构建的服务端应用。最终帮助您的企业快速搭建适用于多平台的小程序应用。





<div class="image-caption">一站式快速开发多平台小程序.png

<h2>四、方案优势</h2>

1、开发效率高
相比传统针对不同平台手动开发多套代码，魔笔的低代码可视化搭建，一次开发导出两套代码，提升了开发效率。

2、维护成本低
通过魔笔一套设计支持两个平台应用，一次修改全量更新，降低维护成本。

3、部署效率高
通过云效搭建持续部署工作流，代码更新一键更新部署到服务器，提升部署效率。
<h2>五、方案部署流程</h2>

01 云资源创建
创建专有网络VPC和交换机、安全组、云服务器ECS实例和云数据库RDS MySQL实例。

02 服务端开发
初始化ECS服务器、创建数据库表、创建云效流水线，开发并部署服务端应用到ECS。

03 客户端搭建
通过魔笔可视化搭建小程序客户端应用，并下载源码运行、测试。

04 小程序域名备案
购买域名、申请域名备案、申请并配置SSL证书。

05 小程序发布
将代码上传到支付宝小程序和微信小程序，提交审核，等待审核通过后发布小程序。
<h2>六、一站式快速开发多平台小程序教程</h2>
在本方案中，您可以使用阿里云多端低代码开发平台魔笔可视化搭建适配于微信和支付宝两个平台的小程序应用客户端，从而减少开发工作量。此外，本方案使用云效、云服务器等服务开发可持续构建的服务端应用。最终帮助您的企业快速搭建适用于多平台的小程序应用。
<h3>1、方案架构</h3>
方案提供的默认设置完成部署后在阿里云上搭建的多平台小程序应用架构如下图所示。





<div class="image-caption">一站式快速开发多平台小程序方案架构.png

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

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

<h3>2、部署准备</h3>
开始部署前，请按以下指引完成账号申请、账号充值。
准备账号

• 如果您还没有阿里云账号，请访问阿里云账号注册页面，根据页面提示完成注册并进行个人实名认证。阿里云账号是您使用云资源的付费实体，因此是部署方案的必要前提。
  
• 为阿里云账号充值。本方案的云资源支持按量付费，且默认设置均采用按量付费引导操作。如果确定任何一个云资源采用按量付费方式部署，账户余额都必须大于等于100元。
  </ol>
  <h3>3、一键部署</h3>
  
  耗时：10分钟
  一键部署基于阿里云资源编排服务ROS（Resource Orchestration Service）实现，ROS模板已定义好脚本，可自动化地完成云资源的创建和配置，提高资源的创建和部署效率。ROS模板完成的内容包括：
  
  操作步骤
  您可以通过下方提供的ROS一键部署链接，来自动化地完成这些资源的创建和配置：
  创建1台云服务器ECS实例。
  创建1个专有网络VPC。
  创建1台交换机。
  创建1个云数据库RDS MySQL。
  
  
  
  • 一键部署资源。
    单击一键部署，在顶部导航栏选择地域。
    在配置页面修改资源栈名称，按需选择和配置参数。
    当资源栈信息页面的状态显示为创建成功时表示一键配置完成。
    </ol>
    <h3>4、部署服务端</h3>
    <h5>创建流水线</h5>
    1.进入云效控制台，按操作步骤创建您的企业，然后选择企业规模。
    
    
    
    
    
    <div class="image-caption">云效控制台.png
    
    2.进入流水线Flow，点击流水线-&gt;我的流水线。
    
    
    
    
    
    <div class="image-caption">我的流水线.png
    
    3.点击右上角新建流水线。在弹出面板中选择Java，顶部选择可视化编排，找到Java构建、部署到阿里云ECS/自有主机流水线。
    4.点击创建流水线，进入流水线配置界面。
    <h5>配置流水线</h5>
    云效支持多种流水线源，如多种代码仓库、已经编译好的代码包、对接Jenkins及另一个流水线的产出物。
    
    1.进入流水线后，在最左侧添加流水线源。
    单击添加流水线源。
    选择流水线源为代码源，选择Codeup。
    点击新建代码仓库。
    在代码管理页面右上角，单击导入库。
    在导入代码库弹出框，选中URL导入，在源代码仓库地址填入https://atomgit.com/aliyun_solution/miniapp-demo.git，单击确定。
    回到流水线源配置页面，选择刚刚创建的代码仓库。并点击添加，完成流水线源的配置。
    
    2.配置Java构建上传。
    单击Java构建上传。
    在右侧配置弹窗内，单击构建物上传，在打包路径下新增一个deploy.sh。
    
    
    
    
    
    
    
    
    3.配置环境变量，您需要将数据库连接地址和账号密码配置到流水线环境变量中。
    在页面顶部导航选中变量和缓存，在页面中字符变量模块单击新增变量。
    
    
    
    
    
    
    
    填入数据库相关信息，并设置成私密模式。相关数据可在数据库控制台，进入数据实例详情页面查看。
    <table>
    <thead>
    <tr>
    <th>变量名称</th>
    <th>默认值</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>APPLETS_RDS_ENDPOINT</td>
    <td>数据库连接地址</td>
    </tr>
    <tr>
    <td>APPLETS_RDS_USER</td>
    <td>数据库用户名</td>
    </tr>
    <tr>
    <td>APPLETS_RDS_PASSWORD</td>
    <td>数据库密码</td>
    </tr>
    <tr>
    <td>APPLETS_RDS_DB_NAME</td>
    <td>数据库名称</td>
    </tr>
    </tbody>
    </table>
    
    4.配置部署任务。
    单击主机部署。
    制品：下拉选择上游构建阶段的产物，如制品名称.Artfacts_xxx。
    主机组：
    
    
    
    • 单击创建主机组，在新建主机组模态框中，填入自定义的主机组名称，然后单击确定。
      
    • 进入主机详情页面，单击添加新主机，添加方式选择阿里云ECS，单击添加服务连接，按照提示完成RAM授权，创建服务连接。
      
    • 地域选择杭州，选择创建的ECS，单击保存。
      
    • 回到刚刚的主机部署页面，主机组选择刚刚创建的主机组。
      
    
    部署脚本填入如下脚本
    
    tar zxvf /home/admin/app/package.tgz -C /home/admin
    sh /home/admin/deploy.sh restart /home/admin/target/miniapp-demo-0.0.1-SNAPSHOT.jar
    单击保存并运行。
    
    5.验证
    登录ECS控制台，在实例列表中找到之前创建的ECS实例，在IP地址列，复制公网IP。
    粘贴到浏览器地址栏访问，看到如下页面表示服务已经正常启动。
    
    
    
    
    
    
    
    <h3>5、小程序端搭建与部署</h3>
    <h5>创建应用</h5>
    1.开通多端低代码开发平台魔笔。
    2.登录魔笔控制台。
    3.在顶部导航栏选择应用管理，单击添加应用。
    4.选择应用类型为 小程序，输入应用名称为待办事项管理平台，选择空白模板。
    
    
    
    
    
    
    
    5.点击确定后，进入应用设计器。
    <h5>搭建应用</h5>
    1.创建导航栏。
    在左侧导航组件中，从布局中拖拽一个容器到页面顶部。
    从文本中拖拽一个文本放置到容器中，在右侧样式设置文字粗细为粗体；字色改为蓝色；对齐方式为中；行高设置为2；文字内容改为TODO List。
    
    
    
    
    
    
    
    2.集成服务端API。
    打开集成管理面板，点击添加连接器，点击 API 集成。
    
    
    
    
    
    
    
    在接口定义面板中，填入API信息，打开调测模式，获取API返回结果。URL使用您后端服务的域名或ECS公网IP。单击测试按钮获取接口数据。
    单击解析为Response Body，将数据解析为接口配置的Response。
    单击保存结构体，将数据保存为结构体。然后单击确定，完成创建。
    
    
    
    
    
    
    
    打开数据模型，点击添加结构体转实体映射。
    
    
    
    
    
    
    
    在弹出的添加面板中，设置名称并选择结构体。
    
    
    
    
    
    <div class="image-caption">选择结构体.png
    
    在跳转后的页面中，单击自动生成映射，选择内存实体，并单击完成。
    
    
    
    
    
    
    
    
    3.配置页面列表。
    左侧菜单，选择页面管理，单击首页，进入首页配置。
    在左侧菜单中，从数据容器拖拽一个List到页面中。
    在右侧配置界面，选择逻辑流。
    
    
    
    
    
    <div class="image-caption">选择逻辑流.png
    
    在选择后端逻辑流、前端逻辑流弹窗，单击添加逻辑流。在添加逻辑流弹窗，设置如下参数。数据模型选择解析的列表data数据。
    
    
    
    
    
    
    
    单击箭头，跳转到逻辑流设计页面，进行配置。
    
    
    
    
    
    <div class="image-caption">逻辑流设计页面.png
    
    展开左侧「其他操作」面板，将「后端调用指定的集成 API」操作拖入主干。鼠标聚焦「后端调用指定的集成 API」节点，并在右侧配置面板中选择之前集成的「查询TODOList」 API 。
    
    
    
    
    
    
    
    在逻辑流中加入结构体对象转实体对象，配置数据转换。
    
    
    
    
    
    
    
    配置查询对象，获取返回结果中的列表数据。
    
    
    
    
    
    
    
    配置结果，设置返回值。
    
    
    
    
    
    
    
    回到首页配置页面，单击一键填充组件，选择要填入的字段。
    
    
    
    
    
    <div class="image-caption">填入的字段.png
    
    通过拖拽调整页面如下。
    
    
    
    
    
    
    
    <h5>发布并下载源码</h5>
    1.在顶部导航栏右侧，单击提交按钮，提交成功后，单击发布。
    2.发布成功后，点击点击查看，跳转到部署信息页面，单击查看环境详情，下载小程序源码到本地。
    
    
    
    
    
    
    
    
    官网相关地址直达：
    1.更多阿里云方案查询：https://www.aliyun.com
    2.阿里云服务器ECS相关活动：https://www.aliyun.com/daily-act/ecs/activity_selection
    3.云小站（代金券发布平台）：https://www.aliyun.com/minisite/goods
    
    
    
    
    
    <div class="image-caption">云小站代金券图.png