学习微信小程序结构，能快速掌握项目配置技巧吗？

文章浏览阅读266次。微信小程序1

文章浏览阅读285次,点赞5次,收藏5次这个。

往下走，从上往上走。

本文为零基础开发者提供了一份详尽的微信小程序开发入门指南。从账号注册、 环境搭建到项目结构解析,手把手教你构建第一个待办清单小程序,涵盖数据绑定、事件处理等核心概念,并介绍了调试、预览与发布上线的完整流程,助你快速掌握微信小程序...，KTV你。

一、环境准备

我想很多人一开始都会问，这个东西怎么弄？先说说你得有个电脑，然后得下载那个叫“微信开发者工具”的东西。你懂吧？就是微信官方给的那个黑框框。你点新建，选小程序。然后填个名字，比如MyFirstMiniProgram，别填太复杂的，反正再说说也没人看你名字。然后选个目录， D:\\MiniProgram\\MyFirstMiniProgram，随便你选个地方。点创建。这时候它会自动生成一堆文件。app.json, app.js, app.wxss。这些东西都是啥？我也不知道，反正都有。

YYDS... 这时候有个东西叫AppID。这个东西非常重要。如果你是个人开发，随便拿个测试号就行。如果你是公司开发，你就得去微信公众平台注册。注册完了它会给个AppID，还有个AppSecret。听好了AppSecret千万不要写在代码里也不要提交到Git仓库！千万别！主要原因是那个东西很敏感，有权限获取用户信息，很凶险的。要是泄露了你的小程序就废了。最好找个后端服务器来保管它。至于AppID，先复制下来存好，马上要用。

安装并配置微信开发者工具，其实就是把这些东西填进去。填完了你就能看见一个页面。左边是代码，右边是预览。这就是开发环境了。环境准备好了接下来就是看结构。结构这东西，说简单也简单，说复杂也复杂。它跟网页不一样。网页是三层，小程序是四层。多出来的那一层是什么？是配置。

二、结构目录

微信小程序,简称小程序,英⽅名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤。它实现了应⽤ 触⼿可及 的梦想。⽤⼾扫⼀扫或搜⼀下即可打开应⽤。这个定义是官方说的。我也觉得挺厉害的。但是作为开发者，我们关心的是怎么写代码。

1.小程序结构与传统web结构对比

传统web是什么？HTML, CSS, JavaScript。对吧？这就是三层。小程序呢？它也有WXML，也有WXSS，也有JavaScript。但是它多了一个东西，叫.json文件。这个文件不是用来写逻辑的，是用来写配置的。比如你要配置这个页面的标题是什么背景色是什么能不能下拉刷新。 放心去做... 这些东西都不用写代码去判断，你只要在.json文件里写一句配置就行了。这多方便啊。这就是为什么说它是四层结构。多出来的这一层，就是配置层。这个结构比web结构多了一层，但这层是灵魂。没有这层，小程序可能都跑不起来。

2.项目基本目录

当你创建好项目之后你会看到项目根目录下有几个文件夹和文件，最后说一句。。

先说说最顶层的文件是app.json。这个文件是全局配置文件。里面写的东西，大体上整个小程序都受它控制。比如你想让小程序的导航栏显示什么颜色，就在这里改。你想配置有多少个页面也在这里改。它里面有个pages数组，你每加一个页面就得在这里加一行路径。很麻烦，但是必须得有，摸鱼。。

功力不足。 然后是app.js。这个是逻辑层的入口文件。所有的JavaScript代码大体上都写在这里面。它定义了小程序的整体行为。比如小程序什么时候启动，什么时候销毁。还有个App函数，你必须调用它，不然小程序就报错。这个文件很重要，它是小程序的心脏。

再然后是app.wxss。这个是样式文件。大体上就是全局样式。虽然每个页面也可以有自己的样式文件， 另起炉灶。 但是通用的样式还是放在这里比较好。比如字体大小，边框颜色什么的。

除了这三个文件，还有个project.config.json。这个文件在项目根目录下。它是项目配置文件。里面配置了项目的各种设置。比如项目的AppID，还有项目的名称，编译设置等等。这个文件大家最好别乱动，动了可能就编译不通过了，简单来说...。

再往下看，有一个pages文件夹。这个文件夹是用来存放页面的。 我emo了。 一个页面就是一个文件夹。每个文件夹下面通常都有四个文件：

1. .wxml文件。这是页面的结构。有点像HTML。但是它不是HTML。它里面可以用一些特殊的标签，比如view, image, text。 我们都... 这些是小程序的组件。不是HTML的div, img, span。

实际上... 2. .wxss文件。这是页面的样式。有点像CSS。但是也不是CSS。它也有选择器，也有盒模型。但是它使用的是rpx单位。这个单位很特殊，是小程序特有的。750rpx等于屏幕宽度750px。不管你的手机是宽的还是窄的，只要设计稿是750px宽的，你就按750rpx来写。这样就能自适应。比如你写100px，在宽屏手机上可能就变成200rpx了。反正就是很神奇。

