微信开发工具对齐代码_小白开发日记——学习开发微信小程序第二天——界面...

昨天新建项目完成后，进入微信开发者工具。

项目结构区

新建微信的小程序由几个文件和文件夹构成

目录结构

其中，

pages：包含每个页面的样式代码、逻辑代码、配置代码等。

---pages->index：小程序默认创建用来存放主页文件的文件夹。

------pages->index->index.js ：用于存放主页页面的逻辑代码，包括处理点击、跳转等逻辑操作

------pages->index->index.json：用于存放主页页面的配置文件，如，改变页面颜色，标题等

------pages->index->index.wxml：用于存放页面结构代码。

------pages->index->index.wxss：用于存放页面样式代码。

---pages->logs：小程序默认创建用来存放日志文件的文件夹。

------pages->logs：logs文件夹下文件，与index文件夹下所有文件作用一致。

utils：用于存放一些公共代码的文件夹，作为工具调用

app.js：小程序逻辑文件

app.json：小程序配置文件，用来配置小程序页面信息，路径，颜色等配置文件

app.wxss：小程序样式文件，整个小程序的样式文件，在此写的样式文件，所有页面都会生效

project.config.json：微信开发工具的环境配置，包括项目路径，微信小程序使用的基础库版本等

sitemap.json：页面收录设置，通过设置sitemap协议，是否允许微信对小程序内所有页面进行检索，爬取，有利于微信对小程序进行搜索优化，一般默认开启，不用改动(感觉有点像网站下的robots协议)

代码编辑区

在结构目录的右边，就是代码显示的主要区域，所有代码都在该区进行编辑。

代码编辑区

小程序模拟预览

在结构目录的左边，是小程序的模拟器，微信开发工具会根据开发者选择的机型作为开发机型，进行编译运行，开发者可以直观的看到小程序的运行结果。

Ps：根据官方文档推荐，微信小程序一般使用iPhone6作为开发机型

编译运行区域

小程序调试器

最常用也是最重要的区域，通过调试器，可以知道微信小程序运行中哪里出现问题，以便及时修复。该区域在整个开发工具的右下角。

微信小程序调试器

调试器中分为，调试器，问题，输出，终端，四个选项卡，其中调试器选项卡最常用。

其中，

Console：控制台，用于打印输出一些变量和显示错误信息，帮助开发者更好的调试微信小程序

Sources：来源，显示当前目录的所有脚本文件，微信小程序框架会对这些脚本文件进行编译。

Network：显示小程序的网络连接情况，以及显示与网络有关的信息。

Security：功能未知。。(没查到，_(:з」∠)_)

Mock：模拟数据，模拟api请求进行开发调试

AppData：显示与当前项目有关的变量的具体数值，并且会实时显示

Audits：微信开发工具内置小程序体验评分系统，通过性能、体验、最佳实践进行分析

Sensor：模拟传感器，一些体感小程序测试使用。

Storage：小程序缓存，显示小程序内所有的缓存数据。

Trace：性能分析。

Wxml：显示当前页面的页面结构和页面样式代码。

小程序项目详情

在微信开发者工具的右上角，详情按钮，包含小程序基本信息、本地设置、项目配置。

详情信息

基本信息：包括项目名称、APPID(重要)、项目本地目录、代码体积等信息

本地设置：包括调用基础库，目前最新是2.12.0，如果基础库版本太低会导致一些新功能无法使用。以及一些其他设置。

项目配置：包括配置微信小程序数据上传、下载的服务器(这个修改有次数限制)

总结

今天学习了微信开发者工具的界面，也大致了解了工具的组成，感觉开发工具的功能很多，不知道后面用起来会怎么样。。。