Mini Program Academy

English

中文

English

中文

Theme

Alipay Mini-Program Platform ​

Alipay Mini-Program is a lightweight application platform developed by Ant Group, allowing users to access services directly within the Alipay app without downloading separate applications. It provides a comprehensive ecosystem for developers to create financial and lifestyle applications.

Platform Overview ​

What is Alipay Mini-Program? ​

Alipay Mini-Program is a sub-application that runs within the Alipay ecosystem. It focuses on providing convenient services, especially in areas like payments, financial services, lifestyle, and business applications.

Key Features ​

  • Instant Access: No download required, accessible through Alipay
  • Payment Integration: Native Alipay payment capabilities
  • Rich APIs: Comprehensive APIs for various business scenarios
  • Security: Enterprise-grade security and compliance
  • Cross-Platform: Runs on iOS and Android devices
  • Business Focus: Optimized for business and service applications
  • Ant Chain Integration: Blockchain technology integration

Development Environment ​

Developer Tools ​

Alipay Mini-Program Studio is the official IDE:

  • Code Editor: Advanced code editing with IntelliSense
  • Real-time Preview: Instant preview and debugging
  • Simulator: Multi-device simulation
  • Performance Tools: Performance analysis and optimization
  • Cloud Services: Integrated cloud development tools

System Requirements ​

  • Operating System: Windows 7+, macOS 10.12+
  • Alipay Version: Latest version recommended
  • Developer Account: Alipay Mini-Program developer account required

Getting Started ​

Registration Process ​

  1. Create Developer Account

  2. Create Mini-Program

    • Login to developer console
    • Create new mini-program application
    • Configure application information
    • Get AppID for development

Development Setup ​

bash
# Download Alipay Mini-Program Studio
# Visit: https://opendocs.alipay.com/mini/ide/download

# Create new project in IDE
# Enter AppID and project details
# Choose template or start from scratch

Project Structure ​

alipay-miniprogram/
├── pages/              # Page files
│   ├── index/
│   │   ├── index.js    # Page logic
│   │   ├── index.json  # Page configuration
│   │   ├── index.axml  # Page structure
│   │   └── index.acss  # Page styles
├── components/         # Custom components
├── utils/              # Utility functions
├── app.js             # App logic
├── app.json           # App configuration
├── app.acss           # Global styles
└── mini.project.json  # Project configuration

Core Technologies ​

AXML (Alipay XML) ​

AXML is Alipay's markup language for building user interfaces:

xml
<!-- Basic structure -->
<view class="container">
  <text class="title">{{title}}</text>
  <button onTap="handleClick">Click Me</button>
</view>

<!-- Conditional rendering -->
<view a:if="{{condition}}">
  <text>Condition is true</text>
</view>
<view a:else>
  <text>Condition is false</text>
</view>

<!-- List rendering -->
<view a:for="{{items}}" a:key="{{item.id}}">
  <text>{{item.name}}</text>
</view>

<!-- Template usage -->
<template name="item-template">
  <view class="item">
    <text>{{name}}</text>
    <text>{{price}}</text>
  </view>
</template>

<template is="item-template" data="{{name: 'Product', price: '¥99'}}"/>

ACSS (Alipay Cascading Style Sheets) ​

ACSS is Alipay's styling language with additional features:

css
/* Global styles */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #f5f5f5;
}

/* Responsive units */
.title {
  font-size: 32rpx;  /* rpx: responsive pixel */
  color: #333;
  margin-bottom: 20rpx;
  font-weight: bold;
}

/* Import styles */
@import "common.acss";

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

JavaScript Logic ​

javascript
// app.js - Application logic
App({
  onLaunch(options) {
    console.log('App launched', options)
    // Initialize app
    this.initializeApp()
  },
  
  onShow(options) {
    console.log('App shown', options)
  },
  
  onHide() {
    console.log('App hidden')
  },
  
  initializeApp() {
    // App initialization logic
    my.getSystemInfo({
      success: (res) => {
        console.log('System info:', res)
        this.globalData.systemInfo = res
      }
    })
  },
  
  globalData: {
    userInfo: null,
    systemInfo: null
  }
})

// page.js - Page logic
Page({
  data: {
    title: 'Hello Alipay',
    items: [],
    loading: false
  },
  
  onLoad(query) {
    console.log('Page loaded with query:', query)
    this.loadData()
  },
  
  onShow() {
    console.log('Page shown')
  },
  
  onReady() {
    console.log('Page ready')
  },
  
  loadData() {
    this.setData({ loading: true })
    
    my.request({
      url: 'https://api.example.com/data',
      method: 'GET',
      success: (res) => {
        this.setData({
          items: res.data,
          loading: false
        })
      },
      fail: (err) => {
        console.error('Request failed:', err)
        this.setData({ loading: false })
      }
    })
  },
  
  handleClick(e) {
    console.log('Button clicked', e)
    my.showToast({
      content: 'Success!',
      type: 'success',
      duration: 2000
    })
  }
})

