IDEA支付寶小程序開發流程——項目搭建

時間 2019-12-05

原文原文鏈接

服務器端

在平臺上建立spring boot小程序應用

建立小程序前端
- 登陸螞蟻金服開放平臺，選擇開發者中心 > 開發接入 > 小程序(當即接入) > 當即建立 > 建立。
- 填寫基本信息，點擊建立按鈕，建立應用名爲 Demo 小程序。
- PS：一個帳號下最多能夠建立10個小程序；未提交過審覈的小程序能夠刪除，刪除的小程序不在計數範圍。
建立雲應用後端服務java
- 在個人小程序頁面，選擇剛建立的小程序，點擊查看，進入開發管理頁面。
- 點擊左側導航欄的雲服務（公測）(申請須要5天)，在雲服務列表頁面點擊建立雲服務 > 建立雲應用。
- 在建立雲應用頁面，選擇 SpringBoot 技術棧，填入應用名稱和描述 (選填)，點擊建立。
構建環境linux
- 返回雲服務(公測) 頁面，點擊剛建立的雲服務卡片中的構建環境按鈕。
- 在購買環境資源頁面，選擇合適的環境配置方案，點擊贊成《產品服務協議》 > 確認配置。
```
說明：此處選擇 小程序雲應用入門（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 生效
中文亂碼解決方法git
- 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 包部署到測試環境上。

開始部署後，雲應用管理視窗會打出部署日誌。部署結束後會有消息提示部署完成。github

客戶端

下載小程序開發者工具並安裝
打開小程序開發者工具，在菜單中選擇項目 > 新建項目 > 小程序 (選擇對應模板) 。填入項目名稱後，點擊完成，完成項目建立。

編輯page/index/index.axmlweb

<view>  {{index}}  
  <button onTap="index"> 首頁 </button>
</view>

編輯page/index/index.jsspring

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