HookAll (开发中...)

外观

本页目录

支付宝小程序 ​

支付宝小程序是支付宝自主研发的开放平台，于 2016 年 9 月启动研发。它通过整合支付、信用、金融等核心服务能力，为开发者提供线上线下场景的完整解决方案。作为阿里巴巴商业操作系统的重要组成部分，支付宝小程序凭借其独特的商业和生活服务属性，已成为移动互联网时代连接用户与服务的关键桥梁。

核心概念与定义 ​

支付宝小程序是一种无需下载安装即可使用的轻量级应用，用户通过扫一扫或搜索即可立即使用。它继承了支付宝在商业和生活服务领域的基因，专注于提供与交易、服务、信任密切相关的应用体验。

与传统应用对比：

传统应用：应用商店搜索 → 下载安装 → 占用存储 → 需要手动卸载
支付宝小程序：扫码/搜索 → 立即使用 → 不占存储 → 自动清理

生态定位：

支付宝小程序 = 商业服务 + 生活服务 + 支付宝核心能力
              ↓              ↓             ↓
           交易场景       线下服务     支付/信用/金融

技术架构特点 ​

双线程模型架构 ​

支付宝小程序采用逻辑层与渲染层分离的架构设计，这种双线程模型确保了应用的高性能和安全性。

运行机制：

逻辑层 (App Service)         渲染层 (View)
     ↓                           ↓
独立JavaScript线程            WebView线程
     ↓                           ↓
业务逻辑处理                  界面渲染展示
     ↓                           ↓
─────── 通过Native桥接通信 ────────

多层次技术栈 ​

支付宝小程序的技术架构建立在蚂蚁集团多年的技术积累之上，形成了完整的技术体系。

架构层次：

┌─────────────────────────────────┐
│       支付宝客户端环境            │ ← 提供7大入口场景
├─────────────────────────────────┤
│     小程序核心引擎               │
│  ┌─────────────┐               │
│  │ 前端框架     │ ← 组件/API规范   │
│  ├─────────────┤               │
│  │ 渲染引擎     │ ← JS+Webview    │
│  │             │ ← JS+Native     │
│  ├─────────────┤               │
│  │ JavaScript  │ ← V8引擎优化     │
│  │   引擎       │                │
│  └─────────────┘               │
├─────────────────────────────────┤
│   研发支撑与运维支撑              │ ← 开发者服务
└─────────────────────────────────┘

性能优化机制 ​

支付宝小程序在性能方面做了深度优化，特别是针对冷启动场景的优化措施。

启动优化策略：

传统启动：点击图标 → 下载资源 → 加载框架 → 渲染页面
优化启动：点击图标 → 显示缓存页面 → 后台加载 → 动态合并
                        ↓
                 1秒内显示首页

主要技术特点 ​

商业与服务导向 ​

支付宝小程序与其它平台的最大区别在于其强烈的商业属性和服务导向。它聚焦在商业和生活服务领域，充分发挥支付宝在支付、信用、金融等方面的核心优势。

核心能力整合：

支付宝核心能力
    ↓
┌─支付能力─┼─信用能力─┼─金融能力─┐
↓          ↓          ↓          ↓
交易闭环   芝麻信用   资金管理   会员营销

“718+X”业务模式 ​

支付宝小程序采用独特的“718+X”业务模式，这一模式完整覆盖了用户从发现到留存的全流程。

业务架构示意图：

7大入口：扫一扫、搜索、朋友tab、支付成功页、小程序收藏、生活号、卡包
    ↓
1个闭环：服务 → 拉新 → 留存 → 促活
    ↓
8大能力：支付、信用、金融、营销、物流、定位、溯源、供应链
    ↓
X场景：无限扩展的商业和生活服务场景

多端部署能力 ​

支付宝小程序支持一次开发，多端运行，可以无缝部署到阿里系的多个超级 APP 中。

多端部署示意图：

