服務器端
在平臺上創建spring boot小程序應用
-
創建小程序
- 登錄 螞蟻金服開放平臺，選擇 開發者中心 > 開發接入 > 小程序(立即接入) > 立即創建 > 創建。
- 填寫 基本信息，點擊 創建 按鈕，創建應用名爲 Demo 小程序。
- PS：一個賬號下最多可以創建10個小程序；未提交過審覈的小程序可以刪除，刪除的小程序不在計數範圍。
-
創建雲應用後端服務
- 在 我的小程序 頁面，選擇剛創建的小程序，點擊 查看，進入 開發管理 頁面。
- 點擊左側導航欄的 雲服務（公測）(申請需要5天)，在 雲服務列表 頁面點擊 創建雲服務 > 創建雲應用。
- 在 創建雲應用 頁面，選擇 SpringBoot 技術棧，填入 應用名稱 和 描述 (選填)，點擊 創建。
-
構建環境
- 返回 雲服務(公測) 頁面，點擊剛創建的雲服務卡片中的 構建環境 按鈕。
- 在 購買環境資源 頁面，選擇合適的環境配置方案，點擊 同意《產品服務協議》 > 確認配置。
說明：此處選擇 小程序雲應用入門（Mysql版），當前測試環境該方案免費提供，但若連續 7 日未部署過代碼，環境會被自動回收。
- 在 確認訂單 頁面，點擊 確認購買。
購買成功後會自動進入 構建環境 頁面。構建過程會耗時幾分鐘，構建成功後，您可以選擇 查看應用詳情 ，或者 返回應用列表 。
IDEA安裝支付寶小程序開發插件
- 到https://github.com/alipay/ali...（建議下載次新）的插件版本（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搜索“ 蘆葦科技 ”或者投放簡歷到 [email protected] 加入我們吧
關注我們，你的評論和點贊對我們最大的支持