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 加入咱們吧

關注咱們，你的評論和點贊對咱們最大的支持