微信小程序开发项目实战（微课版）课件 1-2 课件-认识小程序开发者工具.pptx

项目一初识微信小程序任务二认识小程序开发者工具MiniProgram

为了帮助开发者简单和高效地开发和调试微信小程序，推出了微信开发者工具，该工具集成了公众号网页调试和小程序调试两种开发模式。工具在官方网站/miniprogram/dev/devtools/devtools.html上下载。安装微信开发工具Next》项目一初识微信小程序

下载完成后，双击wechat_devtools_1.05.2111300_x64.exe文件进行开发工具的安装。安装步骤如图-图所示。Next》项目一初识微信小程序

项目一初识微信小程序选择安装路径

Next》项目一初识微信小程序

项目一初识微信小程序体验微信小程序

成功登录之后，双击微信开发者工具，在左侧导航栏选择“小程序”选项，单击右侧的“+”按钮，进入创建小程序界面。Next》项目一初识微信小程序

Next》项目一初识微信小程序进入“创建小程序”界面，依次填入“项目名称”、“目录”、“AppID”、“开发模式”、“后端服务”、“语言”以及“模板选择”。为方便开发者开发和体验小程序、小游戏的各种能力，开发者可以申请小程序或小游戏的测试号。

Next》项目一初识微信小程序Next》当开发者创建项目之后，会进入到微信开发者工具的界面。从图中可以看出，微信开发者工具的主界面主要由菜单栏、工具栏、模拟器、资源区、编辑器、调试器组成。

Next》项目一初识微信小程序菜单栏：通过菜单栏可以访问微信开发者工具的大部分功能，常用的菜单如下：项目文件编辑工具转到选择视图界面设置帮助微信开发者工具

Next》项目一初识微信小程序工具栏：提供了一些常用功能的快捷按钮，具体说明如下：

Next》项目一初识微信小程序Next》模拟器：用于在计算机中模拟小程序在不同型号手机上的执行效果，小程序的代码通过编译后可以在模拟器上直接运行。开发者可以选择不同的机型，以及显示比例和字体大小。

Next》项目一初识微信小程序Next》资源区：在资源管理区里，可以添加新的文件，文件类型包括WXML、JS、WXSS和JSON。在资源管理区还可以创建新的文件夹。

Next》项目一初识微信小程序Next》编辑器：在代码编辑区中可以打开多个页面切换查看，在代码编辑区域，小程序提供自动联想功能。

Next》项目一初识微信小程序Next》调试器：调试工具主要包括Wxml、AppData、Console、Sources、Storage、Network、Memory、Security、Sensor、Mock、Audits、Trace和Vulnerability功能模块。

感谢观看THANK