教程｜如何快速开发支付宝小程序？ _生活知道

蚁哥导读
支付宝小程序自8月18日正式面向开发者公测以来，已有一批优秀的小程序开发者进驻。同一天，蚂蚁开发者大赛-支付宝小程序开发者大赛也正式对外开启报名。
支付宝小程序沉淀了支付宝多年的技术累积，在组件上采用了支付宝的 ant design 设计，在开放 API 上则面向自身特色能力来封装，在框架方面采用开源的 React/webpack 等技术为基?。?形成以下特色：
那么问题来了，如何快速开发一个支付宝小程序呢？看完这篇文章你就知道~！
△注：建议在PC端打开本文查看。将下列网址复制至浏览器中打开即可访问超链接。图片请点击大图查看更清晰哦~
一.开发者入驻
△注意1：公测期间尚未开放个人支付宝账户
△注意2：未注册企业支付宝账号请访问：注册企业支付宝账号（）
二.获取小程序APPID
△注意：个人支付宝账号登录开发者中心左侧无法看到【小程序】菜单，请先注册企业支付宝账号（）
三.下载/登录 IDE
首先，请下载小程序开发 IDE 工具（）。它是一个辅助开发支付宝小程序的本地应用工具，包含本地调试、代码编辑、真机预览、发布等功能，覆盖了应用开发的完整流程。
下载完成之后，打开它，打开手机上的支付宝应用，扫码确定即可登录。
△注意：如果登录没有反应，可尝试完全退出手机上的支付宝应用再重新打开。
四.项目创建
登录成功后你会看到以下界面。
点击创建项目，选择文件夹即可完成新项目的创建。
五.代码编辑
打开项目，会默认进入代码编辑模式。从左到右，依次是文件操作区、代码编辑区和预览区。
代码编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作。在代码编辑区修改任何代码都会重新编译，然后自动刷新应用。
工具针对 my 接口和 axml 提供了大量的自动补全提示浏览器网址总是有后缀，以帮助开发者提高效率。
六.示例代码
点击创建项目后会出现项目模版选择界面，我们可以选择 Hello World 模版项目做为我们的初始项目，这个项目已经初始化了一些样例文件，例如必不可少的 app.js, app.json 以及具体页面的 js, axml, acss. 其中 .js 后缀的是逻辑脚本文件， .json 后缀的是配置文件, .acss 后缀的是样式文件, .axml 后缀的是模版文件。启动后，小程序会根据 app.js 生成小程序实例（）。
接下来我们具体讲解下小程序的各个组成部分：
1.app
app.js 是小程序公共的逻辑脚本文件，在这个文件中可以监听小程序的生命周期，声明全局变量，调用框架提供的丰富 API，如以下所示的存储以及获取用户信息 API，更多 API 参见 API 文档（）。
△点开大图查看更清晰哦（下同）
app.json 是属于小程序的全局配置，在这个 json 文件中可以记配置小程序的页面集合，
通用的的状态栏、导航条、标题、窗口背景色等。更多配置参见文档配置（#app.json）。
app.acss 是小程序的公共样式浏览器网址总是有后缀，可以在页面的 axml 中直接使用 app.acss 定义的选择器，影响所有页面的样式。
上例中的 page 为框架支持的特殊选择器，会匹配框架提供的页面根节点容器。
2.page
在这个示例中，我们有两个页面，Todo List 页面和 Add Todo 页面，他们都在 pages 目录下。小程序的所有页面路径必须写在 app.json 中，路径从项目根目录开始且不能包括后缀名，pages 的第一个页面就是小程序的首页。
每一个小程序页面（）是由同路径下的四种类型文件组成，即.js 后缀的逻辑脚本文件，.json 后缀的配置文件，.acss 后缀的样式文件, .axml 后缀的模版文件。
3.Todo List 页面
todos.axml 为页面结构模版文件：

文章插图
使用
（）,
（）,
（）,
（）,
（）,
（）,
来搭建页面结构以及 a:for （#列表渲染）绑定 todos 数据，并将 todos 数据循环展开节点。
绑定数据可以查阅视图层（）文档，绑定事件可以查阅事件处理（）文档。
todos.js 是页面的逻辑脚本文件:
在这个文件中可以：
todos.acss 是页面的样式文件：
acss 文件不是必须的。语法可以查阅样式（）文档。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.acss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.acss 中指定的样式规则。
todos.json 是页面的配置文件：
配置文件不是必须的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。因此 index 页面的标题为 app.json 中指定的 Todo App 。
4.Add Todo 页面
add-todo.axml 为页面结构模版文件：
相对于 todo list 页面，add-todo 页面使用了新的（）来接受用户输入。
add-todo.js 页面逻辑代码：
add-todo.acss 同 todo list 页面用法基本一致。
add-todo.json 配置了页面标题：
因此 add-todo 页面的标题不再是 app.json 中指定的 Todo App, 而是 Add Todo.
5.效果
七.本地调试
1.预览区
这里可真实模拟在支付宝应用里的表现，并针对绝大部分的 api 提供了模拟功能。
2.调试模式
点击上方的调试Tab，可切换到调试模式。
小程序调试工具提供了 axml 和 acss 的支持，支持组件层级、属性回写等功能；同时也包含了 Chrome 调试工具中的网络请求、DOM 元素检查、源码 Debug 等。
3.预览日志
点击预览日志按钮，可查看代码编译的详细底层日志，能协助排查和定位问题。
【教程｜如何快速开发支付宝小程序？】本文到此结束，希望对大家有所帮助！

教程｜如何快速开发支付宝小程序？

猜你喜欢