教女朋友微信小程序（二）

本章内容

1. 微信开发者工具介绍
2. 小程序结构目录介绍

微信开发者工具介绍

这一章，我将介绍微信开发者工具的一些功能与之后我们将如何使用该工具进行开发。本人只选择一些我觉得重要的内容进行讲解，详细内容可以去官方微信开发者工具文档进行查阅。

模拟器

顾名思义，这个部分的功能就是在电脑上模拟小程序在手机上的预览情况，有过安卓开发经验的同学应该十分清楚了。我们可以在模拟器上预览和操作写好的小程序，它是我们后续开发经常用到的部分，下面将详细介绍。

更改屏幕尺寸及显示比例

在模拟器区域的左上角可以更改模拟器屏幕的尺寸以及显示比例。

它里面有一些内置好的机型的屏幕尺寸可供选择，当然也可以自定义屏幕尺寸来调试小程序在不同尺寸机型上的适配问题。

如果觉得当前模拟器显示比例不合适，还可以更改模拟器的显示比例。

模拟操作

在模拟器上可以进行一系列的模拟手机环境的操作。

模拟操作里有选择网络情况、点击Home键、返回、销毁页面及深色模式等操作，可以在不同情况下进行调试。

这里的网络情况有WIFI、2G信号、3G信号、4G信号和Offline（断网）可供选择，但是这个网络调试有时候好用有时候不准，对我来说还是更喜欢真机调试，这样更能反映情况。
另外，此处的销毁并不清除本机缓存。

当点击模拟操作里的Home时会弹出以下窗口：

至于什么是场景值，在讲到工具栏的添加编译模式时会介绍。

终止

按下终止之后就会使模拟器停止模拟，在你电脑比较卡的时候可以使用。想重新启用模拟器，点击工具栏上的编译按钮即可。

静音

很简单，就是将模拟器静音，当你的小程序加入了一些背景音乐，而你在编写程序的过程中不想听的话可以将其静音。

分离窗口

模拟器可以单独弹出成为一个独立窗口。

在点击分离窗口之后，模拟器就弹射起飞了！

查看编译条件

在模拟器下方可以查看当前页面的一些编译条件。

此处的编译条件包括：页面路径、页面参数和场景值，这三个数值我们在以后还会经常遇到，以后再解释，总之，我们只要知道可以在这里查看这些数值就行了。

预览

此处的预览和工具栏的预览一样的，当点击此处预览时，最终也是在工具栏的预览那里显示预览的二维码，具体的在讲到工具栏的预览时一并讲解。

生成骨架屏

何为骨架屏，骨架屏就是在页面尚未加载之前先给用户展示出页面的大致结构，直到页面请求数据后渲染页面。在整个过程中用户在主观上会觉得很流畅，骨架屏可以降低用户的等待期间的焦躁情绪。具体可以参考这篇文章：
vue骨架屏介绍
在点击生成骨架屏之后，微信开发者工具会在当前页面路径下自动生成两个骨架屏文件（一个是wxml、一个是wxss）。

现阶段我们没有必要使用该功能，等到把一个项目大体的UI、业务逻辑处理写完，把各种功能都能够实现的时候，再回头做UI优化也不迟，这里就先了解一下。

资源管理器

没什么好说的，就是可以查看当前项目的文件以及目录结构，可以进行的操作也很简单，总共也就那几个按钮。值得一提的是，这里的资源管理器会根据不同文件名或者后缀名而赋予文件不同的图标，有时候可以通过图标来判断自己的文件命名有没有问题。

编辑区

顾名思义，就是敲代码的地方，但是我一般不在微信开发者工具里敲代码，因为其本身的代码自动补全并不如其他工具如WebStorm、vscode等强大，因此在实际开发中我很少会使用到该区域。但我还是会说一说它的一些相关功能。

支持列编辑

跟其他很多编辑器一样，微信开发者工具也支持列编辑，使用方法是：按住鼠标中键拖动鼠标然后选择要同时编辑的区域就可以了，效果如下图。

支持列块编辑

同时，微信开发者工具也支持列块编辑，使用方法是：按住Alt键，接着按住鼠标左键不放，拖动鼠标选定要同时编辑的区域，效果如下图。

查看官方文档

假如把你的鼠标停留在wxml文件中的标签上时，会弹出一个“Read Document”的框框，这时可以点击它，它会直接打开浏览器并跳转到官方文档相应的标签处，对于开发来说非常方便，很人性化，像我们这种记忆力不好的人，记不住那么多东西，常看文档是最好的提高能力的方法！

分屏

跟其他很多编辑器一样，微信开发者工具的编辑区也可以分屏，点击编辑区右上角的向右拆分编辑器即可，一般我会用分屏一边放wxml文件，一边放wxss文件，这样写样式方便一点，不用来回切换，效果如下图。

控制台

大家可能会发现微信开发者工具里的控制台和Chrome浏览器的控制台很神似，这是因为微信开发者工具使用了Chrome的一些内核。关于怎么使用，在后续开发中大家就会逐渐了解到，因此，在这里我就不多讲，只需要了解这里是可以让我们进行调试的一个地方就行了，如果程序编译或执行有错误，会“爆”红，并指出错误的位置及原因。

工具栏

工具栏上面有很多我们开发、调试、发布要用到的一些功能，以后会经常用到。

个人中心

点击左上角的用户头像可以打开个人中心，在这里可以便捷的切换用户和查看开发者工具收到的消息。

主界面模块的显示与隐藏

用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示。绿色表示当前模块正在显示，灰色表示当前模块已被隐藏。

