### [如何配置小程序开发项目结构？（教程）](https://www.prosaas.cn/article/16699)

**Published:** 2020-05-04T02:54:39

**Author:** 5201314

**Excerpt:** 开发小程序，首先利用开发者工具创建一个demo，下载编辑器对项目结构进行配置。找到创建的 demo 文件夹，把…

![](https://img.php.cn/upload/article/000/000/024/5eaf83b62323d644.jpg)

开发小程序，首先利用开发者工具创建一个demo，下载编辑器对**项目结构进行配置**。找到创建的 demo 文件夹，把项目导入到你的编辑器，使用的是Sublime Text编辑器。

![](https://img.php.cn/upload/image/347/327/491/1588560445472923.png)

这个时候需要根据自己的项目需求结构进行更改了，项目根目录下面是首页渲染的几个 tabBar 页面，以及 app 的一些配置文件，如名片盒项目的 tabBar 是 3 个切换菜单

![](https://img.php.cn/upload/article/000/000/024/5eaf825a8bfa5875.png)

我们先找到 app.json 文件打开配置好这几个菜单，配置好 tabBar，这个直接把配置文件改成你自己设计的即可。

![](https://img.php.cn/upload/image/270/971/832/1588560509474087.png)

App.json 里面有几个配置项：

Pages：这个是编写的js文件，后缀.js这里不需要使用，配置好正确路径即可正常调用（若调用不到，在重启微信开发者工具会直接报 page 错误）。

networkTimeout：暂时没发现用处，建议看文档。根据实际项目需求进行添加与更改。

tabBar：底部的几项配置。

text：可以去掉，全部去掉会发现底部 tabar 高度会减少很多。 

Window：配置顶部的一些样式，文档介绍比较详细。

iconPath和selectedIconPath：底部菜单按钮图片与得到切换点击高亮。

![](https://img.php.cn/upload/image/325/987/943/1588560617159100.jpeg)

Json 文件配置好后，根据项目进行文件创建。

Demo：存放的是假数据，这一期的开发工具支持 require，假数据使用的是 .js 文件形式

里面的数据结构 json 一致，把 data 暴露出去即可

![](https://img.php.cn/upload/image/676/208/560/1588560670789548.png)

![](https://img.php.cn/upload/image/601/842/303/1588560675256200.png)

然后取数据 require 进来即可，这一点使用很方便；

Servise：服务交付层（与后台联调真实数据时使用）；

Wxss：一些公共的 css 文件；

Images：图片路径；

Page：除 tabar 以外的页面；

看到这里大家发现每个页面都被连带好三个不同的后缀。分别页面，css，js 目前只能依照这样，是微信应用号的一个规范吧。

![](https://img.php.cn/upload/article/000/000/024/5eaf8358eba44966.jpeg)

Wxss 文件是引入你写的样式文件，也可以直接在里面写样式。

![](https://img.php.cn/upload/image/898/300/118/1588560764897052.png)

最后Js 文件需全部配置到 pages 里面才能生效。

![](https://img.php.cn/upload/image/602/918/293/1588560769726311.png)

推荐：《小程序开发教程》

以上就是如何配置小程序开发项目结构？（教程）的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** css, JS, json, require, sublime text, 数据结构

**Categories:** 后端开发

---