支付宝小程序之基础教程-环境搭建(起步)

初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群):757345416

概述

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

  • 基于 Web 技术,学习成本低
  • 一套代码,同时支持 iOS 和 Android,接近原生体验
  • 提供丰富的组件和 API(比如获取用户信息、本地存储、支付功能等)
  • 下面就是一个简单的示例,演示如何快速开发一个小程序。

小程序应用

登录开放平台,进入开发者中心频道,点击右侧小程序菜单,可在我的小程序列表页看到对应的小程序应用。在IDE上传版本时需要在关联应用选中该应用:
支付宝小程序之基础教程-环境搭建(起步)_第1张图片

下载

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

下载完成之后,打开它,即可使用。部分功能如真机预览和版本上传等需要登录才能使用,在这种情况下开发者可打开手机上的支付宝应用,扫码确定即可登录。

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

打开IDE,点击新建项目,在支付宝下选择"小程序",创建项目:
支付宝小程序之基础教程-环境搭建(起步)_第2张图片

小程序支持多端(支付宝、钉钉、mPaaS)研发和发布,点此查看详情。

代码编辑

打开项目,会默认进入代码编辑模式。从左到右,依次是文件树、代码编辑器和模拟器。
支付宝小程序之基础教程-环境搭建(起步)_第3张图片

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

实时预览

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

自动补全

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

本地调试

模拟器

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

调试器

点击左下角调试器图标,可唤起调试器窗口。
支付宝小程序之基础教程-环境搭建(起步)_第4张图片

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

真机预览

真机预览功能可以让开发者在手机上预览当前代码在真机上运行的效果。
真机预览功能需要扫码登录并且选择关联应用才能使用。
支付宝小程序之基础教程-环境搭建(起步)_第5张图片

上传与发布

开发者扫码登录并选择关联应用后可上传版本到开放平台:
支付宝小程序之基础教程-环境搭建(起步)_第6张图片
上传完毕后,需要登录到开放平台提交审核,审核完毕后,小程序即可进行灰度和发布操作。详细步骤请点击这里进行查看。

本教程参考于支付宝-开放平台-小程序。

你可能感兴趣的:(支付宝小程序)