企业资讯
首页 > 资讯中心 > 企业资讯 > 支付宝小程序开发者工具(IDE)下载(图)

支付宝小程序开发者工具(IDE)下载(图)

发布时间:2021-03-22    来源:广州网站优化公司     浏览次数:

一、 小程序开发人员工具(IDE)下载

下载并安装小程序开发人员工具(简称IDE)。

IDE可以集成多终端小程序项目。蚂蚁开放式生态系统中也经常使用相同的代码,并且可以将其直接发布到淘宝,鼎鼎和高德等应用平台。 ,本文仅说明基于IDEVersion 1. 5. 7版本的支付宝小程序的使用。

1、选择项目界面,然后选择“支付宝”> 小程序。

([1)启动IDE开发人员工具>模板选择> UI。

([2)选择待办事项小程序,单击下一步>创建一个新的演示项目,进入IDE编辑界面。

2、进入开发编辑界面

([1)进入开发界面后,您可以阅读README.md来了解演示项目。

(2)如果在界面的右下角提示找不到Node可执行文件,则可以检查计算机上是否已安装nodejs。如果已安装,请单击“手动设置Node”。路径以设置正确的安装路径;如果未安装,则可以转到提示链接:下载并安装(由于IDE开发工具对NODEJS具有一定的依赖性,因此不能保证未安装该功能)。

二、 IDE开发界面功能介绍和使用

IDE界面可分为左侧功能面板,编辑器,调试器,模拟器,顶部菜单栏和顶部工具栏。功能用法将按以下顺序介绍。

1、左功能面板

([1)资源管理器:管理当前的小程序项目目录,您可以右键单击该项目目录以创建,打开,复制,剪切和其他操作。

([2)跨文件搜索:使用此功能,您可以在小程序项目中全局搜索相关代码,并且可以执行替换操作。

([3)源代码管理:IDE提供的GIT仓库管理,方便小程序项目管理。

(4)扩展市场:扩展市场为开发人员提供了丰富的插件功能,可以通过插件市场安装它们并启用所需的功能,例如沙盒环境切换插件,nui-app跨平台开发扩展和其他有用的插件功能。

(5)实验室:该实验室提供预测试,实机云测试,性能调试和开发监视,以帮助开发人员在小程序正式审核之前全面测试小程序审计指标和更多风险。 k7]功能和性能问题,提高审核通过率。

([6) NPM依赖性管理:用于管理小程序项目的npm依赖性的安装和更新。

([7) Cloud Service:云服务项目使用的功能(创建项目时,您需要选择创建小程序无服务器或云应用程序云服务)。

(8)体验反馈:在使用IDE编程的过程中小程序开发,如果遇到异常或遇到不友好的地方,可以使用此功能反馈给IDE开发团队,共同提供更好的编程体验。

([9)设置:

a。设置:您可以设置IDE工具(编辑器,代理等)的配置。

b。快捷键:您可以在IDE中设置和查看命令快捷键。

c。颜色主题:设置IDE主界面的颜色。当前,只能选择深色和浅色,默认值为深色。

d。文件图标主题:设置文件图标。当前,只能选择Seti UI和最小(Visual Studio代码)。默认是Seti UI。

2、编辑器

输入并修改代码区域。

([1)编辑小程序代码,您可以在资源管理器中双击要编辑的项目文件,它会在编辑器中自动打开(您可以按住文件头以移动位置(方便开发)。编辑器实现实时预览并自动完成:

a。实时预览:编写小程序时可以实现模拟器效果的实时快速预览。编辑并保存axml,acss,js,json文件后广州做网站,模拟器将在实时编辑后预览编译状态。

b。 AXML自动补全:AXML自动补全可以在编写AXML文件时帮助完成AXML标签对,从而减少编码疏忽和布局错误。例如,输入后,开发人员工具将自动完成配对。

c。 API自动完成和语法提示:在输入代码时,开发人员工具将实时显示可能的API和相关的语法提示。

(2)用鼠标单击编辑器,您可以使用右键或快捷键来操作常用命令,并可以通过左下角的设置来设置编辑器的某些属性。

(3)编辑器的右上角有2个功能:向右拆分并切换到设计模式。

a。右侧拆分:拆分编辑器以实现多页编程。

b。切换到设计模式:设计模式是从原始组件面板(当前为设计面板)升级的。您可以通过拖放进行编程,切换后即可亲自体验。

3、调试器

默认情况下,调试器是关闭的。如果需要调试代码,可以单击顶部工具栏中的调试器按钮将其打开。用于模拟器调试,实机调试,性能调试。开发人员可以使用调试器功能来调试在开发过程中遇到的js异常。

(1)控制台:开发人员可以通过控制台查看系统和开发人员自己打印的日志。红色的日志表示存在错误,黄色的是提醒。开发人员可以在其中添加调试器。制作断点调试的js代码(当前版本不支持双击左侧的代码符号来添加断点)。

([2) AXML:您可以查看页面上相应元素的绑定属性,并显示诸如元素在模拟器中的位置之类的信息;您可以单击左侧的箭头按钮以反转选择元素在模拟器中的位置,并在AXML中显示相应的元素信息。

([3) Sources:断点调试后,它将跳转到Sources进行执行跟踪。

([4)存储:您可以通过在代码中调用缓存API来查看存储的缓存信息。

([5) Network:可以查看网络请求信息,可以用于调试my.request。

([6) Data:您可以在页面的js文件中查看添加到数据中的数据。

4、模拟器

模拟操作小程序,方便快速预览和初步调试。 小程序编译项目后,它将自动在模拟器中运行,并且可以快速预览,而无需实际机器。基本的交互方法是通过用鼠标单击和拖动来模拟手指的触摸和拖动操作。

模拟器顶部的功能(从左到右):

([1)设备大小:选择预设的iOS或Android设备大小,或创建新的自定义设备大小以测试适用性。

([2)缩放比例:控制小程序的显示缩放比例。

([3)刷新:重新编译代码并刷新模拟器。

([4)小工具:打开/关闭模拟器的小工具菜单。

([5)模拟器日志:在编辑器中打开模拟器日志窗口。

([6)独立窗口:改用独立窗口来显示模拟器。

模拟器底部的三个功能:

([1)页面路径:显示当前页面路径。单击该路径可直接打开当前页面js文件。

([2)页面参数:显示当前页面上收到的参数。单击参数以快速复制到剪贴板。

(3)自动刷新:在默认设置下,每次保存更改后的代码都会触发模拟器自动刷新小程序开发,以实现准实时预览效果。如果需要避免频繁刷新,您可以可以取消选中此功能。

Simulator窗口小部件:单击窗口小部件图标以显示/隐藏更多模拟功能。

(1)“主页”按钮:模拟按下“主页”按钮,小程序返回后台。用于测试onShow和onHide的生命周期功能。

(2)位置设置:设置纬度和经度模拟信息(浮点数,必须精确到1个十进制以上),用于测试my.getLocation以获取用户位置API。

([3) Scan:设置扫描代码以返回数据模拟信息,该信息用于测试my.scan扫描API。

([4) Shake Shake:模拟摇晃和摇晃动作,用于测试my.watchShake Shake API。

(5) WebView调试:启动一个专用的DevTools窗口,用于调试嵌入在Web视图中的HTML5页面(此功能仅在进入Web视图嵌入的HTML5页面时可用,而其他页面则变灰且无法单击)

(6)授权管理:设置:地址位置,麦克风,相册,相机模拟权限,可用于测试诸如my.getLocation,my.chooseImage之类的API的权限请求步骤。已经获得,它还提供了删除用户信息授权的选项,可以用来测试获取用户信息的能力。

([7)裁剪:模拟用户屏幕截图,用于测试my.onUserCaptureScreen屏幕快照事件监视API。

([8)内存警告:模拟手机内存不足以测试my.onMemoryWarning内存警告监视API。

5、顶部菜单栏

([1) 小程序开发人员工具。

a。关于:您可以查看IDE的版本信息。

b。设置:打开IDE左下角的设置界面以设置IDE配置。

c。查看更新日志:转到小程序更新日志文件。

d。退出:退出IDE等同于在右上角将其关闭。

([2)文件:您可以创建新项目,切换和保存等。

([3)编辑:复制,剪切,粘贴,撤消,重做和选择编辑器上的所有操作(可以通过快捷键触发)。

([4)窗口:您可以调整IDE主界面的布局。

([5) Tools:顶部工具栏和左侧功能面板上的按钮集合,单击以选择相应的工具和功能进行操作

(6)帮助:当IDE在开发过程中出现异常并且无法正常编程时,可以单击“帮助”以选择相应的帮助功能来查找和解决。(可以单击以上传本地日志以提供帮助。 IDE开发的学生可以更好地定位异常,提供更好的IDE编程体验。)

6、顶部工具栏

更改小程序的类型和关联,显示/隐藏界面区域,实际机器调试和预览功能。

左侧是项目类型和相关的小程序应用程序。

([1)项目类型:您可以通过切换项目类型来使用相同的代码进行多端开发。

([2)关联小程序应用程序:只有在关联小程序应用程序之后,才能使用和测试真实机器预览,调试和授权类型的API等功能。

右侧是编译模式,缓存清除和实际机器调试。

(1)编译模式:您可以通过添加自定义编译模式来测试全局参数和页面参数的获取(开始参数测试);同时,您可以在下一次编译期间检查模拟更新,并且模拟调试并更新模拟器中的管理功能(此检查仅对模拟器有效,对真实机器预览无效)。

([2)清除缓存:它可以清除IDE上的数据,授权,网络,构造和文件缓存。

(3)实机调试:为了方便实机调试,IDE提供了远程实机调试功能:

a。在IDE断点小程序上调试遥控器。

b。在IDE中查看远程接口的AXML结构和样式。

c。在IDE中检查电话的网络和存储以及其他信息。

d。在IDE中的手机上查看小程序的运行日志。

单击工具栏右上角的真实机器调试,选择自动推送(自动推送到手机)或扫描代码调试(Alipay客户端扫描QR码),然后连接信息将显示在模拟器上,并同时在手机上显示远程调试已连接。

([1)预览:将小程序开发包推送到登录IDE的开发人员的支付宝帐户的手机端,以获得真实的设备预览体验;默认自动推送预览,您可以选择扫描代码预览;输入预览版本小程序,可以单击右上角的三个点打开“调试面板”和“性能面板”,查看相关日志和小程序性能,更好地进行调试和优化小程序

([2)上载:将项目代码上载到相关的小程序应用程序开放平台后台,在开发管理中生成小程序版本,上载时版本号将默认为先前的上载版本号+1 ,无需手动设置。

([3)详细信息:打开详细信息页面以查看与小程序相关联的应用程序信息(APPID和小程序名称),并亲自查看项目详细信息(您可以查看本地目录,在线版本号,生成产品包装的大小),项目配置(使用组件2编译的功能时,请务必检查以启动组件2编译),域名信息(显示已添加到白名单中的域名;开发版本测试网络请求和在网页视图的html 5嵌入式网页中,您可以选中相应的“忽略域名有效性检查”,并确保在上线之前将域名添加到白名单中。)

([4)登录名:单击登录名以弹出登录QR码,开发人员使用开发人员成员的支付宝帐户扫描该代码以登录到IDE,然后单击注销(如果需要)。

注意:

上一篇:主题邦科技:小程序开发需求确认方法技巧技巧分享

下一篇:微信点餐小程序怎么做,微信扫码餐系统多少钱一套

返回顶部

售前客服QQ

售后客服QQ

加微信交谈

加微信交谈

x