【微信小程序入门】3、微信小程序开发基础及微信开发者工具的使用

✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：微信小程序开发实战
✨特色专栏：国学周更-心性养成之路
🥭本文内容：【微信小程序入门】3、微信小程序开发基础及微信开发者工具的使用

一、导入新课

在正式进入微信小程序开发前，大家需要对微信小程序的项目结构、页面组成以及和通信模型以及微信开发者工具的使用有一个基本的认识。本节将对微信小程序开发基础和微信开发者工具的使用进行详细讲解。

二、新课讲解

1、微信小程序的项目结构

微信小程序项目创建完成后，微信开发者工具会自动创建微信小程序的项目结构，如下图所示。

(1) 微信小程序的项目结构。

• pages：用于存放微信小程序的所有页面。
• .eslintrc.js：用于格式化代码，使代码风格保持一致。
• app.js：微信小程序的入口文件，用于描述微信小程序的整体逻辑。
• app.json：微信小程序的全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏等。
• app.wxss：微信小程序的全局样式文件，文件可以为空。
• project.config.json：在微信开发者工具上做的任何配置都会写入这个文件中，当重新安装工具或者更换计算机工作时，只要栽入同一个项目的代码包，微信开发者工具会根据该文件自动恢复成开发微信小程序时的个性化配置。
• project.private.config.json：用于保存微信开发者工具的私人配置，配置的优先级高于project.config.json。
• sitemap.json：用于配置微信小程序及其页面是否允许被微信索引，如果没有该文件， 则默认为所有页面都允许被索引。微信现已开放微信小程序页面的搜索，也就是说微信小程序里面的内容也能被微信搜索引擎搜索到。 当开发者允许微信小程序页面被微信索引时，微信会通过爬虫的形式，为微信小程序的页面建立索引。 当用户的搜索词条触发该索引时，微信小程序的链接地址将可能展示在搜索结果中。

(2) 微信客户端启动微信小程序的流程。

• 首先把整个微信小程序的代码包下载到本地。
• 然后解析app.json全局配置文件，通过该文件解析出微信小程序的所有页面路径；
• 接着执行app.js入口文件，调用App()函数创建微信小程序的实例；
• 最后渲染微信小程序的首页。

2、微信小程序的页面组成

(1) 微信小程序的页面组成部分（以index页面为例）。

一个微信小程序是由一个或多个页面组成的，这些页面被存放在pages目录中。下面以pages目录下的index页面为例展示其组成部分，index页面的组成部分如下图所示。

由上图可知，index页面由4个文件组成，分别是index.js、index.json、index.wxml和index.wxss。

(2) 微信小程序页面使用4种语言编写。

• JS：类似网页制作中的JavaScript语言，用于实现页面逻辑和交互，文件扩展名为.js。需要注意的是，微信小程序中的JS不含DOM和BOM，但它提供了丰富的API，可以实现许多特殊的功能，例如微信登录、音频播放、文件上传等。

• JSON（JavaScript Object Notation，JavaScript对象符号）：用于利用JSON语法对页面进行配置，文件扩展名为.json。

• WXML（WeiXin Markup Language，微信标记语言）：类似于网页制作中的HTML语言，用于构建页面结构，文件扩展名为.wxml。

• WXSS（WeiXin Style Sheets，微信样式表）：类似于网页制作中的CSS语言，用于设置页面样式，文件扩展名为.wxss。

(3) 微信客户端加载微信小程序页面的顺序。

• 首先读取并解析页面中JSON文件的配置；
• 然后加载页面的WXML文件、WXSS文件和JS文件，实现页面渲染。

其中，页面中WXSS文件的样式会覆盖项目根目录下的app.wxss 文件中相同的全局样式；页面中JS文件的Page()函数会被调用，用于创建页面实例。

3、微信小程序的通信模型

(1) 微信小程序实现了渲染层、逻辑层和第三方服务器的通信。

• WXML和WXSS工作在渲染层，用于实现页面的渲染。
• JS工作在逻辑层，用于实现页面的逻辑。

(2) 微信小程序的通信模型分为两个部分。

• 第1部分是渲染层与逻辑层之间的通信，即将逻辑层的数据渲染到页面中。
• 第2部分是逻辑层和第三方服务器之间的通信，即通过向第三方服务器发送请求，得到需要的数据。

为了帮助读者更好地理解微信小程序的通信模型，下面通过示意图进行演示。

Native表示微信客户端的底层，渲染层与逻辑层之间的通信和逻辑层与第三方服务器之间的通信都由微信客户端的底层进行转发。

