支付宝小程序开发入门教程

1. 支付宝小程序介绍与环境搭建

1.1 支付宝小程序简介

支付宝小程序是支付宝生态内的轻量级应用，无需下载安装即可使用，具有开发成本低、传播速度快、用户体验好等特点。开发者可以通过支付宝开放平台提供的API，调用支付宝的丰富能力，如支付、芝麻信用、生活号等。

支付宝小程序的优势：

• 依托支付宝亿级用户流量，易于获客
• 丰富的商业化能力，如支付、会员、营销等
• 完善的开发工具和文档支持
• 跨平台能力，可同时运行在支付宝和淘宝等App中

1.2 开发环境准备

开发支付宝小程序需要以下工具和环境：

• Node.js环境（推荐v14及以上版本）
• 支付宝小程序开发者工具
• 支付宝账号（用于注册开发者和创建小程序）

1.3 安装Node.js

Node.js是运行JavaScript的环境，支付宝小程序的构建和运行依赖Node.js。

安装步骤：

1. 访问Node.js官网（https://nodejs.org/）
2. 下载LTS版本（长期支持版）
3. 运行安装程序，按照提示完成安装
4. 安装完成后，打开命令行工具，输入node -v和npm -v验证安装是否成功

1.4 下载并安装支付宝小程序开发者工具

支付宝小程序开发者工具是官方提供的集成开发环境，包含代码编辑、调试、预览、发布等功能。

安装步骤：

1. 访问支付宝开放平台（https://open.alipay.com/）
2. 进入"开发者工具"页面，下载对应操作系统的开发者工具
3. 运行安装程序，按照提示完成安装

1.5 注册支付宝开发者账号

在开发和发布支付宝小程序前，需要注册支付宝开发者账号并完成实名认证。

注册步骤：

1. 打开支付宝开放平台，点击右上角"注册"
2. 选择"开发者账号"，使用支付宝扫码登录
3. 按照提示完成开发者信息填写和实名认证

1.6 创建第一个小程序项目

打开支付宝小程序开发者工具，按照以下步骤创建项目：

1. 点击"新建项目"
2. 选择"小程序项目"
3. 填写项目名称、项目路径
4. 选择"官方模板"中的"Hello World"模板
5. 点击"创建"按钮

创建成功后，开发者工具会自动打开项目，并显示预览效果。

2. 第一个支付宝小程序

2.1 项目结构解析

成功创建项目后，来了解一下支付宝小程序的基本项目结构：

alipay-miniprogram-demo/
├── app.js           // 应用入口文件
├── app.json         // 应用配置文件
├── app.acss         // 应用全局样式
├── pages/           // 页面目录
│   └── index/       // 首页目录
│       ├── index.js // 页面逻辑
│       ├── index.json // 页面配置
│       ├── index.axml // 页面结构
│       └── index.acss // 页面样式
├── utils/           // 工具函数目录
└── assets/          // 静态资源目录

主要文件说明：

• app.js：应用的入口文件，用于初始化应用实例
• app.json：应用的全局配置，包括页面路径、窗口表现等
• app.acss：应用的全局样式，作用于所有页面
• 每个页面由四个文件组成：.axml（结构）、.js（逻辑）、.json（配置）、.acss（样式）

2.2 AXML基础语法

AXML是支付宝小程序的页面结构语言，类似于HTML，但增加了一些小程序特有的语法。

基本标签示例：

<!-- 文本标签 -->
<text>Hello World</text>

<!-- 视图容器 -->
<view class="container">
  <text>这是一个视图容器</text>
</view>

<!-- 图片标签 -->
<image src="/assets/logo.png" mode="widthFix" />

<!-- 按钮标签 -->
<button type="primary" onTap="handleClick">点击我</button>

2.3 数据绑定

支付宝小程序使用双大括号{{}}进行数据绑定：

在index.js中定义数据：

Page({
  data: {
    message: 'Hello Alipay Mini Program',
    userInfo: {
      name: '张三',
      age: 25
    },
    isShow: true
  }
});

在index.axml中使用数据：

<!-- 绑定文本 -->
<text>{{ message }}</text>

<!-- 绑定对象属性 -->
<text>姓名：{{ userInfo.name }}</text>
<text>年龄：{{ userInfo.age }}</text>

<!-- 条件渲染 -->
<view a:if="{{ isShow }}">
  这部分内容会根据isShow的值决定是否显示
</view>
<view a:else>
  当isShow为false时显示这部分内容
</view>

<!-- 列表渲染 -->
<view a:for="{{ ['苹果', '香蕉', '橙子'] }}" a:key="*this">
  {{ index }}: {{ item }}
</view>

2.4 事件处理

支付宝小程序中通过onTap等属性绑定事件处理函数：

在index.axml中绑定事件：

<button type="primary" onTap="handleClick">点击我</button>
<text>点击次数：{{ count }}</text>

在index.js中定义事件处理函数：

Page({
  data: {
    count: 0
  },
  handleClick() {
    // 更新数据
    this.setData({
      count: this.data.count + 1
    });
    // 显示提示
    my.showToast({
      content: '按钮被点击了',
      duration: 1500
    });
  }
});

2.5 实战：计数器小程序

来开发一个简单的计数器小程序，功能包括：

• 显示当前计数
• 增加计数按钮
• 减少计数按钮
• 重置计数按钮

完整的index.axml代码：

<view class="container">
  <view class="title">计数器小程序</view>
  <view class="count">{{ count }}</view>
  <view class="buttons">
    <button type="default" onTap="decrement">-</button>
    <button type="primary" onTap="reset">重置</button>
    <button type="default" onTap="increment">+</button>
  </view>
</view>

完整的index.js代码：

Page({
  data: {
    count: 0
  },
  // 增加计数
  increment() {
    this.setData({
      count: this.data.count + 1
    });
  },
  // 减少计数
  decrement() {
    if (this.data.count > 0) {
      this.setData({
        count: this.data.count - 1
      });
    } else {
      my.showToast({
        content: '计数不能小于0',
        type: 'none',
        duration: 1500
      });
    }
  },
  // 重置计数
  reset() {
    this.setData({
      count: 0
    });
    my.showToast({
      content: '已重置',
      duration: 1500
    });
  }
});

完整的index.acss代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
}

.title {
  font-size: 36rpx;
  margin-bottom: 50rpx;
  color: #333;
}

.count {
  font-size: 80rpx;
  font-weight: bold;
  color: #1677ff;
  margin-bottom: 60rpx;
}

.buttons {
  display: flex;
  gap: 30rpx;
}

.buttons button {
  width: 120rpx;
  height: 120rpx;
  font-size: 40rpx;
  padding: 0;
}

.buttons button[type="primary"] {
  background-color: #1677ff;
}

完成后，点击开发者工具中的预览按钮，即可在模拟器中看到效果。