更改开发模式

还记得在新建项目的时候选择的开发模式吗？如果在新建项目之后想更改开发模式的话也是可以的。

编译与预览

工具栏上有编译和预览的功能，我们在以后将十分频繁地用到这两个功能。

编译

点击编译按钮后，微信开发者工具会编译你的代码，并在模拟器生成小程序的模拟预览，如果你的开发者工具默认选中了“保存时自动编译小程序”的选项后，按CTRL+S后即可保存你的代码并自动编译，该选项在菜单栏的“设置”>>“编辑器设置”里。
当然如果没有勾选这个选项，按CTRL+S后只是保存你的文件而已，并不会进行编译，编译有他自己的快捷键：CTRL+B。

编译条件

大家也许注意到了，我们编译的时候选的是普通编译，那么什么是普通编译呢？
可以简单地理解为：普通编译之后在模拟器出现的会是小程序的首页。假如你的小程序里有很多个页面，那么微信开发者工具怎么知道你哪个是首页呢？
在app.json文件里的pages数组中的第一个元素代表的就是首页，如下图。以后我们讲小程序的配置文件的时候还会详细讲

那假如我就想对一个不是首页的页面单独进行调试，那我是不是得从首页开始一步一步跳转到我想要调试的那个页面？那样也太麻烦了吧！

有两种解决的办法：

1. 在app.json文件中把想调试的页面，放到第一个，然后进行普通编译（不推荐）：

   我们发现pages数组里有两个属性，我们把logs那个页面跟第一个index页面换一下位置，编译后发现：

我们打开了logs启动日志页面，很明显就不是我们一开始看见的那个页面，所以这个方法是行得通的。但是每要调试一个页面就要改一次文件就会很麻烦，不推荐使用。

2. 添加编译模式（推荐）：
   在“普通编译”处的下拉菜单中可以选择添加编译条件

模式名称： 可以自定义，中英文都可以，比如可以写“支付页面”、“购物车页面”等。
启动页面： 这里填的是要启动页面的页面路径，该路径要在pages数组中存在。
启动参数： 这里可以给页面的一些参数赋值，在启动该页面后这些参数会被初始化为你在这填写的值。
进入场景： 这里选择的是场景值，也就是在模拟器介绍时提到过的场景值，表示的是从哪里进入该小程序，是一种模拟。比如：场景值为1011模拟的是该小程序是扫描二维码后打开的。
我们选择相应的编译条件编译之后，一开始出现的页面就会是我们填写的启动页面，不用更改app.json文件，十分方便，推荐这种方式。

预览

预览有两种方式预览，一种是扫描二维码预览，还有一种是自动预览。

• 扫描二维码预览： 可以用自己的微信扫码然后就可以在手机上预览小程序，当然也可以把二维码分享给别人，让别人预览，前提是那个“别人”得是你的项目成员。点击此处查看如何添加项目成员。
• 自动预览： 点击自动预览之后你的手机就会自动打开并进入当前小程序预览。

真机调试

真机调试也有两种，一种是“扫描二维码真机调试”，还有一种是“自动真机调试”。
进入真机调试后会出现一个新的窗口同时你的手机也会进入当前小程序的预览：

同样地，如果想用别人的手机扫码进行真机调试，那他/她得是项目成员才行。

切后台

该功能可以模拟手机上把小程序切换到后台，然后模拟器将弹出场景值的选择界面，此时选择相应的场景值便可以模拟出小程序从相应的场景跳转到小程序。

清缓存

有时候我们调试的时候需要调试看数据有没有成功添加进本地数据缓存，这时候就需要将之前的缓存都清理掉，再来编译测试，当然我们还可以选择清除其他的一些缓存。

基本信息、本地设置、项目配置

点击右上角的“详情”即可查看这些信息。
要注意的一点是，在第一章的时候也讲过，创建完项目之后是可以修改AppID的，假如之前新建项目选用的是测试号，后续开发需要用到自己的AppID时可以在这里更改：

另外，如果是测试号的话是没法使用微信开发者工具的“上传”功能的，需要使用AppID才会出现“上传”按钮，点击它后可以把你的项目上传到微信小程序后台（点击“版本管理”即可查看）：

至于其他的一些设置需要用到的时候再来讲解。

那么微信开发者工具也介绍到这里，下面是小程序目录结构的介绍。

小程序结构目录介绍

⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。本人喜欢对比学习，对比学习是很有效率的一种学习方法，我们首先可以来比较一下小程序文件结构和传统Web有什么不同。

小程序文件结构与传统Web对比

文件结构	传统Web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	JavaScript	JavaScript
配置	无	JSON

通过以上对⽐得出，传统web是三层结构。⽽微信⼩程序是四层结构，多了⼀层配置.json。

基本的项目目录

这下我们再来看小程序的项目目录就很清晰了，在这我偷懒，把黑马程序员的图拿来用一下：

一个完整的页面结构包括了四个文件：WXML（结构文件）、WXSS（样式文件）、Js（逻辑处理文件）以及Json（配置文件）。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下表所示：

文件	是否必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式

一个小程序页面由四个文件组成，分别是：

文件类型	是否必需	作用
js	是	页面逻辑
wxml	是	页面结构
wxss	否	页面样式
json	否	页面配置

根据官方文档说明：

为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

其实这一点不用太过在意，无论是在微信开发者工具或者是其他开发工具（带有微信小程序开发插件的）都支持直接新建Page，这样创建出来的页面在页面文件夹下会自动生成那四个基本文件。

到这里本章内容也就结束了，下一章正式开始小程序的学习~~~