同一套支付宝小程序代码
    ↓
┌──────┼──────┼──────┐
↓      ↓      ↓      ↓
支付宝  高德地图  手机淘宝  其它阿里系APP

低门槛开发模式 ​

支付宝小程序提供从自主开发、模板开发到定制开发的全套解决方案，特别是模板开发大幅降低了开发门槛。

开发模式对比：

自主开发：完全自定义 → 灵活性高 → 技术要求高
模板开发：选择模板 → 配置内容 → 快速上线
定制开发：需求定制 → 专业开发 → 成本较高

常用 API 及代码示例 ​

支付宝小程序提供了丰富的 JSAPI 和 OpenAPI，涵盖界面交互、多媒体、设备能力、数据安全等 14 个大类。以下是一些常用 API 的详细使用示例。

网络请求 API ​

网络请求是小程序与服务器交互的基础，my.request 是最核心的 API 之一。

javascript
// 发起GET请求示例
my.request({
  url: 'https://api.example.com/user/data',
  method: 'GET',
  data: {
    userId: '12345',
    page: 1,
    size: 20,
  },
  headers: {
    'content-type': 'application/json',
  },
  dataType: 'json',
  success: (res) => {
    console.log('请求成功:', res.data)
    // 处理业务数据
    this.setData({
      userInfo: res.data.userInfo,
      list: res.data.items,
    })
  },
  fail: (err) => {
    console.error('请求失败:', err)
    my.showToast({
      title: '网络异常',
      icon: 'none',
    })
  },
  complete: () => {
    my.hideLoading()
  },
})

// 发起POST请求示例
my.request({
  url: 'https://api.example.com/order/create',
  method: 'POST',
  data: {
    productId: 'P1001',
    quantity: 2,
    totalAmount: '199.00',
  },
  headers: {
    'content-type': 'application/x-www-form-urlencoded',
  },
  success: (res) => {
    if (res.status === 200) {
      my.alert({
        title: '成功',
        content: '订单创建成功',
      })
    }
  },
})

支付 API ​

支付是支付宝小程序的核心能力，为商业场景提供完整的交易闭环。

javascript
// 支付功能示例
const AdaPay = require('./utils/adaPay.js')

// 调用支付
function invokePayment(orderInfo) {
  AdaPay.doPay(orderInfo, (result) => {
    console.log('返回结果码:', result.result_status)
    console.log('返回结果描述:', result.result_message)

    switch (result.result_status) {
      case 'succeeded':
        my.showToast({
          title: '支付成功',
          icon: 'success',
        })
        // 跳转到成功页面
        my.navigateTo({
          url: '/pages/success/success',
        })
        break
      case 'failed':
        my.alert({
          title: '支付失败',
          content: result.result_message,
        })
        break
      case 'cancel':
        my.showToast({
          title: '支付取消',
          icon: 'none',
        })
        break
      default:
        my.alert({
          title: '支付结果未知',
          content: '请查询订单状态',
        })
    }
  })
}

// 获取用户ID并发起支付
function createPayment() {
  // 先获取用户信息
  my.getAuthCode({
    scopes: 'auth_user',
    success: (res) => {
      // 调用服务端创建订单
      my.request({
        url: 'https://api.example.com/create_order',
        method: 'POST',
        data: {
          authCode: res.authCode,
          productId: 'P1001',
        },
        success: (orderRes) => {
          // 发起支付
          invokePayment(orderRes.data.paymentInfo)
        },
      })
    },
  })
}

用户授权与信息获取 ​

用户授权和信息获取是小程序个性化服务的基础。

javascript
// 获取用户开放信息
my.getOpenUserInfo({
  success: (res) => {
    const userInfo = JSON.parse(res.response).response
    console.log('用户信息:', userInfo)

    // 更新UI
    this.setData({
      userInfo: userInfo,
      isLogged: true,
    })

    // 保存到本地缓存
    my.setStorageSync({
      key: 'userInfo',
      data: userInfo,
    })
  },
  fail: (err) => {
    console.error('获取用户信息失败:', err)
    my.showToast({
      title: '授权失败',
      icon: 'none',
    })
  },
})