4、认识微信开发者工具

微信小程序项目创建成功后，会进入微信开发者工具的主界面，如下图所示。

微信开发者工具的主界面主要由以下5部分组成。

• 菜单栏
• 工具栏
• 模拟器
• 编辑器
• 调试器

（1）微信开发者主界面——菜单栏

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

• 项目：用于新建项目、导入项目、打开最近项目、查看所有项目或关闭当前项目等。
• 文件：用于新建文件、全部保存或关闭编辑器等。
• 编辑：用于编辑代码，查看编辑相关的操作和快捷键，对代码进行格式化。
• 工具：用于项目的编译、刷新、清除缓存等。
• 转到：用于切换编辑器、快速定位到行、查看问题等。
• 选择：用于全选、光标的移动等。
• 视图：用于微信开发者工具可视区的控制。
• 界面：用于控制主界面中工具栏、模拟器、编辑器、目录树和调试器的显示与隐藏。
• 设置：用于通用设置、外观设置、快捷键设置、编辑器设置、代理设置、安全设置、扩展设置和项目设置。
• 帮助：用于工具的反馈和开发文档的查看等。
• 微信开发者工具：用于账号切换、更换开发模式、检查更新、调试、退出等。

（2）微信开发者主界面——工具栏

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

• 个人中心：工具栏最左侧的第1个按钮，显示当前登录用户的头像，单击头像后会显示用户名。
• 模拟器、编辑器和调试器：用于控制模拟器、编辑器和调试器的显示与隐藏。
• 可视化：用于代码的可视化编辑，开发者可以通过拖曳等方式对界面进行快速布局与修改。
• 云开发：开发者可以使用云开发来开发微信小程序、小游戏，无须搭建服务器，即可使用云端能力。云开发能力从基础库2.2.3开始支持。
• 模式切换下拉菜单：用于在小程序模式和插件模式之间进行切换。
• 编译下拉菜单：用于切换编译模式，默认为普通编译，可以添加其他编译。
• 编译：编写完微信小程序的代码后， 需要经过编译才能运行。默认情况下，直接按Ctrl+S快捷键保存代码文件，微信开发者工具就会自动编译运行该代码。 若想手动编译， 则单击 “编译” 按钮即可。
• 预览：单击“预览”按钮会生成一个二维码，使用微信扫描二维码，即可在微信中预览小程序的实际运行效果。
• 真机调试：可以实现直接利用开发者工具，通过网络连接对手机上运行的微信小程序进行调试，帮助开发者更好地定位和查找在手机上出现的问题。
• 清缓存：用于清除模拟器缓存、编译缓存。
• 上传：用于将代码上传到微信小程序管理后台，可以在“开发管理”中查看上传的版本，将代码提交审核。需要注意的是，如果在创建项目时使用的是测试号，则不会显示“上传”按钮。
• 版本管理：用于通过Git对小程序进行版本管理。
• 详情：用于查看和修改微信小程序的基本信息、本地设置和项目配置。
• 消息：用于显示消息通知。

（3）微信开发者主界面——模拟器

模拟器可以模拟微信小程序在微信客户端的运行效果。微信小程序的代码通过编译后可以在模拟器上直接运行。开发者可以选择不同的设备，也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。

模拟器提供了多个快捷功能，能够帮助开发者更好地进行开发。

每一个被矩形框住的部分代表一个快捷功能，下面将对这些快捷功能分别进行讲解。

• 序号①中iPhone 6/7/8表示机型，100%表示显示比例，16表示字体大小。开发者可单击右侧的下拉箭头，根据实际需要选择合适的机型、显示比例和字体大小，具体下图所示。

• 序号②用于控制热重载的开启和关闭，当开启热重载后，修改代码文件，模拟器可以在不刷新的情况下生效变更。需要注意的是，该功能在2.12.0及以上的基础库生效。
• 序号③用于刷新微信小程序的页面。
• 序号④用于终止模拟器，若需要重新启动模拟器可单击工具栏上的“编译”按钮。
• 序号⑤用于模拟操作，常用于模拟不同的网络环境，从而检测微信小程序在不同网络环境中的加载速度，例如Wi-Fi、2G、3G、4G等。
• 序号⑥用于分离窗口，单击该项后，模拟器将成为一个独立的窗口。
• 序号⑦用于显示当前页面的信息，包括页面路径、页面参数和场景值。
• 序号⑧用于将当前页面进行真机预览。

（4）微信开发者主界面——编辑器

