1.3 小程序的开发体验

在使用微信开发者工具时，需要先创建一个项目。为了方便开发，开发者工具提供了两种模板，分别是“普通快速启动模板”和“插件快速启动模板”，前者用于开发小程序，后者用于开发小程序的插件。对于初学者来说，使用“普通快速启动模板”创建小程序，可以获得一些示例代码，从而了解一个简单的小程序的代码组成。本节演示如何在微信开发者工具中基于“普通快速启动模板”创建一个Hello World小程序。

1.3.1 创建项目

首次打开微信开发者工具时，会出现一个登录页，提示使用微信扫码登录。登录成功后，会看到图1-13所示的启动页，提示选择开发模式。

单击“小程序项目”，就可以创建一个新的小程序项目，如图1-14所示。

根据页面提示进行小程序项目的创建，选择一个在本地创建的空目录作为“项目目录”，如D:\wxapp\hello。在1.2.1小节注册微信小程序账号时获得了AppID，将其填入此处即可。“项目名称”可以随意填写，如Hello World。填写完成后，选中“建立普通快速启动模板”左边的复选框，然后单击“确定”按钮即可。

1.3.2 开发者工具的使用

小程序项目创建成功后，会进入开发调试环境中，如图1-15所示。

从图1-15中可以看出，微信开发者工具的主界面主要由菜单栏、工具栏、模拟器、编辑器和调试器组成。接下来对这些功能分别进行讲解。

1.菜单栏

通过菜单栏可以访问微信开发者工具的大部分功能，常用的菜单如下。

• 项目：用于新建项目，或打开一个现有的项目。

• 文件：用于新建文件、保存文件或关闭文件。

• 编辑：用于编辑代码，对代码进行格式化。

• 工具：用于访问一些辅助工具，如自动化测试、代码仓库等。

• 界面：用于控制界面中各部分的显示和隐藏。

• 设置：用于对外观、快捷键、编辑器等进行设置。

• 微信开发者工具：可以进行切换账号、更换开发模式、调试等操作。

2.工具栏

工具栏提供了一些常用功能的快捷按钮，具体解释如下。

• 个人中心：位于工具栏最左侧的第1个按钮，显示当前登录用户的用户名、头像。

• 模拟器、编辑器和调试器：用于控制相应工具的显示和隐藏。

• 云开发：开发者可以使用云开发来开发小程序、小游戏，无须搭建服务器，即可使用云端能力。云开发能力从基础库2.2.3开始支持。

• 模式切换下拉菜单：用于在小程序模式、搜索动态页和插件模式之间进行切换。

• 编译下拉菜单：用于切换编译模式，默认为普通编译，可以添加其他编译模式。

• 编译：编写小程序的代码后，需要编译才能运行。默认情况下，直接按 Ctrl+S 快捷键保存代码文件，微信开发者工具就会自动编译运行。若要手动编译，则单击“编译”按钮即可。

• 预览：单击“预览”按钮会生成一个二维码，使用手机中的微信扫描二维码，即可在微信中预览小程序的实际运行效果。

• 真机调试：可以实现直接利用开发者工具，通过网络连接对手机上运行的小程序进行调试，帮助开发者更好地定位和查找在手机上出现的问题。

• 切后台：用于模拟小程序在手机中切后台的效果。

• 清缓存：用于清除数据缓存、文件缓存等。

• 上传：用于将代码上传到小程序管理后台，可以在“开发管理”中查看上传的版本，将代码提交审核。需要注意的是，如果在创建项目时使用的 AppID 为测试号，则不会显示“上传”按钮。

• 版本管理：用于通过 Git 对小程序进行版本管理。

3.模拟器

模拟器用于模拟手机环境，查看不同型号手机的运行效果，如图1-16所示。

在图1-16中，上方的iPhone 5表示手机型号，单击可以切换成其他手机。由于不同手机屏幕的 CSS 像素不同，宽高比也不同，在开发小程序时应对常见的手机屏幕进行适配。75%表示缩放百分比，可以调节预览画面的大小。WiFi表示网络环境，还可以切换成2G、3G、4G 或Offline（离线），不同环境的网速不同，从而可以测试小程序的网络加载速度。模拟器的底部状态栏显示了当前的页面路径为pages/index/index。

4.编辑器

编辑器分为左右两栏，左栏用于浏览项目目录结构，右栏用于编写代码。在左栏中单击某个文件，就可以在右栏中对该文件进行编辑。

