主接口该工具的主界面如下图所示。从上到下,从左到右,有六个部分:菜单、工具栏、模拟器、目录树、编辑区、调试器。接下来我们来解释一下各个界面的主要子功能按钮~(1)菜单栏1
主接口
该工具的主界面如下图所示。从上到下,从左到右,有六个部分:菜单、工具栏、模拟器、目录树、编辑区、调试器。接下来我们来解释一下各个界面的主要子功能按钮~
(1)菜单栏
1。项目
图2项目子菜单
2。文件
保存、另存为、全部保存按钮可以保存右侧编辑区的所有内容;但是我们一般用Ctrl+S。
3。编辑
该菜单主要控制代码编辑区的使用;如下图所示,在编辑区打开任意文件——点击“编辑”——即可对代码进行相关操作
4。工具
工具菜单中的按钮与主界面中的工具栏一致,如下图所示。
5。接口
“界面”菜单中的按钮与“工具栏”中的前三个按钮(模拟器、编辑器、调试器)相同,功能相似。详见下图。
6。设置
分为通用设置、外观设置、快捷键设置、编辑器设置等。可以自己点击查看~熟悉一下。
7。微信开发者工具
(2)工具栏
1.关于模拟器、编辑器和调试器的位置,请参见下图
点击“模拟器”——按钮变绿变灰——“模拟器”界面隐藏,操作如下图所示。
2、小程序模式——“插件模式”
微信工具APP不仅可以开发完整的小程序应用,还可以开发后期小程序可以引用的插件。这里我们选择“小程序模式”选项。
3。一般编译
下拉选项包括:
通用编译:指在下图左侧的小程序主界面添加编译模式。
注意:
当你的小程序只有一个主界面(下图左边的区域)时,就是“正常编译”。后期涉及多个小程序接口时,会加入编译模式,可以选择用哪个。
4。编译和预览
编辑完代码后,点击“编译”按钮,更新小程序主界面(下图箭头所示方向);按“CTRL+S”也可以更新主界面。
点击“预览”按钮-生成二维码-扫描手机-出现下图左边的小程序界面预览的目的是查看小程序在手机上的呈现。
5。真机调试
点击“真机调试”按钮-生成二维码-扫描手机-进一步操作小程序
6。剪切背景
点击“剪切背景”按钮——选择对应界面(如下图)这是模拟真实手机中的小程序切换界面。
7.版本管理和测试号简介(比较简单,大家点进去了解一下~后面使用会详细讲解~ ~)
8。详细信息
点击“详细”按钮——基本信息中的“AppID”可以在这里修改~
(3)模拟器
1。型号
用来模拟不同手机型号下微信小程序页面的差异。在这里,你可以自己选择~
2。模拟器-显示比例
点击“显示比例”按钮-选择不同的比例-小程序页面发生变化,如下图所示。
3。模拟器-主页
点击“模拟器”–首页–小程序切换到后台界面;这和“工具栏-剪切背景”按钮的功能一致~操作如下图所示。
4。模拟器-终止
点击“终止”按钮–模拟器的结束状态–点击“工具栏-编译”按钮–界面重载操作如下图所示。
5,模拟器静音
点击“静音”按钮–小程序界面不会发出任何声音–再次点击–页面恢复声音模式
6。模拟器-分离窗口
点击下图所示位置-小程序页面分离成独立窗口-关闭页面-返回原模式。看下面的动画~ ~
7、模拟器-页面路径7。模拟器-页面路径
下图中可以看到模拟器的页面路径。
页面右侧的按钮–点击–出现QR码预览(与“工具栏-预览”按钮相同)
(4)目录树
这是小程序的浏览器,和我电脑里小程序相关的文件夹一致;点击“+”按钮–新建一个文件夹(如下图);点击一个文件夹–右键–选择“在浏览器中显示”–你可以在电脑里看到它的位置。操作如下所示
(5)编辑区
如图,这里可以实现代码的编辑;
也可以使用其他编码工具,比如vs代码。
(6)调试器