支付宝小程序开发者工具介绍-阿里云开发者社区

开发者社区> 开发者学习资源库> 正文
登录阅读全文

支付宝小程序开发者工具介绍

简介: 介绍了支付宝小程序开发者工具

本章内容出自《小程序开发不求人》电子书,点击下载完整版

启动界面

在小程序开发者工具(简称 IDE)的启动界面,开发者可以新建项目、打开现有项目、删除最近项目记录。

image.png

新建项目

新建项目类型分为两类:示例模板空白脚手架

示例模板项目

开放平台提供入门、UI、开放能力三类模板,内含大量示例代码(仍在持续更新中),为开发者演示如何实现小程序各项能力(参见 快速示例)。新建步骤如下:

  1. 点击 模板选取 标签。
  2. 点击需要创建的模板,然后点击 下一步;或者直接双击所需模板卡片。
  3. 在 新建项目 页面:

    • 设置 项目名称项目路径
    • 点击 完成,进入主界面。

空白脚手架项目

空白脚手架仅包含最基础的文件结构。新建步骤如下:

  1. 在左侧边栏选择 项目类型(例如支付宝小程序、淘宝商家应用等类型)。
  2. 最近使用 列表中,点击 ➕ 卡片。
  3. 在 新建项目 页面:

    • 设置 项目名称项目路径
    • 选配 后端服务:不启用云服务、小程序 Serverless 或 小程序云应用;
    • 点击 完成,进入主界面。

打开项目

本地现有项目也有两种打开方式:选择最近项目选择项目文件夹

选择最近项目

在启动界面 最近使用 列表中,点击需要打开的项目,然后点击 打开;或者直接双击所需项目卡片。

选择项目文件夹

  1. 点击右上角的 打开项目,弹出文件窗口。
  2. 导航至项目文件夹,点击 选择文件夹
  3. 在 打开本地项目 页面:

    • 确认或修改 项目名称项目类型
    • 点击 打开,进入主界面。

删除最近项目记录

如需维持启动界面整洁,首先右键点击希望清理的项目卡片,然后点击 删除
注意:此项操作仅会清理启动界面记录,不会实际删除硬盘中的项目文件。

主界面

小程序开发者工具的主界面由 菜单栏、工具栏、功能面板、编辑器、调试器、模拟器 组成。

image.png

主界面各区域简要说明:

  1. 菜单栏:文件、编辑、窗口、工具、帮助等基础功能。
  2. 工具栏:更改小程序类型与关联、显示/隐藏界面区域、真机调试与预览等功能。
  3. 功能面板:切换文件树、搜索、git 管理、npm 管理、插件市场、实验室、云服务等边栏。
  4. 编辑器:输入与修改代码的区域。
  5. 调试器:用于模拟器调试、真机调试、性能调试。
  6. 模拟器:模拟运行小程序,便于快速预览、初步调试。

说明:使用工具栏中部三个按钮,可以显示或隐藏界面主要区域,其中 编辑器调试器 无法同时隐藏。

工具栏

小程序开发者工具(简称 IDE)的工具栏位于主界面顶部,包含 IDE 中最常用的主要功能。本文档从左至右介绍各项功能。

小程序

选择小程序的运行环境类型(默认为支付宝小程序),此外还支持淘宝、钉钉、高德等运行环境(参见 多端支持)。

关联小程序

每个开发者账号可以拥有多个小程序的开发权限,因此需要关联具体小程序,决定小程序代码的上传位置。
在此项下拉列表中,点击 + 创建小程序,进入小程序管理页面,可以创建小程序供后续关联。
说明:在创建小程序命名时,注意遵循名称规范。
如需关联其他账号中的小程序,但开发者账号还没有开发权限的话:

  1. 使用主账号登录小程序开发中心,点击所需小程序,跳转至开发管理页面。
  2. 在左侧导航栏选择 成员管理,点击 添加,按照提示添加开发成员。
  3. 使用开发者账号在支付宝客户端 朋友 > 服务提醒 中接受邀请。
  4. 使用开发者账号登录 IDE,关联小程序。

关联云服务

说明:在最初新建项目环节,如果后端选用云应用,此项功能才会显示。
如果未启用云服务或者选用 Serverless,此项功能则会隐藏。
每个小程序可以创建多个云应用,而云应用又包含测试与正式环境。因此需要关联具体的云应用环境,决定云应用代码的上传位置。在关联云应用环境之后,此项下拉列表右侧会出现 ⚙️ 按钮,用于上传代码与管理云应用。
在此项下拉列表中,点击 + 创建新服务,进入云服务管理页面,可以创建云应用后续关联。

image.png

显示/隐藏界面区域

点击 编辑器、调试器、模拟器,可以分别显示与隐藏这三个区域。
说明:功能面板/编辑器 会同时显示/隐藏,而 编辑器/调试器 无法同时隐藏。

image.png

编译模式

在普通编译模式下,小程序初始的启动页面是 app.json 文件 pages 列表的首个页面,且不带任何参数。
如需快速调试其他页面 或 设置参数:

  1. 在此项下拉列表中点击 + 添加编译模式
  2. 在弹窗中填写 模式名称、页面参数、全局参数,选择 启动页面,点击 确定
  3. 随后模拟器将会改用新的启动页面,同时自动传入设置好的参数。

说明:弹窗中如果勾选 下次编译时模拟更新,可以模拟小程序更新效果,详情请参见 UpdateManager

清除缓存

清除 数据缓存、授权数据、文件缓存、构建缓存、网络缓存

