codecamp

蚂蚁支付宝小程序开发教程手册文档

支付宝小程序开发文档简易教程

支付宝小程序是手机应用嵌入支付宝客户端的一种方法,有以下特点:

  • 基于 Web 技术,学习成本低
  • 一套代码,同时支持 iOS 和 Android,接近原生体验
  • 提供丰富的组件和 API(比如获取用户信息、本地存储、支付功能等)

下面就是一个简单的示例,演示如何快速开发一个小程序。

获取APPID

登录开放平台,进入开发者中心频道,点击左侧【小程序】菜单,可在【我的小程序】列表页看到对应的小程序APPID,该ID在上传版本时需要填写

支付宝小程序开发文档 获取APPID

下载/登录 IDE

首先,请下载小程序开发 IDE 工具。它是一个辅助开发支付宝小程序的本地应用工具,包含本地调试、代码编辑、真机预览、发布等功能,覆盖了应用开发的完整流程。

下载完成之后,打开它,打开手机上的支付宝应用,扫码确定即可登录。

注意:如果登录没有反应,可尝试完全退出手机上的支付宝应用再重新打开。

项目创建

登录成功后你会看到以下界面。

支付宝小程序开发文档 项目创建

点击创建项目,选择文件夹即可完成新项目的创建。

代码编辑

打开项目,会默认进入代码编辑模式。从左到右,依次是文件操作区、代码编辑区和预览区。

支付宝小程序开发文档 代码编辑

代码编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作。

实时预览

在代码编辑区修改任何代码都会重新编译,然后自动刷新应用。

自动补全

工具针对 my 接口和 axml 提供了大量的自动补全提示,以帮助开发者提高效率。

本地调试

预览区

这里可真实模拟在支付宝应用里的表现,并针对绝大部分的 api 提供了模拟功能。

调试模式

点击上方的调试Tab,可切换到调试模式。

支付宝小程序开发文档 调试模式

小程序调试工具提供了 axml 和 acss 的支持,支持组件层级、属性回写等功能;同时也包含了 Chrome 调试工具中的网络请求、DOM 元素检查、源码 Debug 等。

出错反馈

当开发者在 axml 或者配置文件里编译出错时,保存后会对错误的信息以 redbox 的形式呈现给开发者。

支付宝开发文档 出错反馈

真机预览

在"编码"界面点击真机 Tab,选择真机预览, 需要确定如下信息:

  • 填写在开放平台申请的APPID
  • 选择推送小程序的范围:

  • 推送给自己, 仅将预览的小程序内容推送给当前登录的用户
  • 推送给开发者, 将预览的小程序内容推送给该APPID应用在开放平台设置的所有开发者

支付宝小程序开发文档 真机预览

发布

开发者选中"发布"功能后, 需要确定如下发布信息:

  • 填写在开放平台后台创建小程序时生成的APPID
  • 根据开放平台当前版本, 填写待发布的版本号

支付宝小程序开发文档 发布

支付宝小程序DEMO
支付宝小程序 快速开始
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }