支付宝api开发文档 如何快速开发支付宝小程序?

2018-12-09 15:30:36 技术原理 110 views 技术原理
[导读]:本文(《如何快速开发支付宝小程序?》)由来自三河的合作伙伴投稿,并经由本站(支付宝免签约接口)结合主题:支付宝api开发文档,收集整理了众多资料而成。主要记述了支付宝,支付宝接口开发文档,支付宝小程序,小程序开发文档,支付宝api,软件等方面的信息。相信从本文您一定可以获得自己所需要的!

蚁哥导读  

支付宝小程序自8月18日正式面向开发者公测以来,已有一批优秀的小程序开发者进驻。同一天,蚂蚁开发者大赛-支付宝小程序开发者大赛也正式对外开启报名。(详情请见:)

支付宝小程序沉淀了支付宝多年的技术累积,在组件上采用了支付宝的 ant design 设计,在开放 API 上则面向自身特色能力来封装,在框架方面采用开源的 React/webpack 等技术为基础,形成以下特色:

  • 基于 Web 技术,学习成本低

  • 一套代码,同时支持 iOS 和 Android,接近原生体验

  • 无缝接入 npm,背靠广大开源社区

那么问题来了,如何快速开发一个支付宝小程序呢?看完这篇文章你就知道~!

△注:建议在PC端打开本文查看。将下列网址复制至浏览器中打开即可访问超链接。图片请点击大图查看更清晰哦~

一.开发者入驻

一.开发者入驻

△注意1:公测期间尚未开放个人支付宝账户

  • 创建后可在【我的小程序】列表页看到对应的小程序APPID,该ID在上传版本时需要填写

三.下载/登录 IDE

三.下载/登录 IDE

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

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

四.项目创建

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

五.代码编辑

五.代码编辑

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

代码编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作。在代码编辑区修改任何代码都会重新编译,然后自动刷新应用。

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

六.示例代码

1.app

△点开大图查看更清晰哦(下同)

△点开大图查看更清晰哦(下同)

app.json 是属于小程序的全局配置,在这个 json 文件中可以记配置小程序的页面集合,

支付宝api开发文档 如何快速开发支付宝小程序?

app.acss 是小程序的公共样式,可以在页面的 axml 中直接使用 app.acss 定义的选择器,影响所有页面的样式。

支付宝api开发文档 如何快速开发支付宝小程序?

上例中的 page 为框架支持的特殊选择器,会匹配框架提供的页面根节点容器。

2.page

在这个示例中,我们有两个页面,Todo List 页面和 Add Todo 页面,他们都在 pages 目录下。小程序的所有页面路径必须写在 app.json 中,路径从项目根目录开始且不能包括后缀名,pages 的第一个页面就是小程序的首页。

3.Todo List 页面

todos.axml 为页面结构模版文件:

使用

使用

todos.js 是页面的逻辑脚本文件:

在这个文件中可以:

在这个文件中可以:

  • 监听并处理页面的生命周期函数 (onHide, onShow, onLoad, onUnload, onReady)。

  • 获取小程序实例以及其他页面实例 (getApp, getCurrentPages)。

  • 声明并处理数据 (data)。

  • 响应页面交互事件,调用 API 等。

todos.acss 是页面的样式文件:

todos.json 是页面的配置文件:

todos.json 是页面的配置文件:

配置文件不是必须的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。因此 index 页面的标题为 app.json 中指定的 Todo App。

4.Add Todo 页面

add-todo.axml 为页面结构模版文件:

add-todo.js 页面逻辑代码:

add-todo.js 页面逻辑代码:

add-todo.acss 同 todo list 页面用法基本一致。

add-todo.acss 同 todo list 页面用法基本一致。

add-todo.json 配置了页面标题:

因此 add-todo 页面的标题不再是 app.json 中指定的

因此 add-todo 页面的标题不再是 app.json 中指定的 Todo App, 而是 Add Todo.

5.效果

七.本地调试

七.本地调试

1.预览区

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

2.调试模式

2.调试模式

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

3.预览日志

点击预览日志按钮,可查看代码编译的详细底层日志,能协助排查和定位问题。

4.出错反馈

4.出错反馈

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

八.真机预览

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

  • 推送给自己, 仅将预览的小程序内容推送给当前登录的用户

  • 推送给开发者, 将预览的小程序内容推送给该APPID应用在开放平台设置的所有开发者

拓展阅读

如何搭建自己的第四方支付平台:https://jingyan.baidu.com/article/49711c618b033ffa451b7c53.html

【WEB开发】微信网页授权第三方登录接口(WEB登录) - PHP...:https://www.cnblogs.com/xuzhengzong/p/8513269.html

微信支付接口文档让你了解支付流程:http://www.eh67.com/pay/6041.html

微信sdk下载 - 【微信支付】APP支付开发者文档:https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=11_1

中信网上支付_网上支付平台_手机银行网上支付:http://www.citicbank.com/personal/ebank/payment/

相关问答

问:支付宝支付接口开发的回调地址怎么写

答:是用来业务中需要知道用户在支付宝支付的时候使用了哪种支付渠道。


发表评论

Vox

找微信客服跟支付宝客服,他们有代理,找到最近的代理谈合作就行啦

2018-12-11 12:25:41

发表评论:

在线客服