支付宝小程序怎么开发?如何快速开发支付宝小程序

蚁哥简介
自8月18日支付宝小程序正式面向开发者测试以来,已经有一批优秀的小程序开发者入驻 。当天,蚂蚁开发者大赛-支付宝小程序开发者大赛也正式开放报名 。
支付宝小程序积累了支付宝多年的技术积累 。它在组件上采用了支付宝的蚂蚁设计,并在开放的API中封装了自己独特的能力 。在框架方面,它采用开源的React/等技术为基础,形成以下特点:
那么问题来了,如何快速开发支付宝小程序?看完这篇你就知道了~!
△注意:本文建议在PC端打开查看 。将以下 URL 复制到浏览器中以打开它以访问超链接 。请点击图片查看大图~

支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
一.开发者入驻
△注1:公测期间未开通个人支付宝账户
△注2:如果您还没有注册企业支付宝账号,请访问:注册企业支付宝账号(//reg/.htm)
二.获取小程序APPID
支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
△注意:使用支付宝个人账号登录时,无法看到开发者中心左侧的【小程序】菜单 。请先注册您的企业支付宝账号()
三.下载/登录 IDE
首先,请下载小程序开发IDE工具() 。是一款辅助支付宝小程序开发的本地应用工具,包括本地调试、代码编辑、真机预览、发布等功能,涵盖应用开发的全流程 。
下载完成后打开,打开手机支付宝APP,扫码确认登录 。
△注意:如果登录后没有任何反应,可以尝试在手机上完全退出支付宝应用,然后重新打开 。
四.项目创建
登录成功后,会看到如下界面 。
支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
点击创建项目,选择一个文件夹,完成新项目的创建 。
五.代码编辑
打开工程默认进入代码编辑模式 。从左到右依次为文件操作区、代码编辑区和预览区 。
代码编辑区可以对当前项目进行代码编写和文件增删改名等基本操作 。在代码编辑区修改任何代码都会重新编译并自动刷新应用 。
该工具为我的界面和axml提供了大量的自动完成提示,帮助开发者提高效率 。
六.示例代码
点击创建项目后,会出现项目模板选择界面 。我们可以选择 Hello World 模板项目作为我们的初始项目 。本项目已经初始化了一些示例文件,比如必不可少的app.js、app.json以及具体页面的js、axml、acss 。.js后缀为逻辑脚本文件,.json后缀为配置文件,.acss后缀为样式文件,.axml后缀为模板文件 。小程序启动后会根据app.js生成一个小程序() 。
接下来,我们将详细讲解小程序的各个组成部分:
1.应用程序
app.js 是小程序的公共逻辑脚本文件 。在这个文件中可以监控小程序的生命周期,声明全局变量,调用框架提供的丰富API,如下图的存储和用户信息API,更多API见API () 。
支付宝小程序怎么开发?如何快速开发支付宝小程序

文章插图
△点击打开大图看得更清楚(下同)
app.json 是小程序的全局配置 。在这个json文件中,可以记录配置小程序的页面集合 。
【支付宝小程序怎么开发?如何快速开发支付宝小程序】常用状态栏、导航栏、标题、窗口背景颜色等 。更多配置见文档配置(#app.json) 。
app.acss 是小程序的公共样式 。可以直接在页面的axml中使用app.acss定义的选择器来影响所有页面的样式 。
上例中的页面是框架支持的特殊选择器,会匹配框架提供的页面根节点容器 。
2.页面
在这个例子中,我们有两个页面,Todo List 页面和 Add Todo 页面,都在 pages 目录下 。小程序的所有页面路径都必须写在 app.json 中 。路径从项目根目录开始,不能包含后缀 。页面的第一页是小程序的主页 。