支付宝小程序

欢迎来到支付宝小程序开发知识库！

💳 支付宝小程序简介

支付宝小程序是运行在支付宝客户端的轻应用，依托支付宝 8亿+ 月活用户和强大的支付、信用、金融能力，特别适合金融支付、生活服务、政务民生等场景。

🎯 适用场景

✅ 特别适合

金融支付 - 支付、理财、保险
生活服务 - 缴费、充值、订票
政务民生 - 政务服务、社保公积金
商家服务 - 收款、会员、营销
出行服务 - 共享单车、打车、停车
本地服务 - 外卖、家政、维修

💡 优势场景

相比微信小程序，支付宝小程序在以下场景更有优势：

需要支付功能（支付更便捷）
金融相关业务
商家经营工具
政务服务
信用体系应用

🎯 学习路线

第一阶段：基础入门 (3-5天)

前置条件：

如果会微信小程序，1-2天即可上手
如果是新手，需要 3-5天

支付宝小程序基础
- 账号注册（企业/个人）
- 开发工具安装
- 项目结构
AXML & ACSS
- 模板语法
- 样式系统
- 组件使用
JavaScript
- 页面逻辑
- 生命周期
- API 调用

第二阶段：特色功能 (1周)

支付宝特色
- 支付接口
- 芝麻信用
- 会员卡券
开放能力
- 用户授权
- 获取用户信息
- 分享功能

第三阶段：项目实战 (1-2周)

完整项目
- 支付类应用
- 生活服务应用
上线发布
- 审核规则
- 版本管理

✨ 支付宝小程序特点

✅ 核心优势

支付便捷 - 支付宝核心能力，转化率高
信用体系 - 芝麻信用、花呗分期
用户价值高 - 支付宝用户消费能力强
金融生态 - 理财、保险、贷款等场景
商家工具 - 收款、会员、营销工具丰富
流量入口 - 首页、扫一扫、搜索等

⚠️ 注意事项

用户规模小于微信
社交属性弱
主要面向交易和服务
审核较严格（金融相关）

📊 与微信小程序对比

特性	支付宝小程序	微信小程序
月活用户	8亿+	12亿+
核心场景	支付、金融、服务	社交、娱乐、内容
支付体验	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
社交传播	⭐⭐	⭐⭐⭐⭐⭐
用户价值	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
语法	AXML/ACSS	WXML/WXSS
相似度	90%+	-

🔄 与微信小程序的主要差异

1. 文件后缀不同

微信小程序          支付宝小程序
.wxml       →       .axml
.wxss       →       .acss

2. API 前缀不同

javascript

// 微信
wx.request()
wx.getStorageSync()

// 支付宝
my.request()
my.getStorageSync()

3. 生命周期差异

javascript

// 微信
Page({
  onLoad() {},
  onShow() {}
})

// 支付宝（基本一致）
Page({
  onLoad() {},
  onShow() {}
})

4. 组件差异

部分组件名称和属性有差异，但大部分相同。

🏗️ 项目结构

alipay-miniprogram/
├── pages/                  # 页面
│   ├── index/
│   │   ├── index.js       # 页面逻辑
│   │   ├── index.json     # 页面配置
│   │   ├── index.axml     # 页面结构
│   │   └── index.acss     # 页面样式
│   ├── mine/
│   └── order/
├── components/            # 自定义组件
│   └── custom-button/
├── utils/                 # 工具函数
│   ├── util.js
│   └── request.js
├── images/               # 图片资源
├── app.js                # 应用逻辑
├── app.json              # 应用配置
├── app.acss              # 全局样式
└── mini.project.json     # 项目配置

📖 学习资源

官方资源

开发工具

常用组件库

Ant Design Mini - 蚂蚁 UI 组件库

🎯 开始学习

选择一个方向开始深入学习：

👉 基础 - 掌握基础概念
👉 组件 - 学习组件使用
👉 API - 调用支付宝能力
👉 与微信差异 - 快速迁移

💡 学习建议

会微信就会支付宝 - 语法 90% 相似
注册企业账号 - 个人账号权限受限
关注特色能力 - 支付、信用、会员
阅读官方文档 - 文档很完善
了解审核规则 - 金融相关审核严格

🚀 第一个支付宝小程序

创建项目

下载支付宝小程序开发者工具
使用支付宝扫码登录
新建小程序项目

Hello World 示例

html

<!-- pages/index/index.axml -->
<view class="container">
  <text class="title">你好，支付宝小程序！</text>
  
  <text class="counter">计数：{{count}}</text>
  
  <button type="primary" onTap="increment">
    点击 +1
  </button>
  
  <button type="default" onTap="getUserInfo">
    获取用户信息
  </button>
  
  <text class="info">{{userInfo.nickName}}</text>
</view>

javascript

// pages/index/index.js
Page({
  data: {
    count: 0,
    userInfo: {}
  },

  onLoad() {
    console.log('页面加载')
  },

  increment() {
    this.setData({
      count: this.data.count + 1
    })
  },

  getUserInfo() {
    my.getAuthCode({
      scopes: ['auth_user'],
      success: (res) => {
        console.log('授权成功', res.authCode)
        // 使用 authCode 换取用户信息
        this.setData({
          userInfo: {
            nickName: '支付宝用户'
          }
        })
      }
    })
  }
})

css

/* pages/index/index.acss */
.container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 60rpx;
}

.counter {
  font-size: 36rpx;
  margin-bottom: 40rpx;
}

button {
  margin: 20rpx 0;
  width: 300rpx;
}

.info {
  margin-top: 40rpx;
  color: #666;
  font-size: 28rpx;
}

json

// app.json
{
  "pages": [
    "pages/index/index",
    "pages/mine/mine"
  ],
  "window": {
    "defaultTitle": "我的小程序",
    "titleBarColor": "#1677FF"
  },
  "tabBar": {
    "textColor": "#666",
    "selectedColor": "#1677FF",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "name": "我的"
      }
    ]
  }
}

点击"编译"，你的第一个支付宝小程序就运行起来了！🎉

🔧 微信小程序迁移到支付宝

如果你已经有微信小程序，迁移到支付宝很简单：

替换文件后缀：.wxml → .axml，.wxss → .acss
替换 API 前缀：wx. → my.
调整组件差异：个别组件属性不同
适配特殊功能：支付、授权等

迁移成本：一般只需 1-2天即可完成基础迁移。

支付宝小程序 ​

💳 支付宝小程序简介 ​

🎯 适用场景 ​

✅ 特别适合 ​

💡 优势场景 ​

🎯 学习路线 ​

第一阶段：基础入门 (3-5天) ​

第二阶段：特色功能 (1周) ​

第三阶段：项目实战 (1-2周) ​

✨ 支付宝小程序特点 ​

✅ 核心优势 ​

⚠️ 注意事项 ​

📊 与微信小程序对比 ​

🔄 与微信小程序的主要差异 ​

1. 文件后缀不同 ​

2. API 前缀不同 ​

3. 生命周期差异 ​

4. 组件差异 ​

🏗️ 项目结构 ​

📖 学习资源 ​

官方资源 ​

开发工具 ​

常用组件库 ​

🎯 开始学习 ​

💡 学习建议 ​

🚀 第一个支付宝小程序 ​

创建项目 ​

Hello World 示例 ​

🔧 微信小程序迁移到支付宝 ​

支付宝小程序

💳 支付宝小程序简介

🎯 适用场景

✅ 特别适合

💡 优势场景

🎯 学习路线

第一阶段：基础入门 (3-5天)

第二阶段：特色功能 (1周)

第三阶段：项目实战 (1-2周)

✨ 支付宝小程序特点

✅ 核心优势

⚠️ 注意事项

📊 与微信小程序对比

🔄 与微信小程序的主要差异

1. 文件后缀不同

2. API 前缀不同

3. 生命周期差异

4. 组件差异

🏗️ 项目结构

📖 学习资源

官方资源

开发工具

常用组件库

🎯 开始学习

💡 学习建议

🚀 第一个支付宝小程序

创建项目

Hello World 示例

🔧 微信小程序迁移到支付宝