更新时间：2024-12-25 16:19:40贡献者收藏我的文档设置返回文档小程序开发者工具（ide）下载下载并安装 小程序开发者工具（简称 ide）。 ide 可以集成多端小程序项目，相同代码还通用于蚂蚁开放生态、可直接发布至钉钉、高德等应用平台。本篇文章只讲解支付宝小程序的使用，基于 ide 1.5.7 版本讲解。选择项目界面1启动 ide > x项目：小程序>选择端：支付宝，点击下一步；2选择模板>选择 todo 小程序，点击 下一步 >新建项目，进入 ide 编辑界面。进入开发编辑界面进入开发界面后可以先阅读 readme.md 了解 demo 项目。 如果界面有在右下角提示未找到 node 可执行文件，可以检查电脑是否有安装 nodejs，如已经安装，点击 手动设置 node 路径 设置正确的安装路径；未安装，可到提示的链接 https://nodejs.org 进行下载并安装（由于 ide 开发工具对 nodejs 有一定依赖，不安装不保证功能）。 ide开发界面功能介绍和使用ide界面可分为左侧功能面板、编辑器、调试器、模拟器、顶部菜单栏、顶部工具栏。下面将按照顺序分别介绍功能使用。左侧功能面板●资源管理器：对当前小程序项目目录进行管理，可鼠标右键对项目目录进行新建、打开、复制、剪切等操作。●跨文件搜索：通过该功能可以在小程序项目中全局搜索相关代码，并可以进行替换操作。●源代码管理：ide 提供的 git 仓库管理，便于小程序项目的管理。●扩展市场：扩展市场为开发者提供丰富的插件功能，通过插件市场进行安装并启用所需功能，例如 沙箱环境切换插件 等实用插件功能。●实验室：实验室提供了预检测、真机云测、性能调试、开发监控来帮助开发者在小程序正式提审前全面检测小程序审核指标、更多地暴漏小程序功能及性能等问题，提高审核通过率。●npm 依赖管理：用于管理小程序项目的 npm 依赖安装和更新。●云服务：项目使用的功能（创建项目时需选择创建小程序 serverless 或云应用云服务）。●体验反馈：在使用 ide 编程过程中，遇到异常或者体验不友好的地方，都可以通过该功能反馈给 ide 开发团队，共同提供更好的编程体验。●设置：○设置：可设置 ide 工具的配置（编辑器、代理等）。○快捷键：可设置和查看 ide 中的命令快捷键。○颜色主题：设置 ide 主界面颜色，目前只可选择深色和浅色两种，默认为深色。○文件图标主题：设置文件图标，目前也只可选择 seti ui 和 minimal(visual studio code)两种，默认 seti ui。编辑器输入与修改代码的区域。 编辑小程序代码处，可以在资源管理器中双击需要编辑的项目文件，自动在编辑器打开（可以长按文件头移动位置方便开发）。 编辑器实现了实时预览和自动补全：●实时预览：可以实现编写小程序时模拟器效果的实时、快速预览。 当编辑修改 axml、acss、js、json 文件并保存后,模拟器会实时预览编辑后的编译情况。●axml 自动补全：axml 自动补齐，可在编写 axml 文件时，帮助补全成对的 axml 标签，减少编码中的疏忽和编排上的错误。 例如，输入 之后，ide 会自动补齐与之成对的 。●api 自动补齐与语法提示：当输入代码时，ide 会实时显示可能的 api 及相关的语法提示。○鼠标点击编辑器，可以通过右键或者快捷键操作常用的命令，并且可以通过左下角 设置 设置编辑器的一些属性配置。○编辑器右上角处有2个功能分别是：向右拆分、切换到设计模式。●向右拆分：拆分编辑器，实现多页编程。●切换到设计模式：设计模式是由原来的组件面板升级的，目前是设计面板，通过拖拽的方式编程，具体可以切换后亲自体验。调试器调试器默认是关闭的，需要调试代码，可以点击顶部工具栏中部的调试器按钮打开。用于模拟器调试、真机调试、性能调试。开发者可以利用调试器功能调试开发中遇到的 js 异常问题。 ●console：开发者可以通过console查看系统和开发者自行打印的 log 日志，日志显示红色表示有报错，黄色为提示。开发者可以在 js 代码中加上 debugger 来进行断点调试（目前版本不支持在左侧代码符双击加断点）。●axml：可以查看页面对应元素的所绑定的属性，并在模拟器中显示元素位置等信息；可点击左侧的箭头按钮，在模拟器中反选元素，在 axml 中显示对应元素信息。●sources：断点调试后会跳转到 sources 进行执行跟踪。●storage：可查看代码中调用缓存api存储的缓存信息。●network：可查看网络请求信息，可用来调试 my.request。●data：可查看页面 js 文件中 data 内增加的数据。模拟器模拟运行小程序，便于快速预览、初步调试。小程序项目通过编译之后，自动在模拟器中运行，无需真机即可快速预览。基础互动方式是通过鼠标点击、拖拽来模拟手指触摸、拖动操作。模拟器顶部各项功能（从左至右）●设备尺寸：选择预设的 ios 或 android 设备尺寸，或者新建自定义的设备尺寸，用于测试适配性。●缩放比例：控制小程序的显示缩放比例。●刷新：重新编译代码并刷新模拟器。●小工具：打开/关闭模拟器的小工具菜单。●模拟器日志：在编辑器打开模拟器日志窗口。●独立窗口：改用独立窗口方式显示模拟器。模拟器底部三项功能●页面路径：显示当前页面路径。点击路径，可直接打开当前页面 js 文件。●页面参数：显示当前页面收到的参数。点击参数，可快速复制至剪贴板。●自动刷新：在默认设置下，每次保存已变更代码时都会触发模拟器自动刷新，实现准实时预览效果。如需避免频繁刷新，可取消勾选此功能。模拟器小工具点击小工具图标，显示/隐藏更多模拟功能。●home按键：模拟按下 home 键，小程序退回后台。用于测试生命周期函数 onshow 与 onhide。●location设置：设置经纬度模拟信息（浮点数，需精确至1位小数以上），用于测试 my.getlocation 获取用户位置api。●scan扫一扫：设置扫一扫扫码返回数据模拟信息，用于测试 my.scan 扫一扫api。●shake摇一摇：模拟摇一摇动作，用于测试 my.watchshake 摇一摇api。●webview调试：启动专用devtools窗口，用于调试 web-view 内嵌的 html5 页面（此功能仅在进入 web-view 内嵌 html5 页面可用，其它页面下置灰无法点击）。●授权管理：设置：地址位置、麦克风、相册、相机 模拟权限，可用于测试 my.getlocation、my.chooseimage 等api的权限请求步骤。在已获得用户信息授权时，还提供删除用户信息授权的选项，可用于测试获取用户信息能力。●裁剪：模拟用户截屏，用于测试 my.onusercapturescreen 截屏事件监听api。●内存警告：模拟手机内存不足情况，用于测试 my.onmemorywarning 内存警告监听api。顶部菜单栏●小程序开发者工具。○关于：可查看 ide 版本信息。○设置：打开 ide 左下角的设置界面，可对ide配置进行设置。○查看更新日志：跳转小程序更新日志文档。○退出：退出ide与右上角关闭一样。●文件：可对项目进行新建、切换保存等操作。●编辑：可对编辑器进行复制、剪切、粘贴、撤销、重做、全选操作（可通过快捷键触发）。●窗口：可对ide主界面布局做调整。●工具：顶部工具栏和左侧功能面板的集合按钮，点击可选择对应工具和功能进行操作●帮助：在开发过程中ide出现异常，不能正常编程时，可点击帮助选择对应的帮助功能进行定位解决。可点击上传本地日志帮助 ide 开发更好的定位异常，提供更好的ide编程体验。）顶部工具栏更改小程序类型与关联、显示/隐藏界面区域、真机调试与预览等功能。 左侧为项目类型和关联小程序应用。●项目类型：可以通过切换项目类型实现多端同代码开发。●关联小程序应用：关联小程序应用后才可以进行真机预览、调试等功能和授权类型api的使用和测试。右侧为编译模式、清缓存和真机调试。●编译模式：可通过添加自定义编译模式测试全局参数、页面参数的获取（启动参数测试）；同时可以勾选下次编译时模拟更新 在模拟器中模拟调试更新管理能力（该勾选只对模拟器生效，对真机预览无效）。●清缓存：可清理ide上的数据、授权、网络、构建、文件缓存。●真机调试：为了便于调试真机，ide提供了远程真机调试功能：○在ide中断点调试远程小程序。○在ide中查看远程界面的 axml 结构与样式。○在ide中查看手机 network&storage 等信息。○在ide中查看小程序在手机端的运行日志。点击右上角工具栏中的 真机调试，选择 自动推送（自动推送到手机）或 扫码调试（支付宝客户端扫描二维码），接下来模拟器上会展示连接信息，同时在手机上会显示 远程调试已连接。●预览：推送小程序开发包到登录ide的开发者支付宝账号手机端进行真机预览体验；默认自动推送预览，可选择扫码预览；进入预览版小程序内，可以点击右上角三个点打开“调试面板”和“性能面板”，查看相关日志和小程序性能，更好的调试和优化小程序。●上传：上传项目代码到关联的小程序应用开放平台后台，在开发管理中生成一个小程序版本，上传时版本号会默认在上一次上传的版本号 1，无需手动设置。●详情：打开详情页面可以查看关联小程序的应用信息（appid和小程序名称），当面项目详情（可查看本地目录，线上版本号，构建产物包大小），项目配置（使用到component2编译的功能时一定要勾选启动component2 编译），域名信息（显示已经添加至白名单中的域名；开发版测试网络请求和web-view内嵌html 5页面时，可勾选对应的忽略域名合法性检查，上线前一定要添加域名至白名单中）。●登录：点击登录弹出登录二维码，开发者使用开发成员支付宝账号扫码登录ide，需要时可以点击退出登录。 注意：●真机调试必须使用 https 的链接，必须配置域名白名单，小程序目前只支持 https 域名配置请求接口。●真机运行体验版时，不可以访问地址为 ip 端口号的接口，体验版需要配置白名单。本地 ide 开发版需要在 ide 上勾选 忽略白名单 才可以。相关文档开发工具概述