编辑器分为左右两栏，左栏为目录树，主要用于展示当前微信小程序项目的目录结构；右栏为代码编辑区，用于编写文件中的代码。在左栏中单击某个文件，就可以在右栏中对该文件进行编辑，也可以在左栏中通过双击打开多个文件，这些文件会在右栏中显示。

（5）微信开发者主界面——调试器

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

• Wxml：Wxml面板，用于查看和调试WXML和WXSS。
• Console：控制台面板，用于输出调试信息，也可以直接编写代码执行。
• Sources：源代码面板，用于显示当前项目的脚本文件，在该面板中开发者看到的文件是经过处理之后的脚本文件。
• Network：网络面板，用于记录网络请求和响应信息，根据它可以进行网络性能优化。
• AppData：App数据面板，用于查看或编辑当前微信小程序运行时的数据。
• Storage：存储面板，用于查看和管理本地数据缓存。
• Sensor：传感器面板，用于模拟地理位置、重力感应。
• Security：安全面板，用于调试页面的安全和认证等信息。
• Trace: 跟踪面板， 用于真机调试时跟踪调试信息。

5、微信小程序的项目设置

在微信开发者工具中，可以对微信小程序的项目进行设置，主要包含以下4个方面。

• 基本信息的设置
• 性能分析
• 本地设置
• 项目配置

（1）项目设置——基本信息的设置

在微信开发者工具中，选择菜单栏的“设置”，然后选择“项目设置”，将会弹出一个用于项目设置的选项卡，单击“基本信息”项，即可对项目的基本信息进行设置，如下图。

（2）项目设置——性能分析

单击“性能分析”，即可查看项目的线上数据和本地情况，供开发者有针对性地进行优化，如下图。

（3）项目设置——本地设置

单击“本地设置”，即可对项目进行本地设置，如下图。

本地设置中常用设置的具体含义如下。

• 调试基础库：选择基础库的版本，用于在对应版本的微信客户端上运行。高版本的基础库无法兼容低版本的微信客户端。版本号后边的百分比表示该版本的用户占比。本书中使用的基础库的版本为2.25.2。
• 将JS编译成ES5：选中该项后，JS代码的语法将转换为ES5。
• 上传代码时样式自动补全：选中该项后，在预览、真机调试、上传时文件中的样式将自动补全，需要注意的是，勾选此项会增大代码包的体积。
• 上传代码时自动压缩样式文件、上传代码时自动压缩脚本文件和上传代码时自动压缩 WXML文件：选中对应选项后，在预览、真机调试、上传时文件中的样式文件、脚本文件、WXML文件将自动压缩。
• 上传时进行代码保护：选中该项后，微信开发者工具会尝试对项目代码进行保护。
• 不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书：正式发布的微信小程序的网络请求需要校验这些信息，在开发过程中可以选中该项，开发工具将不校验这些信息，从而有助于开发者在开发过程中更方便地完成调试工作。
• 启用自定义处理命令：选中该项后，微信开发者工具在编译前、预览前、上传前这三个时机调用开发者自定义的命令，开发者可以对代码进行一些预处理。

（4）项目设置——项目配置

单击“项目配置”，即可查看项目的域名信息和高级配置，如下图。

• 域名信息：用于显示项目的安全域名信息。
• 高级配置：用于显示代码包的大小、Tabbar的个数等信息。

6、微信小程序开发常用快捷键

为了方便开发者进行微信小程序开发，微信开发者工具提供了大量的快捷键，常用的快捷键可以分为以下4类。

• 项目和文件相关的快捷键
• 编辑相关的快捷键
• 工具相关的快捷键
• 界面相关的快捷键

（1）快捷键——项目和文件相关的快捷键

开发微信小程序时，经常需要对项目和文件进行操作，例如关闭当前项目、保存文件等，微信开发者工具提供了一些与项目和文件相关的快捷键，具体如下表。

（2）快捷键——编辑相关的快捷键

开发微信小程序时，经常需要进行编辑操作，例如代码格式调整、光标移动、搜索、替换等，微信开发者工具提供了一些与编辑相关的快捷键，具体如下表。

（3）快捷键——工具相关的快捷键

开发微信小程序时，经常需要使用微信开发者工具中的编译项目、预览代码等功能，微信开发者工具提供了一些与工具相关的快捷键，具体如下表。

（4）快捷键——界面相关的快捷键

开发微信小程序时，经常需要控制微信开发者工具的界面，例如显示或隐藏工具栏、显示或隐藏调试器等，微信开发者工具提供了一些与界面相关的快捷键，具体如下表。

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。