【0基础学习微信小程序】3.开发工具与目录结构

本文为菜鸟窝编辑吴佳林的连载。

之前在 微信小程序入门（一） 我们就介绍了微信小程序的用户注册流程跟创建了一个应用demo。那现在这篇文章主要就来讲一下微信小程序的开发工具以及目录结构。

一.开发工具

开发工具主要分为菜单栏，模拟器，编辑，程序调试，项目预览几个大模块。

区域1是菜单栏。其中有编辑，调试，项目，编译，后台，缓存，关闭。

• 编辑，调试，项目：可以切换到相应功能区界面。

• 编译：设置启动页面以及重新编译项目。

• 后台：模拟项目切换到后台。

• 缓存：清除数据缓存，手机缓存等各种缓存。

• 关闭：关闭该项目。

区域2是模拟器。模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态，能够实时预览编辑的情况。
模拟器上还可以切换模屏幕尺寸跟网络状态。

区域3是编辑区，可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作

区域4是调试区。这个功能区就像平时在浏览器的开发者调试界面一样。调试区有 6 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage

• Wxml panel：用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以通过修改对应 wxss 属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的 wxml 代码。

• Sources panel：用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。

• Network panel：用于观察和显示 request 和 socket 的请求情况

• Appdata panel：用于显示当前项目当前时刻 appdata 具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。

• Storage panel： 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。

• Console panel：开发者可以在此输入和调试代码并且小程序的错误输出，会显示在此处

• Sensor panel：开发者可以在这里选择模拟地理位置同时也可以可以在这里模拟移动设备表现，用于调试重力感应 API

区域5是显示项目信息以及修改项目配置信息，还有预览功能。

二.目录结构

微信小程序的项目结构主要分为描述页面的page以及主体文件。

2.1 主体文件

主体文件由三个文件组成，必须放在项目的根目录，有app.js，app.json，app.wxss

• app.js：作用就是负责小程序的公共逻辑
• app.json：小程序公共设置
• app.wxss：小程序公共样式表

2.2 描述界面的页面

由四个文件组成，分别是js，wxml，wxss，json

• js: 负责该页面的逻辑

• wxml：负责页面的结构

• wxss：负责页面样式表

• json: 负责页面配置

三.总结

本篇文章主要介绍了微信小程序的开发者工具以及项目的结构，让大家在开发的时候对项目还有工具有个大概的了解。当然，微信小程序开发者工具跟其他IDE工具一样，也是有很多快捷键，如果大家有兴趣可以官网了解一下，这里就不展开篇幅去说了。

更多内容，请关注菜鸟窝（微信公众号ID: cniao5），程序猿的在线学习平台。 转载请注明出处，本文出自菜鸟窝，原文链接http://www.cniao5.com/forum/thread/e231a07211e311e79e7800163e0230fa