5.调试器

调试器类似于Google Chrome浏览器中的开发者工具。下面对调试器中的各个面板的功能进行简要介绍。

• Console:“控制台”面板，用于输出调试信息，也可以直接编写代码执行。

• Sources:“源代码”面板，可以查看或编辑源代码，并支持代码调试。

• Network:“网络”面板，用于记录网络请求信息，根据它可进行网络性能优化。

• Security:“安全”面板，用于调试页面的安全和认证等信息，如HTTPS。

• AppData:“App数据”面板，可以查看或编辑当前小程序运行时的数据。

• Audits:“审计”面板，用于对小程序进行体验评分。

• Sensor:“传感器”面板，用于模拟地理位置、重力感应。

• Storage:“存储”面板，用于查看和管理本地数据缓存。

• Trace:“跟踪”面板，用于真机调试时跟踪调试信息。

• Wxml:Wxml面板，用于查看和调试WXML和WXSS。

以上介绍的这些面板，在本书后面的章节中会进行更深入的讲解与实践，读者此时只要了解这些面板的基本作用即可。

1.3.3 目录结构

Hello World小程序的目录结构如表1-4所示。

在表1-4中，小程序一共有两个页面，分别是page/index（首页）和pages/logs（登录日志页）。首页就是之前在图1-16的模拟器中看到的页面，在该页面中单击“获取头像昵称”按钮，获取后会显示当前登录用户的微信头像，单击头像即可进入登录日志页，查看用户登录的历史记录，如图1-17所示。

在微信小程序中，每个页面由wxml、wxss、js和json文件组成，其中wxml和js文件必须存在，wxss和json文件可以省略。wxml和wxss文件类似于网页开发中的html和css文件，但是它们有所区别，具体会在后面进行讲解。

在了解了基本的目录结构后，下面通过图1-18演示这些页面之间的关系。

对于有一定编程功底的读者，可以通过阅读代码来分析页面之间的关系。首先打开app.json文件，在文件中找到如下代码。

在上述代码中，第3～4行表示页面路径，例如，pages/index/index表示pages/index目录下的 index.*文件。由于一个页面由多个不同扩展名的文件组成，这里是把它们看成一个整体，因此无须加上扩展名。此处定义了两个页面，分别是index和logs，顺序排在前面的index将作为小程序打开后的初始页面。

接下来打开pages/index/index.wxml，查看小程序首页的结构，找到如下代码。

在上述代码中，第6行的<image>标签用于显示用户头像，该标签的属性bindtap表示当用户单击该组件时，执行相应的事件处理函数，即bindViewTap。因此，当用户单击头像时，就会执行bindViewTap函数。

在pages/index/index.js中找到bindViewTap事件处理函数的代码，具体如下。

在上述代码中，wx.navigateTo()方法用于跳转页面，从第15行代码可以看出，程序会跳转到logs页面，从而实现了单击头像跳转到登录日志页面的效果。

打开logs页面的逻辑文件pages/logs/logs.js，可以看到该页面引用了utils/util.js脚本文件，如下所示。这个脚本文件用于保存公共代码，从而在不同页面中引用。

1.3.4 项目设置

在微信开发者工具中，执行菜单栏中的“设置”-“项目设置”命令，可以对当前项目进行设置，如图1-19所示。

关于图1-19中的这些设置的具体含义如下。

• 项目设置：对当前项目进行设置。

• 域名信息：显示小程序的安全域名信息，合法域名可在管理后台进行设置。

• 调试基础库：选择基础库版本，用于在对应版本的微信客户端上运行。高版本的基础库无法兼容低版本的微信客户端。右边的79.45%表示该版本的用户占比。

• ES6转ES5：将JavaScript代码的ES6语法转换为ES5语法。

• 上传代码时样式自动补全：自动检测并补全缺失样式。

• 上传代码时自动压缩：压缩代码，缩小代码体积。

• 使用npm模块：在小程序中使用npm安装第三方包。

• 启用自定义处理命令：指定编译前、预览前、上传前需要预处理的命令。

• 不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书：在真实环境中会对这些信息进行校验。如果在开发环境中不进行校验，可以选中此项。

1.3.5 快捷键

为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能，如 Ctrl+S 快捷键用于保存文件、Alt+Shift+F快捷键用于代码格式化等。常用的快捷键如表1-5所示。