支付宝小程序怎么开发?如何快速开发支付宝小程序
蚁哥简介
自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 中。路径从项目根目录开始,不能包含后缀。页面的第一页是小程序的主页。
每个小程序页面()由同一路径下的四种文件组成,分别是.js后缀的逻辑脚本文件、.json后缀的配置文件、.acss后缀的样式文件、.axml后缀的模板文件.
3.待办事项列表页面
todos.axml 为页面结构模板文件:
使用
(),
(),
(),
(),
(),
(),
构建页面结构和a:for(#list渲染)绑定todos数据,循环todos数据展开节点。
对于绑定数据,请参阅 view layer() 文档,对于绑定事件,请参阅 event () 文档。
todos.js 是页面的逻辑脚本文件:
在这个文件中你可以:
todos.acss 是页面的样式文件:
acss 文件不是必需的。语法可以在 style() 文档中找到。当存在页面样式表时,页面样式表中的样式规则将层叠在 app.acss 中的样式规则之上。如果不指定页面的样式表,也可以直接在页面的结构文件中使用app.acss中指定的样式规则。
todos.json 是页面的配置文件:
不需要配置文件。当页面有配置文件时,页面中的配置项会覆盖 app.json 中相同的配置项。如果没有指定页面配置文件,则直接在页面使用app.json中的默认配置。所以索引页的标题就是app.json中指定的Todo App。
4.添加待办事项页面
add-todo.axml 为页面结构模板文件:
与待办事项列表页面相比,添加待办事项页面使用 new () 来接受用户输入。
add-todo.js 页面逻辑代码:
add-todo.acss 与待办事项列表页面基本相同。
add-todo.json 配置页面标题:
所以add-todo页面的标题不再是app.json中指定的Todo App,而是Add Todo。
5.效果
七.本地调试
1.预览区
这里可以模拟支付宝应用中的性能,大部分API都提供了模拟功能。
2.调试模式
点击上面的调试标签切换到调试模式。
小程序调试工具提供axml和acss的支持,支持组件层级、属性回写等功能;还包括调试工具中的网络请求、DOM元素检查、源码调试等。
3.预览日志
点击预览日志按钮,可以查看详细的代码编译底层日志,有助于排查和定位问题。