简单了解微信小程序的目录结构

前言

在开发小程序之前，我们需要先了解它们的目录结构，这样才能提高开发效率。

我们用微信开发者工具搭建了一个小程序项目，可以看到在目录下生成了一片片。

带有的json配置文件。以JSON为后缀；带有的WXML模板文件。wxml作为后缀可以看作是一个简单的HTML页面，但细微的区别在于文件后缀和一些标签不同；带后缀的WXSS样式文件。wxss也可以看作是一个CSS样式的文件；带有的JS脚本文件。js作为后缀。

在上例中，我们可以看到根目录中有JS、JSON和WXSS文件，作为全局配置使用；pages/index目录中的四种类型的文件详细设置了特定的页面。

可以看出，这四类文件在小程序中负责不同的功能，在不同的目录中扮演着不同的角色。接下来，我们将详细解释这四种类型的文档的功能。

1JSON配置

在小程序中，JSON是一种数据格式，它不是编程语言，而是用来配置静态属性的。我们可以看到根目录下有app.json、project.config.json和sitemap.json，page/index下有index.json。前三个是整个小程序的全局配置，后一个是具体页面的配置。接下来，我们将详细解释一下。

app.json配置文件

作为当前小程序的全局配置，包括配置页面路径列表、全局默认窗口表示、网络超时、底部标签栏、小程序界面权限相关设置等等。

注意：json文件中不能添加注释，这里只做解释，使用时不要添加注释。其他相关属性见官方文件。

{/* * *页面路径列表*用于指定小程序由哪些页面组成，每一项对应一个页面的路径。*数组列表中的第一项代表小程序的第一页。*/' pages ' :[' pages/index/index ']，/* * *全局默认窗口表示*用于设置applet的状态栏、导航栏、标题和窗口背景色*/' window ' : { ' navigation barbakgroundcolor ' : ' # fff '，//导航栏标题文本' :' miniprogramedemo '，//导航栏标题文本内容'导航栏文本样式' 3: ' black '//导航栏标题颜色，仅支持黑/白。//底部选项卡列“tabBar”: {“list”:[//选项卡列表，至少2个，最多5个{“page path”:“pages/index/index”，//page path“text”:“home page”//button text on tab }。{ ' pagepath ' : ' pages/index/index '，' text ' : ' second home page ' } } }，//配置小程序及其页面是否允许微信进行索引，如果不允许，默认允许所有页面进行索引' sitemap location ' : ' sitemap . JSON ' }项目

通常我们在使用各种开发工具的时候，都会根据自己的喜好做一些简单的配置，比如将界面配置成护眼模式。但是我们换电脑之后，需要重新配置或者导入之前的配置文件，applet开发者工具使用project.config.json进行统一管理。在不同的计算机上导入同一个项目的代码包后，就不需要再配置了。

一般我们会配置是否启用es6到es5(es6)，上传代码时是否自动完成样式(postcss)，是否检查安全域名和TLS版本(URLCheck)等。注意：我们可以通过开发工具右上角的【详细信息】按钮快速配置。

站点地图配置

小程序提供配置小程序及其页面是否允许微信索引的功能。我们可以通过配置一些索引规则来限制页面是否可以索引，这样就不会被微信索引了。如果未配置此项，默认情况下允许对所有页面进行索引。

注意：其他相关配置信息请参考官方文档设置。

{ ' rules ' :[{//index rules list ' action ' : ' allow '，//页面是否可以索引，值是否只允许，allowed ' page ' : ' */*表示所有页面，不能用作通配符}]} index.json页面配置

如果我们想要设置特定页面的属性，我们可以在相应页面的JSON文件中自定义配置。

{ ' navigationbarbakgroundcolor ' : ' # ff 5500 '，//导航栏文本样式' : '白色'，//导航栏标题颜色，仅支持黑色/白色'导航栏标题文本' : '主页'，//导航栏标题文本内容'背景文本样式' : '深色'，//下拉加载样式。仅支持深色/白色“启用下拉刷新”: true，//是否启用下拉刷新“onrechtbuttondistance”3360 50，//到页面底部的距离“使用组件”: {}//页面自定义组件配置}2WXML模板

我们在开发网页时，使用HTML CSS JS为用户搭建页面，其中HTML用来描述当前页面的结构，CSS用来描述页面的风格，JS通常处理页面与用户之间的交互。

在小程序的开发中，有自己的一套编写标准，但是和网页类似，比如WXML就扮演了HTML的角色。与HTML类似，WXML也是由标签、属性等组成的。但也有很多不同之处：

标签名称不同。我们经常使用div、p、span等在HTML中组合不同的效果。在小程序中，我们将使用视图、按钮和文本等选项卡，小程序页面提供地图、视频和音频等组件供开发人员使用。

有一些属性和表达式，如wx:if。在网页开发中，我们使用JS来控制DOM和响应用户操作。小程序通过{{}}的语法将数据绑定到接口，还可以通过wx:开头的属性控制数据的显示。

！-index . wxml-view class=' container ' text { { msg } }/textviewx : if=' { { flag } } '当前显示状态为true/view/view3 WXSS样式

WXSS具有CSS的大部分特性，但它也做了一些扩展和修改：

增加了尺寸单位。为了考虑手机设备的屏幕宽度和像素比的差异，需要进行转换。小程序提供了一个新的大小单位rpx，这是由小程序的底层完成的，而不是开发人员自己的转换。提供全局样式和局部样式。可以在app.wxss中设置全局样式，也可以在特定的page.wxss中设置当前页面的样式，另外wxss只支持部分CSS选择器。

/**app.wxss**/。集装箱{ height : 100%；display: flexflex-direction:柱；align-items:居中；justice-content :空格；padd : 200 rpx 0；盒子尺寸：边框盒子；} /**index.wxss**/。userinfo { display: flexflex-direction:柱；align-items:居中；}4 JS交互

在web开发中，我们使用JS来控制与用户的交互，在小程序中也使用JS来处理用户操作。和以前一样，我们显示“你好，世界！”在页面上。我们只需要在页面的JS文件中设置值。

page({ data : { msg : ' hello world '，flag: false，canuses : wx . cani use(' button。open-type.getuserinfo')}，onload : function () {}，})是本文的全部内容，希望对大家的学习有所帮助。