IDEA支付宝小程序开发流程——项目搭建

服务器端

在平台上建立spring boot小程序应用

• 建立小程序

  • 登陆 蚂蚁金服开放平台，选择 开发者中心 > 开发接入 > 小程序(当即接入) > 当即建立 > 建立。
  • 填写 基本信息，点击 建立 按钮，建立应用名为 Demo 小程序。
  • PS：一个帐号下最多能够建立10个小程序；未提交过审核的小程序能够删除，删除的小程序不在计数范围。

• 建立云应用后端服务

  • 在 个人小程序 页面，选择刚建立的小程序，点击 查看，进入 开发管理 页面。
  • 点击左侧导航栏的 云服务（公测）(申请须要5天)，在 云服务列表 页面点击 建立云服务 > 建立云应用。
  • 在 建立云应用 页面，选择 SpringBoot 技术栈，填入 应用名称 和 描述 (选填)，点击 建立。

• 构建环境

  • 返回 云服务(公测) 页面，点击刚建立的云服务卡片中的 构建环境 按钮。
  • 在 购买环境资源 页面，选择合适的环境配置方案，点击 赞成《产品服务协议》 > 确认配置。

  说明：此处选择 小程序云应用入门（Mysql版），当前测试环境该方案免费提供，但若连续 7 日未部署过代码，环境会被自动回收。
  复制代码

  • 在 确认订单 页面，点击 确认购买。 购买成功后会自动进入 构建环境 页面。构建过程会耗时几分钟，构建成功后，您能够选择 查看应用详情 ，或者 返回应用列表 。

IDEA安装支付宝小程序开发插件

• 到https://github.com/alipay/alipay-intellij-plugin/releases下载最新（建议下载次新）的插件版本（alipay-intellij-plugin-v1.x.x.zip）进行下载
• 下载完成后，IDE 中 Preferences (Windows 下为 Settings) => Plugins => Install plugin from disk...，点选已下载的 Zip 包进行安装，依照提示重启 IDE 生效
• 中文乱码解决方法
  • Appearance & Behavior => Appearance => UI Options -> Name 里设置成中文字体，如 微软雅黑（microsoft yahei light）、文泉驿（linux）

建立项目

• 流程 File => New => Project... => Alipay CloudApp => 选择SpringBoot => NEXT => FINISH

• 架构

  

• HelloController.java代码

package com.example.demo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @RequestMapping("/index")
    public IndexVO hello() {
        return new IndexVO("this is my first ali small routine!");
    }
}

复制代码

本地项目和平台的项目相关联

• 在IDEA的小程序云应用视图中点击登陆帐号而后用具备开发者权限的用户扫码受权登陆 PS：添加开发者帐号的方式：个人小程序 =>查看 => 成员管理 => 添加 => 要添加的帐号在客户端找到对应的提示信息并点击确认

• 点击关联应用

  

• 本地构建生成jar

  

• 点击 部署应用 将该打包好的项目 JAR 包部署到测试环境上。

开始部署后，云应用管理 视窗会打出部署日志。部署结束后会有消息提示部署完成。

客户端

• 下载小程序开发者工具并安装

• 打开小程序开发者工具，在菜单中选择 项目 > 新建项目 > 小程序 (选择对应模板) 。填入 项目名称 后，点击 完成，完成项目建立。

  

  

• 编辑page/index/index.axml

  <view>  {{index}}  
    <button onTap="index"> 首页 </button>
  </view>
  
  复制代码

• 编辑page/index/index.js

  Page({
   data: {
     index: 'index'
   },
   onLoad(query) {
     // 页面加载
     console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
   },
   onReady() {
     // 页面加载完成
   },
   onShow() {
     // 页面显示
   },
   onHide() {
     // 页面隐藏
   },
   onUnload() {
     // 页面被关闭
   },
   onTitleClick() {
     // 标题被点击
   },
   onPullDownRefresh() {
     // 页面被下拉
   },
   onReachBottom() {
     // 页面被拉到底部
   },
   onShareAppMessage() {
     // 返回自定义分享信息
     return {
       title: 'ali small routine',
       desc: 'this is my first ali small routine',
       path: 'pages/index/index',
     };
   },
   index() {
     my.httpRequest({
       url: 'https://app2120230256test.mapp-test.xyz/index', // 此处app2120230256test.mapp-test.xyz应修改成SpringBootDemo云应用所在的云服务器域名（云服务(公测) > 环境资源 > 云服务器ECS > 域名> 二级域名）
       complete: (res) => {
     	this.setData({
     	  hello: res.data
     	});
       },
     });
   }
  });
  
  复制代码

• 上传

  

• 上传完毕后，登陆到开放平台提交审核，审核完毕后，小程序便可进行发布操做。

• 调试

  

  

至此，支付宝小程序的搭建流程已完成，感谢各位大神的观看、评价、校订。PS:下一篇将实现受权登陆功能！

成东

广州芦苇科技Java开发团队

芦苇科技-广州专业互联网软件服务公司

抓住每一处细节 ，创造每个美好

关注咱们的公众号，了解更多

想和咱们一块儿奋斗吗？lagou搜索“ 芦苇科技 ”或者投放简历到 server@talkmoney.cn 加入咱们吧

关注咱们，你的评论和点赞对咱们最大的支持