微信小程序开发之编辑器和项目的认识

微信小程序开发之编辑器和项目的认识

发布日期：2025-08-01 10:30:07 浏览次数： 813 来源：开发随技

推荐语

微信小程序开发入门必备：从编辑器功能到项目结构，快速上手开发工具。

核心内容：
1. 微信开发者工具的主要功能区与基本操作
2. 小程序项目核心目录与文件作用解析
3. 全局配置文件与页面配置的关键字段说明

小优网站建设顾问

专业来源于二十年的积累，用心让我们做到更好!

1.微信开发者工具介绍

打开上一节课项目之后，便显示如图所示，可点击编译之后模拟器便会显内容

这些便是主要的功能区，菜单栏、模拟器、目录树、编辑器、调试器

我们基本常常用到，可以自己点击来操作查看有哪些作用，当然官网描述的更加详细，在开发中可以一边查看官网一边写代码，官网永远是最好的教程，多查看官网可以锻炼我们之后的学习能力。

官网工具详细描述地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/page.html#%E5%90%AF%E5%8A%A8%E9%A1%B5

基本见字便能联想到功能，看再多不如上手多点击。

2.项目文件的介绍

项目基本结构：

pages：用来存放所有小程序的页面

components：存放一下组件，比如我们会将某一个重复使用的按钮或者窗口，我们会封装成一个组件，放在这里

app.js 小程序项目的入口文件

app.json 小程序项目的全局配置文件

app.wxss 小程序项目的全局样式文件

project.config.json 项目的配置文件

sitemap.json 用来配置小程序及其页面是否允许被微信索引

其中我们主要关注的是pages里面的index目录下面的几个文件，这一个目录组成一个页面，其实我们稍微看一下就会发现和vue很相似都是封装起来的，其中

index.js 脚本文件、存放页面数据、事件函数、生命周期都在其中

index.json 配置整个页面，外观、表现等

index.wxml 框架页面的结构文件

index.wxss 样式表文件

app.js 贯穿全部文件是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。项目里边的 app.json 配置内容如下：

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。其他配置项细节可以参考官方文档，这些都是官方定义好的都是固定值。

project.config.json：

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

其实大概介绍一下，自己写的再多不如人家官网写的全，会用就好，用到在深度研究，知识有很多，我们要最快的掌握我们想要知道的，然后使用到后再去深度研究，先掌握宽度再去掌握深度。

优网科技，优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。

优网知识库

探索行业前沿，共享知识宝库

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设

优网知识库

探索行业前沿，共享知识宝库

微信小程序开发之编辑器和项目的认识

企微云

客户池

微信小名片

网站建设

优网科技

小名片

53AI

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设