API Categories ​

Basic APIs ​

Interface APIs ​

javascript
// Show toast
my.showToast({
  content: 'Operation successful',
  type: 'success',
  duration: 3000
})

// Show modal
my.confirm({
  title: 'Confirm',
  content: 'Are you sure to proceed?',
  success: (result) => {
    if (result.confirm) {
      console.log('User confirmed')
    }
  }
})

// Show loading
my.showLoading({
  content: 'Loading...'
})

my.hideLoading()

// Show action sheet
my.showActionSheet({
  items: ['Option 1', 'Option 2', 'Option 3'],
  success: (res) => {
    console.log('Selected index:', res.index)
  }
})
javascript
// Navigate to page
my.navigateTo({
  url: '/pages/detail/detail?id=123'
})

// Redirect to page
my.redirectTo({
  url: '/pages/login/login'
})

// Switch tab
my.switchTab({
  url: '/pages/home/home'
})

// Go back
my.navigateBack({
  delta: 1
})

// Relaunch app
my.reLaunch({
  url: '/pages/index/index'
})

Network APIs ​

javascript
// HTTP request
my.request({
  url: 'https://api.example.com/users',
  method: 'POST',
  data: {
    name: 'John',
    email: 'john@example.com'
  },
  headers: {
    'Content-Type': 'application/json'
  },
  success: (res) => {
    console.log('Request success:', res.data)
  },
  fail: (err) => {
    console.error('Request failed:', err)
  },
  complete: () => {
    console.log('Request completed')
  }
})

// Upload file
my.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: tempFilePath,
  fileName: 'image.jpg',
  fileType: 'image',
  formData: {
    user: 'test'
  },
  success: (res) => {
    console.log('Upload success:', res)
  }
})

// Download file
my.downloadFile({
  url: 'https://example.com/file.pdf',
  success: (res) => {
    console.log('Download success:', res.tempFilePath)
  }
})

Storage APIs ​

javascript
// Synchronous storage
my.setStorageSync({
  key: 'userToken',
  data: 'abc123'
})

const token = my.getStorageSync({
  key: 'userToken'
}).data

my.removeStorageSync({
  key: 'userToken'
})

my.clearStorageSync()

// Asynchronous storage
my.setStorage({
  key: 'userInfo',
  data: {
    name: 'John',
    age: 25,
    preferences: ['music', 'sports']
  },
  success: () => {
    console.log('Storage set successfully')
  }
})

my.getStorage({
  key: 'userInfo',
  success: (res) => {
    console.log('User info:', res.data)
  }
})

Device APIs ​

javascript
// Get system info
my.getSystemInfo({
  success: (res) => {
    console.log('System info:', res)
    console.log('Platform:', res.platform)
    console.log('Version:', res.version)
    console.log('Screen:', res.screenWidth, res.screenHeight)
  }
})

// Get location
my.getLocation({
  type: 1, // 0: wgs84, 1: gcj02
  success: (res) => {
    console.log('Location:', res.latitude, res.longitude)
    console.log('Accuracy:', res.accuracy)
  }
})

// Vibrate
my.vibrate({
  success: () => {
    console.log('Vibration triggered')
  }
})

// Set clipboard
my.setClipboard({
  text: 'Hello Alipay',
  success: () => {
    console.log('Copied to clipboard')
  }
})

// Get clipboard
my.getClipboard({
  success: (res) => {
    console.log('Clipboard content:', res.text)
  }
})

Component Development ​

Custom Components ​

javascript
// components/my-component/my-component.js
Component({
  mixins: [],
  data: {
    count: 0
  },
  props: {
    title: 'Default Title',
    items: []
  },
  didMount() {
    console.log('Component mounted')
  },
  didUpdate() {
    console.log('Component updated')
  },
  didUnmount() {
    console.log('Component unmounted')
  },
  methods: {
    handleTap() {
      this.setData({
        count: this.data.count + 1
      })
      
      // Trigger custom event
      this.props.onCustomEvent && this.props.onCustomEvent({
        count: this.data.count
      })
    },
    
    reset() {
      this.setData({
        count: 0
      })
    }
  }
})
xml
<!-- components/my-component/my-component.axml -->
<view class="my-component">
  <text class="title">{{title}}</text>
  <view class="content">
    <text class="count">Count: {{count}}</text>
    <button onTap="handleTap" class="increment-btn">
      Increment
    </button>
    <button onTap="reset" class="reset-btn">
      Reset
    </button>
  </view>
  <slot></slot>
</view>
json
{
  "component": true,
  "usingComponents": {}
}

Using Custom Components ​

json
{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}
xml
<my-component 
  title="Custom Component" 
  items="{{itemList}}"
  onCustomEvent="handleCustomEvent">
  <text>This is slot content</text>
</my-component>

Advanced Features ​

Alipay Payment Integration ​