// 获取用户手机号
my.getPhoneNumber({
  success: (res) => {
    const encryptedData = res.response
    // 将encryptedData发送到服务端解密
    my.request({
      url: 'https://api.example.com/decode_phone',
      method: 'POST',
      data: {
        encryptedData: encryptedData,
      },
      success: (phoneRes) => {
        console.log('用户手机号:', phoneRes.data.phoneNumber)
      },
    })
  },
})

数据缓存 API ​

数据缓存 API 提供了本地数据存储能力，适合存储用户偏好和临时数据。

javascript
// 数据缓存操作示例
class CacheManager {
  // 同步存储数据
  static setStorage(key, data) {
    try {
      my.setStorageSync({
        key: key,
        data: data,
      })
      console.log('存储成功:', key)
      return true
    } catch (e) {
      console.error('存储失败:', e)
      return false
    }
  }

  // 同步获取数据
  static getStorage(key) {
    try {
      const result = my.getStorageSync({ key: key })
      return result.data
    } catch (e) {
      console.error('获取缓存失败:', e)
      return null
    }
  }

  // 移除数据
  static removeStorage(key) {
    my.removeStorage({
      key: key,
      success: () => {
        console.log('删除成功:', key)
      },
    })
  }

  // 清空所有缓存
  static clearStorage() {
    my.clearStorage({
      success: () => {
        console.log('清空缓存成功')
      },
    })
  }
}

// 使用示例
// 存储用户配置
CacheManager.setStorage('userSettings', {
  theme: 'dark',
  notification: true,
  language: 'zh-CN',
})

// 读取用户配置
const settings = CacheManager.getStorage('userSettings')
if (settings) {
  this.setData({ settings: settings })
}

设备与位置 API ​

设备 API 让小程序能够访问手机的系统功能和硬件能力。

javascript
// 获取设备信息
const systemInfo = my.getSystemInfoSync()
console.log('设备型号:', systemInfo.model)
console.log('系统版本:', systemInfo.system)
console.log('屏幕宽度:', systemInfo.screenWidth)
console.log('支付宝版本:', systemInfo.version)

// 获取位置信息
my.getLocation({
  type: 'gcj02',
  success: (res) => {
    console.log('当前位置:', res.latitude, res.longitude)
    this.setData({
      location: {
        latitude: res.latitude,
        longitude: res.longitude,
      },
    })

    // 逆地理编码获取地址信息
    this.reverseGeocode(res.latitude, res.longitude)
  },
  fail: (err) => {
    console.error('获取位置失败:', err)
    my.showToast({
      title: '位置获取失败',
      icon: 'none',
    })
  },
})

// 逆地理编码
function reverseGeocode(lat, lng) {
  my.request({
    url: 'https://restapi.amap.com/v3/geocode/regeo',
    data: {
      key: 'your_amap_key',
      location: `${lng},${lat}`,
    },
    success: (res) => {
      const address = res.data.regeocode.formatted_address
      this.setData({
        'location.address': address,
      })
    },
  })
}

界面交互 API ​

界面交互 API 增强了小程序与用户的沟通体验。

javascript
// 消息提示
my.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000,
})

// 加载提示
my.showLoading({
  title: '加载中...',
  mask: true,
})

// 模态对话框
my.confirm({
  title: '确认删除',
  content: '确定要删除这条记录吗？删除后无法恢复',
  confirmButtonText: '删除',
  cancelButtonText: '取消',
  success: (result) => {
    if (result.confirm) {
      // 用户点击删除
      this.deleteItem()
    } else {
      // 用户点击取消
      my.showToast({
        title: '取消删除',
        icon: 'none',
      })
    }
  },
})

