编译:编译当前小程序项目
刷新:与编译后的功能一致,由于历史原因保留了对应的快捷键ctrl+R
编译配置:可以选择正常编译或自定义编译条件
前后切换:模拟客户端小程序后台运行、返回前台的操作
清除缓存:清除文件缓存、数据缓存、授权数据
5.界面:控制主界面窗口模块的显示和隐藏
6. 设置:
外观设置:控制编辑器的颜色主题、字体、字体大小和行距
编辑设置:控制文件保存行为、编辑器性能
代理设置:选择直接网络、系统代理和手动代理设置
通知设置:设置是否接受某些类型的通知
第三章 工具栏
1.点击头像快速扫码切换用户或查看开发者收到的消息。
2.头像右侧的三个按钮可以分别控制模拟器、编辑器、调试器的显示/隐藏(但要保证至少显示一个模块)
3、中间的两个选项“小程序模式”和“普通编译”不需要改3D素材,默认即可。
4、切换后台/前台按钮,模拟小程序进入后台或返回前台(主要用于调试你的后台逻辑设计是否合理,我们会在小程序开发中详细讲解)。
5、工具栏提供“清除缓存”快速入口(菜单栏中也有),可以轻松清除文件缓存、数据缓存和后台授权数据,方便开发者调试。
6、最右边的“>>”是开发者辅助工具(需要部署Git仓库和远程管理代码),可以上传代码、版本管理、查看项目详细信息。
7. 右键单击工具栏,打开工具栏管理菜单。
第四章 模拟器
模拟器可以模拟小程序在微信客户端上的表现。 小程序的代码编译后可以直接在模拟器上运行。 读者可以选择不同的设备或者添加自定义设备来调试小程序在不同尺寸机型上的适配情况。
点击模拟器右上角的按钮,可以使用独立窗口显示模式(如果觉得“编辑区域”不够大,或者是双屏的话可以使用)。
在模拟器底部的状态栏中,可以直观地看到当前运行的小程序的场景值、页面路径和页面参数。
设置
第五章 开发者工具相关设置
1.支持配置开发者工具的外观和代码编辑器的习惯和风格。
(中国人开发的编辑器很有思想,也很容易理解,读者可以根据自己的喜好在里面探索更多)
2. 代理设置
如果小程序没有特殊的网络要求(比如外墙测试、公司内网测试等),默认配置一般是不使用代理。 您可以根据开发需要选择使用系统代理或使用自定义代理。
3. 安全设置
可以开启和关闭CLI(命令行调试功能)或HTTP远程调试功能(本地开发小程序一般默认关闭)
代码编辑
(上面已经介绍了该工具的界面和设置,让您初步了解了小程序开发者工具,接下来要使用它来编写代码,所以这一部分我们对代码进行相关设置)
第六章 文件操作
“文件”是指读者在小程序开发过程中编写的每一个代码文件。 编辑区可以对当前工程进行代码编写以及文件的添加、删除、重命名等基本操作。
1. 文件格式
由于iOS上仅支持UTF8编码格式,因此最新版本的开发者工具在上传代码时会对代码文件进行编码格式检查。
2. 文件支持
该工具目前提供wxml、wxss、js、json、wxs 5种文件的编辑(WeiXin Script是一种小程序的脚本语言,其功能类似于JavaScript,请注意与wxss不同)和预览图像文件。
3. 文件操作
创建新页面有两种方法:在目录树上右键,选择新建页面,会自动生成页面所需的wxml、wxss、js、json; 或者在app.json的pages字段中添加需要创建的页面的路径,并添加该页面所需的文件将会自动生成
4.自动保存
当读者编辑代码时,该工具会自动保存当前代码编辑状态。 直接关闭工具或切换到另一个项目,不会丢失已编辑的文件状态。 但需要注意的是,只有当用户主动保存文件时,修改的内容才会真正写入硬盘。
如果在设置中打开“修改文件时自动保存”(设置-编辑设置-自动保存修改的文件),该工具在修改文件时会自动保存到硬盘,无需手动保存。
在设置中开启“编译时自动保存所有文件”(设置-编译设置-编译时自动保存所有文件),点击编译即可自动保存所有文件。
(其实我更喜欢用后者,就是默认的“编译时自动点击保存”,因为我感觉不需要一直读写电脑硬盘,感觉更省心)轻松……当然因人而异)
5. 实时预览
如果在设置中打开了“保存文件时自动编译小程序”(设置-编辑设置-保存时自动编译小程序),那么当修改wxml、wxss、js、json文件时,可以实时预览编辑情况通过模拟器。 :
(如果同时打开“修改文件时自动保存”设置,编译动作会有一定的延迟,避免频繁编译。手动点击编译按钮会立即编译。其实我觉得默认的设定还是不错的)
第七章 代码运行与管理
1.自动完成
与大多数编辑器一样,该工具提供了相对完整的自动完成功能。
js文件编辑将帮助开发者完成所有API及相关注释和说明,并提供代码模板支持; wxml文件编辑将帮助开发者直接在标签中编写相关标签和属性; json 文件编辑将帮助开发者完成完全相关的配置和实时提示。
2.TypeScript支持
TypeScript 是 JavaScript 的超集(说白了,JavaScript 有全部 TypeScript,而 TypeScript 可能没有部分 JavaScript)。 TypeScript 扩展了 JavaScript 的语法。 要构建和使用 TypeScript 项目,需要安装 npm。 通过配置预编译预设命令,可以在编译前运行tsc(命令插件)将其编译成js文件。
(建议读者不要想太多,直接使用JavaScript即可)
3.Git状态显示
如果小程序项目目录(project.config.json所在目录)下有Git仓库,编辑器可以显示当前Git状态。
(目前本地开发不需要配置Git仓库,以后我也会添加Git远程开发小程序的相关内容)
4.目录树状态
如图所示,当某些文件发生更改时,目录树中该文件的右侧会显示相应的图标来指示此状态。 当折叠的目录中有更改的文件时,该目录的右侧也会显示一个点图标来指示这种情况。
U:文件未被跟踪(Untracked)
A:新文件(已添加、已暂存)
M:文件已被修改(Modified)
+M:文件已被修改(Modified, Staged)
C:文件有冲突(Conflict)
D:文件被删除(Deleted)
红点:目录中至少有一个被删除的文件
橙点:目录中至少有一个冲突文件。
蓝点:目录中至少有一个未跟踪的文件
绿点:目录中至少有一个被修改的文件
5.代码历史版本对比
如果文件被修改,可以右键单击该文件,选择“与以前版本比较”,查看当前工作区文件与头版本的比较情况。
小程序调试
第8章 模拟器调试小程序
模拟器模拟微信小程序在客户端的真实逻辑表现,大部分API都能在模拟器上呈现正确的状态。
1. 编译程序
单击工具栏中的编译按钮或使用快捷键Ctrl+B,编译当前代码并自动刷新模拟器。
2.前后切换
工具栏中的“前后切换”可以帮助开发者模拟一些客户端环境操作。 例如,当用户从小程序返回微信聊天窗口时,会触发设置在小程序后台的回调。 下面解释回调。
回调函数(我们将其设置为A)是一个参数。 这个函数A作为参数传递给另一个函数B,函数B执行完之后,就执行刚刚传入的函数A。 这个过程称为回调。
(callback可以理解为回调,main函数提前做好后,后面会调用传入的函数。比如:约会结束后,你送女朋友回家,然后你说:“交给“发短信。”然后你女朋友到家后给你发消息,其实这是一个回调过程,你留一个参数函数(要求你女朋友给你发短信)你女朋友,然后当你女朋友回家的时候,回家的动作就是main函数,她必须先到家,main函数执行完之后,再执行传入的函数,然后你就会收到一条消息)
第9章 调试工具
调试工具分为7个功能模块:Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace
1.Wxml面板
wxml面板用于帮助开发者开发wxml转换后的界面。 这里可以看到真实的页面结构以及该结构对应的wxss属性。 同时可以修改相应的wxss属性,并在模拟器中实时看到修改情况(只能实时预览,不能保存到文件中)。 通过调试模块左上角的选择器,还可以快速定位到页面中组件对应的wxml代码。
2. 来源面板
Sources 面板用于显示当前项目的脚本文件。 与浏览器开发不同,微信小程序框架会对脚本文件进行编译手机游戏辅助开发教程,因此开发者在Sources面板中看到的文件都是经过处理的脚本文件。 开发用户的代码会被包装在define函数中,而对于Page代码,最后会有一个主动调用require。
3.应用程序数据面板
AppData面板用于展示当前项目运行时小程序AppData的具体数据,实时反映项目数据。 可以在这里编辑数据并及时反馈到界面。
4. 储物面板
Storage面板用于显示当前项目使用wx.setStorage或wx.setStorageSync后的数据存储状态。 可以直接在存储面板上删除(按删除键)、添加和修改数据。
5. 网络面板
网络面板用于观察和显示请求和socket请求状态。
6. 控制台面板
控制台面板有两个主要功能:
(1)开发者可以在这里输入和调试代码
(2)可以在控制台输入以下命令
build:编译小程序
预览: 预览
上传:上传代码
openVendor:打开基础库所在目录
openToolsLog:打开工具日志目录
checkProxy(url):检查指定url的代理使用情况
7. 传感器面板
传感器面板有两大功能:
(1)读者可以在这里选择模拟地理位置
(2)读者可以在这里模拟移动设备的性能来调试重力感应API。
真机调试
第10章 程序打包
如果读者在“小程序开发者工具”中调试没有问题,就可以制作开发版或者体验版进行真机测试。 因为有些模块无法在“小程序开发者工具”中调试,比如蓝牙模块。
不过,在部署自己开发的小程序之前,通常会对代码进行打包压缩,这样可以减少代码体积,有效提高访问速度。 然而,压缩代码的错误信息很难调试,因为它的行号和列号已经被扭曲。 这时候就需要Source Map来恢复真实的错误位置。 小程序打包时,所有js代码都会打包到一个文件中。 为了方便开发者在手机调试时定位错误位置,小程序提供了Source Map支持。 (有关Source Map的相关信息请参考此链接)
当开发者工具中开启ES6(ECMAScript 6.0)转ES5(ECMAScript 6.0)和代码压缩时,会生成一个Source Map .map文件。 在开发版本的小程序中,基础库会使用代码包中的.map文件重新映射vConsole中显示的错误信息堆栈(仅适用于开发者代码文件)。
第十一章 真机调试
(如果是访客模式,将无法使用工具栏中的“真机调试功能”,本章我们不默认访客模式,下面会讲解真机调试过程。)
1. 要启动真机远程调试过程,需要先点击开发者工具工具栏上的“真机调试”按钮。 此时,该工具将对本地代码进行处理、打包并上传。 准备好后,使用手机客户端扫描二维码即可弹出调试窗口,开始远程调试。
2. 使用手机扫描此二维码开始远程调试。 要结束调试,只需关闭调试窗口或单击右下角的“结束调试”按钮即可。
远程调试窗口分为两部分,左侧是调试器视图,右侧是信息视图。 开发人员可以直接在调试器中调试代码并检查Storage(如上所述); 信息视图可以查看当前与手机和服务器的连接状态,以及发生的错误信息。
3、在远程调试调试器中,开发者可以在Console面板中调试代码游戏评测,在Sources面板中查看小程序源码并进行断点单步调试,在Storage中查看小程序的存储使用情况控制板。 情况等
注意,要在Console中调试小程序,需要将调试上下文切换到VM上下文1,如图所示。
调试模拟器时,WXML、AppData、Storage 面板的操作与开发者工具一致。 请注意,如果在右侧信息视图中取消选中“在工具端使用存储”,则所有存储数据都将存储在手机上,并且不再出现存储面板。
4. 下图显示手机及网络连接信息。 此外,还包括手机的型号、系统、名称、微信版本等信息,以及通讯延迟等信息。 通讯延迟越小,与手机通讯越顺畅。
在“连接信息”中,显示了工具与服务器之间的连接信息,包括连接状态、服务器状态等。当连接失败或服务器阻塞影响调试过程和流畅性时,这里会显示此状态。 当连接状态为“Ended”时,表示调试已终止。
“警告和错误”显示最近的错误和警告消息。 如果网络连接丢失,开发者会被询问是否需要重新连接。
5.手机调试
调试过程中手机显示如下。 当手机无网络或进入断点状态时,会弹出提示并阻止进一步操作。
6.小游戏远程调试
如果你正在开发一个小游戏,它与小程序略有不同。 “上下文”列可能会出现在调试窗口的右侧,您可以单击要调试的不同 JavaScript 上下文。 默认情况下,为了方便调试,该工具会上传包含完整源代码的Source Map。 如果不想上传,或者代码行号映射错乱,可以在右下选项中关闭该选项手机游戏辅助开发教程,并在项目详情中取消勾选“上传代码时自动压缩和混淆”选项。
(以上内容是小程序开发者工具的详细讲解,读者可以使用它开始开发自己的小程序。建议读者看一下《官方文档》-->《教你设计高分》 -精品程序》了解小程序。程序的整体设计思路,毕竟开发者在敲代码之前需要和产品经理深入沟通)