javascript
// Request payment
my.tradePay({
  orderStr: 'your_order_string', // From server
  success: (res) => {
    console.log('Payment success:', res)
    // Handle successful payment
  },
  fail: (res) => {
    console.log('Payment failed:', res)
    // Handle payment failure
  }
})

// Check payment result
my.getPaymentResult({
  success: (res) => {
    console.log('Payment result:', res)
  }
})

User Authentication ​

javascript
// Get auth code
my.getAuthCode({
  scopes: ['auth_user'],
  success: (res) => {
    console.log('Auth code:', res.authCode)
    // Send auth code to server for user info
  }
})

// Get user info (requires server-side processing)
my.getOpenUserInfo({
  success: (res) => {
    console.log('User info:', res)
  },
  fail: (res) => {
    console.log('Failed to get user info:', res)
  }
})

Biometric Authentication ​

javascript
// Check biometric support
my.canIUse('startAPVerify', (res) => {
  if (res) {
    // Biometric authentication is supported
    my.startAPVerify({
      businessId: 'your_business_id',
      success: (res) => {
        console.log('Biometric verification success:', res)
      },
      fail: (res) => {
        console.log('Biometric verification failed:', res)
      }
    })
  }
})

Ant Chain (Blockchain) Integration ​

javascript
// Upload data to blockchain
my.uploadDataToBlockchain({
  data: {
    timestamp: Date.now(),
    content: 'Important data',
    hash: 'data_hash'
  },
  success: (res) => {
    console.log('Data uploaded to blockchain:', res)
  }
})

Performance Optimization ​

Best Practices ​

  1. Data Management
    • Use specific data paths in setData
    • Avoid large data objects
    • Implement data pagination
javascript
// Good practice
this.setData({
  'user.name': 'John',
  'list[0].status': 'active'
})

// Avoid
this.setData({
  user: this.data.user,
  list: this.data.list
})

  1. Image Optimization

    • Use appropriate image formats (WebP when supported)
    • Implement lazy loading
    • Compress images before upload

  2. Memory Management

    • Clean up timers and listeners
    • Remove unused data
    • Optimize component lifecycle

Performance Monitoring ​

javascript
// Performance tracking
my.getPerformance({
  success: (res) => {
    console.log('Performance data:', res)
  }
})

// Monitor network performance
my.onNetworkStatusChange((res) => {
  console.log('Network status:', res.isConnected, res.networkType)
})

Testing and Debugging ​

Debugging Tools ​

  1. Console Debugging

    • Use console methods for logging
    • Inspect network requests
    • Monitor performance metrics

  2. Remote Debugging

    • Enable remote debugging in IDE
    • Test on real devices
    • Debug different Alipay versions

Testing Strategies ​

javascript
// Mock data for testing
const mockData = {
  users: [
    { id: 1, name: 'John', status: 'active' },
    { id: 2, name: 'Jane', status: 'inactive' }
  ]
}

// Test function
function testUserFilter() {
  const activeUsers = mockData.users.filter(user => user.status === 'active')
  console.assert(activeUsers.length === 1, 'Should have 1 active user')
  console.log('Test passed: User filter works correctly')
}

Deployment and Publishing ​

Preparation Checklist ​

  1. Code Quality

    • Code review and optimization
    • Performance testing
    • Security audit

  2. Configuration

    • Production environment setup
    • Domain whitelist configuration
    • Version information update

Publishing Process ​

  1. Upload and Submit

    • Upload code using IDE
    • Fill in version information
    • Submit for review

  2. Review Process

    • Alipay team reviews submission
    • Address feedback if any
    • Wait for approval

  3. Release Management

    • Publish approved version
    • Monitor user feedback
    • Plan future updates

Platform Guidelines ​

Design Principles ​

  1. User Experience

    • Follow Alipay design guidelines
    • Maintain visual consistency
    • Optimize for mobile interaction

  2. Business Focus

    • Provide clear value proposition
    • Optimize for business scenarios
    • Ensure transaction security

Content Guidelines ​

  1. Compliance

    • Follow financial regulations
    • Respect user privacy
    • Avoid prohibited content

  2. Quality Standards

    • Provide stable functionality
    • Handle errors gracefully
    • Maintain high performance

Resources and Support ​

Official Resources ​

Community Resources ​

Learning Materials ​

  • Official tutorials and documentation
  • Video courses and workshops
  • Developer conferences and events
  • Community blog posts and articles

Conclusion ​

Alipay Mini-Program platform provides a robust ecosystem for developing business-focused applications with strong payment and financial service integration. Its comprehensive API set, security features, and business-oriented tools make it an excellent choice for developers creating commercial and service applications.

The platform's focus on financial services, combined with its integration with Ant Group's ecosystem, offers unique opportunities for developers to create innovative solutions in fintech, e-commerce, and lifestyle services. By leveraging the platform's strengths and following best practices, developers can build successful applications that serve millions of Alipay users.

Connecting Multiple Platforms, Empowering Innovation

Copyright © 2025 Mini Program Academy