// 操作菜单
my.showActionSheet({
  items: ['拍照', '从相册选择', '扫描二维码', '取消'],
  success: (res) => {
    const tapIndex = res.tapIndex
    switch (tapIndex) {
      case 0:
        this.takePhoto()
        break
      case 1:
        this.chooseFromAlbum()
        break
      case 2:
        this.scanQRCode()
        break
    }
  },
})

开发实践与模式 ​

小程序开发生命周期 ​

支付宝小程序的开发遵循特定的生命周期模式，包括应用生命周期和页面生命周期。

应用生命周期：

启动：onLaunch → 初始化全局数据
       ↓
显示：onShow → 页面进入前台
       ↓
隐藏：onHide → 页面进入后台
       ↓
错误：onError → 脚本错误处理

页面生命周期：

加载：onLoad → 参数接收
       ↓
显示：onShow → 页面渲染
       ↓
就绪：onReady → 交互准备
       ↓
隐藏：onHide → 页面隐藏
       ↓
卸载：onUnload → 资源清理

项目结构规范 ​

支付宝小程序的项目结构有明确的规范要求，确保项目的可维护性和一致性。

project-root/
├── app.js           # 小程序入口文件
├── app.json         # 全局配置
├── app.acss         # 全局样式
├── pages/           # 页面目录
│   ├── index/
│   │   ├── index.js
│   │   ├── index.axml
│   │   ├── index.acss
│   │   └── index.json
│   └── detail/
│       └── detail.js
├── components/      # 自定义组件
├── utils/           # 工具函数
├── images/          # 图片资源
└── mock/            # 模拟数据

数据绑定与事件处理 ​

支付宝小程序使用数据驱动视图的模式，通过数据绑定和事件处理实现用户交互。

javascript
// page.js - 页面逻辑
Page({
  data: {
    message: 'Hello Alipay MiniProgram',
    count: 0,
    userList: [],
    isLoading: false,
  },

  // 页面加载
  onLoad(query) {
    // 获取页面参数
    console.log('页面参数:', query)
    this.loadData()
  },

  // 加载数据
  async loadData() {
    this.setData({ isLoading: true })

    try {
      const res = await this.asyncRequest()
      this.setData({
        userList: res.data,
        isLoading: false,
      })
    } catch (error) {
      this.setData({ isLoading: false })
      my.showToast({
        title: '加载失败',
        icon: 'none',
      })
    }
  },

  // 异步请求封装
  asyncRequest() {
    return new Promise((resolve, reject) => {
      my.request({
        url: 'https://api.example.com/users',
        success: resolve,
        fail: reject,
      })
    })
  },

  // 按钮点击事件
  onButtonTap() {
    this.setData({
      count: this.data.count + 1,
    })

    my.vibrate({
      success: () => {
        console.log('震动反馈')
      },
    })
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.loadData().then(() => {
      my.stopPullDownRefresh()
    })
  },
})
html
<!-- page.axml - 页面结构 -->
<view class="container">
  <text class="title">{{message}}</text>

  <!-- 条件渲染 -->
  <view a:if="{{isLoading}}" class="loading">
    <text>加载中...</text>
  </view>

  <!-- 列表渲染 -->
  <view a:else a:for="{{userList}}" key="id" class="user-item">
    <image class="avatar" src="{{item.avatar}}"></image>
    <view class="user-info">
      <text class="name">{{item.name}}</text>
      <text class="phone">{{item.phone}}</text>
    </view>
  </view>

  <!-- 事件绑定 -->
  <button class="btn" onTap="onButtonTap">点击计数: {{count}}</button>
</view>

支付宝小程序通过其强大的商业能力、深度的阿里生态整合和优异的技术性能，为开发者提供了一个独特的移动应用开发平台。无论是大型企业还是中小商户，都能通过支付宝小程序快速构建高质量的商业服务应用，在移动互联网时代获得更大的发展机会。

在 GitHub 上编辑此页