真机调试

通过 IDE 远程至真机,设置断点、查看运行信息。详情请参见 真机调试
说明:如不希望频繁扫码,可以使用 自动预览 选项。

预览

使用真机预览小程序,初步查看 API 真机调用效果。
说明:如不希望频繁扫码,可以使用 自动预览 选项。

上传

上传项目代码至关联小程序的后台空间。在小程序完成开发之后,项目代码需要打包上传至开放平台,然后才能提交审核与发布上线。目前只能上传图片不支持上传视频。

前提条件

在上传代码之前,本地项目需要关联至后台小程序,用于确定上传位置。如果尚未关联,点击工具栏右侧的 上传 菜单时,会有弹窗提示进行关联。IDE 中选择的小程序与后台查看版本详情的小程序需要保持一致。

上传方法

  1. 在工具栏右侧的 上传 菜单栏中,点击 上传 按钮。
  2. 上传成功之后,后台会生成新的开发版本条目。查看方法:登录 小程序开发中心,点击所需小程序,版本条目会在开发管理页面的 版本详情 区域显示。

上传之前的选项:

  • 上传版本:每次上传时版本默认递增 0.0.1(本次版本必须大于线上版本),从而确保后台每份代码版本唯一。
  • 创建预审核任务:免费调用一台真机进行测试(每天 5 次限额),详情请参见 预审核

配置域名白名单
在上传之前阶段(模拟器预览/调试、真机预览/调试),小程序默认不会限制域名访问;但在上传之后阶段(体验版本、审核版本、灰度版本、线上版本),小程序只能访问白名单域名。若未成功配置白名单,可能会导致小程序页面白屏。详细操作可参见 配置 H5 服务器域名白名单

配置步骤:

  1. 登录 小程序开发中心,选择所需小程序。
  2. 在左侧导航栏点击 设置,进入设置页面。
  3. 点击 开发设置 标签,在 服务器域名白名单 区域点击 添加
  4. 填写所需域名,点击 确定

注意:添加的域名必须支持 HTTPS 协议,而且已经完成备案。

详情

  • 查看关联应用名称、项目本地目录、线上版本。
  • 选择是否启用自定义组件 component2 编译、axml 严格语法检查。
  • 查看 my.request、web-view 域名白名单信息。

设置是否忽略这两项域名检查。

注意:小程序 体验版提审之后版本 无法继续忽略检查,届时请务必设置域名白名单!
域名白名单设置入口有两处:

  • 在详情页面,点击 域名信息 右侧蓝色按钮,进入设置页面,点击 开发设置
  • 登录 我的小程序,选择所需小程序;从左侧边栏进入 设置 > 开发设置

登录/用户头像

  • 在开发者未登录时,显示 登录 按钮。
  • 在开发者登录后,显示开发者头像。可以查看消息通知,或者退出登录。

image.png

模拟器

小程序项目通过编译之后,自动在模拟器中运行,无需真机即可快速预览。基础互动方式是通过鼠标点击、拖拽来模拟手指触摸、拖动操作。
在默认设置下,每次保存已变更代码时都会触发模拟器自动刷新,实现准实时预览效果。关闭自动刷新的方法:取消勾选模拟器右下角 自动更新

模拟器布局

模拟器顶部各项功能(从左至右):

  • 设备尺寸:选择预设的 iOS 或安卓设备尺寸,或者新建自定义的设备尺寸,用于测试适配性。
  • 缩放比例:控制小程序的显示缩放比例。
  • 刷新:重新编译代码并刷新模拟器。
  • 小工具:打开/关闭模拟器的小工具菜单。
  • 模拟器日志:在编辑器打开模拟器日志窗口。
  • 独立窗口:改用独立窗口方式显示模拟器。

在独立窗口模式下,界面新增 窗口置顶 按钮;独立窗口 变为 合并窗口 按钮。

模拟器底部三项功能:

  • 页面路径:显示当前页面路径。点击路径,可直接打开当前页面 js 文件。
  • 页面参数:显示当前页面收到的参数。点击参数,可快速复制至剪贴板。
  • 自动刷新:如需避免频繁刷新,可取消勾选此功能。

说明:点击 ^ 可以切换显示 页面路径 或 页面参数。

模拟器小工具

点击图中蓝色小工具图标,显示/隐藏更多模拟功能:

image.png

首页:模拟按下 Home 键,小程序退回后台。用于测试生命周期函数 onShow与 onHide,参见 小程序运行机制。
定位:输入设置 经纬度 模拟信息,用于测试 my.getLocation 获取用户位置端口(经纬度模拟信息需要输入浮点数,精确至 1 位小数以上)。
扫码:输入设置 扫码返回数据 模拟信息,用于测试 my.scan 扫一扫端口。
摇一摇:模拟摇一摇动作,用于测试 my.watchShake 摇一摇端口。
授权:设置 用户信息、地理位置、相册、相机、麦克风 模拟权限,可用于测试my.getLocation、my.chooseImage 等端口的权限请求步骤(在已获得用户信息授权时,还提供删除用户信息授权的选项)。
裁剪:模拟用户截屏情况,用于测试 my.onUserCaptureScreen 截屏事件监听端口。
内存警告:模拟内存不足情况,用于测试 my.onMemoryWarning 内存警告监听端口。
mtop 环境切换:可进行环境切换,切换为 日常、预发、线上

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

开发者免费资源中心,技术电子书、会议PPT、论文资料持续供应中

官方博客
官网链接