Skip to main content
 Web开发网 » 站长学院 » 浏览器插件

05. 零基础开发小程序——认识微信开发者工具的基本使用

2021年10月10日6280百度已收录

写在前面:本篇文章带领大家一起认识微信开发者工具中主要的按钮和功能。

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第1张

更详细的使用,请移步微信官网自行学习。

主界面

开发者工具主界面,如下图所示。 从上到下,从左到右,分别为:菜单栏、工具栏、模拟器、目录树、编辑区、调试器 六大部分。 接下来,我们讲解一下各个界面的主要子功能按钮~

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第2张

(一)菜单栏

1、项目

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第3张

图2 项目子菜单

2、文件

保存、另存为、全部保存三个按钮均可以将右侧编辑区的所有内容进行保存; 但我们一般使用Ctrl+S 即可。

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第4张

3、编辑

此菜单主要控制代码编辑区内的使用; 如下图所示,打开编辑区的任意文件-点击“编辑”-即可实现对代码的相关操作

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第5张

4、工具

“工具”菜单内的各按钮与主界面中的工具栏一致,具体见下图

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第6张

5、界面

“界面”菜单内的各按钮与“工具栏”内前三个按钮(模拟器、编辑器、调试器)一致, 功能都是类似的,具体见下图。

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第7张

6、设置

分为通用设置、外观设置、快捷键设置、编辑器设置等,大家自行点击查看~熟悉一下即可。

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第8张

7、微信开发者工具

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第9张

(二)工具栏

1、模拟器、编辑器、调试器所在位置详见下图

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第10张

点击“模拟器”-按钮绿色变灰色-“模拟器”界面隐藏,操作如下图所示。

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第11张

2、小程序模式-“插件模式”

微信开发者工具APP既能够开发完整的小程序应用,也能开发后期可被小程序所引用的插件 这里我们选择“小程序模式”选项。

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第12张

3、普通编译

下拉选项有:

普通编译:指的是下图左侧的小程序主界面 添加编译模式

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第13张

注意:

当你的小程序只有一个主界面(下图左侧区域)时,就为“普通编译” 当后期涉及多个小程序界面时,会增加编译模式,到时自行选择使用哪个即可。

4、编译、预览

当编辑完代码,点击“编译”按钮,小程序主界面(下图箭头所指方向)进行更新; 按下“CTRL+S”同样也可以更新主界面。

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第14张

点击“预览”按钮-生成二维码-手机扫描-出现下图左侧小程序界面 预览的目的:查看小程序在手机上的呈现情况。

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第15张

5、真机调试

点击“真机调试”按钮-生成二维码-手机扫描-对小程序进一步操作

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第16张

6、切后台

点击“切后台”按钮-选择相应的界面(下图所示) 这是为了在真实的手机里模拟小程序切换界面。

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第17张

7、版本管理、测试号相关介绍略(比较简单,大家自己点进去了解一下~后期用到还会详细讲解的哦~~)

8、详情

点击“详情”按钮-基本信息中“AppID”在这里可以修改~

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第18张

(三)模拟器

1、机型

用来模拟不同手机型号下,微信小程序页面的不同,这里大家自行选择就好~

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第19张

2、模拟器-显示比例

点击“显示比例”按钮 — 选择不同的比例 — 小程序页面发生变化,如下图所示。

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第20张

3、模拟器-Home

点击“模拟器”--home--小程序切换至后台界面; 这与“工具栏-切后台”按钮功能一致~ 操作如下图所示

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第21张

4、模拟器-终止

点击“终止”按钮--模拟器终止状态--点击“工具栏-编译”按钮--界面重新加载 操作如下图所示

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第22张

5、模拟器-静音

点击“静音”按钮--小程序界面不会发出任何声音--再次点击--页面恢复声音模式

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第23张

6、模拟器-分离窗口

点击下图位置-小程序页面分离成独立窗口-关闭页面-回到原来的模式 操作见下面的动图~~

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第24张

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第25张

7、模拟器-页面路径

下图可以看到模拟器的页面路径

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第26张

页面路径右侧按钮--点击后--出现二维码预览(同“工具栏-预览”按钮)

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第27张

(四)目录树

这是小程序的资源管理器,与“我的电脑”中小程序相关文件夹一致; 点击“+”按钮--新建文件夹(操作如下图); 点击某一文件夹--右键--选择“在资源管理器中显示”--即可看到它在电脑中的位置 操作如下图

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第28张

(五)编辑区

如图所示,对代码的编辑在这里可以实现;

大家也可以使用其他的编码工具,比如:vs code

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第29张

(六)调试器

05. 零基础开发小程序——认识微信开发者工具的基本使用  微信小程序开发工具 第30张

这一部分的使用,以后的课程中会陆续讲到~~尽情期待~~

评论列表暂无评论
发表评论
微信