IDEA支付寶小程式開發流程——專案搭建

廣州蘆葦科技Java開發團隊發表於2018-12-24

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
   	});
     },
   });
 }
});

複製程式碼