3. .js文件。这是页面的逻辑。跟app.js差不多，但是作用范围只在这个页面。比如你想处理页面上按钮的点击事件，或者想获取用户输入的数据，都在这里写。它也有Page函数，用来定义页面的生命周期，优化一下。。

功力不足。 4. .json文件。这是页面的配置文件。这个文件也很重要。它里面的配置会覆盖全局配置。比如你想让这个页面隐藏导航栏，就在这里设置navigationBarTitleText为空。很简单。

还有一个utils文件夹。这个文件夹是用来放工具函数的。比如日期格式化函数，或者加密函数。 PTSD了... 如果你有很多重复的代码，就可以把它们封装成函数，放在这里。然后在其他页面引用。

三、 核心配置详解

刚才说了那么多，其实核心就在那个配置文件上。大家一定要搞清楚a 太硬核了。 pp.json和project.config.json的区别。

app.json是小程序的配置。它控制的是小程序的行为。比如窗口表现， 不是我唱反调... 网络超时时间，底部tab栏的配置等等。它是个大管家。

project.config.json是项目的配置。它控制的是开发工具和编译过程。比如你用什么编译器，你的项目路径是什么你的AppID是什么。它是个小管家，一句话。。

还有一个sitemap.json文件。这个文件是用来配置小程序的页面是否允许被微信索引的。比如你有个关于我们的页面你希望微信能搜到它，你就在这里设置为allow。如果你想藏起来就设置为disallow。这个也很重要，不然你的小程序可能搜不到。

还有个app.json里的window字段。这个是用来配置小程序的窗口的。比如导航栏的颜色，标题文字，背景色。还有下拉刷新的配置。如果你想让页面支持下拉刷新，就得在这里设置enablePullDownRefresh为true。 换句话说... 然后在页面的js文件里写onPullDownRefresh函数。这个函数会在下拉刷新的时候触发。

还有个pages字段。这个字段是必须的。它是一个数组，里面放着小程序所有页面的路径。比如pages/index/index, pages/logs/logs。微信启动的时候，会不出来。

还有个tabBar字段。这个是用来配置底部导航栏的。如果你想让你的小程序有底部导航，比如“首页”，“消息”，“我的”。你就在这里配置。里面可以配置列表，每个列表项可以配置图标路径和文字。图标路径一般是放在images文件夹下的。这个配置也很麻烦，主要原因是图标有大小限制，还得是png格式。

四、页面结构与调试

我跟你交个底... 写完结构，就得写样式。样式写完了就得写逻辑。写完之后你还得调试。

调试在微信开发者工具里就能做。你点击那个“编译”按钮，就能看到效果。如果报错了底部控制台会显示红色的错误信息。 造起来。 你得根据错误信息去改代码。

有时候在电脑上看没问题，但是在手机上看有问题。这时候你就得用真机调试。微信开发者工具支持真机预览。你点击工具栏上的预览按钮，它会生成一个二维码。你用手机微信扫一下就能在手机上看你的小程序了。这时候如果还有问题，那就是手机的问题了，反正吧…。

发布的时候，你得把代码上传到微信公众平台。然后提交审核。审核通过了你点击发布，用户就能搜到了。

学习微信小程序结构，能快速掌握项目配置技巧吗？我觉得能。只要你肯花时间去搞清楚那些文件是干嘛的。虽然一开始会觉得乱，但是慢慢就习惯了。结构其实很简单，就是一堆文件夹和文件。配置也很简单，就是写JSON。只要你不把AppSecret写错，一般都不会出大事。希望大家都能开发出属于自己的小程序，起初我以为...。

官宣。 其实说起来小程序的开发跟Web开发差不多。只是换了个壳。但是这个壳里有很多坑。比如那个rpx单位，刚用的时候肯定不习惯。比如那个组件，跟HTML标签也不一样。但是只要多写写，就熟练了。

所以别怕，去试一试吧。先下载个开发者工具，创建个项目。随便写个页面看看效果。你会发现，其实也没那么难，我惊呆了。。

对了刚才说的那个“Sunny快乐加油站”，我也去看了一下。他们那个讲得挺详细的。如果你想看更详细的教程，可以去搜一下。不过我觉得我自己写的也挺好的。至少我自己能看懂。

再说说再强调一遍，AppSecret千万不要泄露。还有，AppID一定要配对。不然你的小程序可能打不开。 到位。 还有，不要在代码里写死敏感信息。最好都用变量，或者从服务器获取。平安第一。

好了废话说了这么多，差不多该结束了。希望这篇文章能帮到你。如果你学会了记得给我点个赞。 我明白了。 如果你没学会，我也没办法了。毕竟我也不是老师，我就是个写文章的。