4-目录结构说明原创

Hello，同学们好，我是童颜老师，然后今天开始我们来讲解一下我们项目当中小程序端的开发的流程以及相关的内容。然后呢，我们先。看一下我们打开的这个项目当中，我们先了解一下它的目录结构，首先从上到下我们这个access目录表示吗？这里面放置的是一些我们的静态资源，而这里面呢，目前放置主要是我们底部导航的一些图标啊，因为在小程序当中，我们配置底部的导航图标时，是不能引入网络图片路径的，必须使用本地图片，所以我就把图片放置来这个目录当中，您看到的是components，这里面放置什么？放置的是我们自编写的自定义的组件，然后以便在我们其他的页面当中进行引入使用的。然后呢，下面到这个目录叫mini program的mpn，这个目录是由我们在项目当中安装的一些啊第三方的依赖，比如说引入了一个对的JS啊，还引入了一个二维码生成的一个组件，还有一个wa当中的一些第三方UI的组件，然后这时候呢，它会在我们部署那一步点击构建的过程当中就会生成的这个目录啊，生成的目录的内容就以便在我们项目当中进行使用。

然后往下看，就能看到一个叫pages，这里面。有很多的目录，每一个目录对应的就是一个页面，而这里面有的就是我们项目当中所设计的页面。然后每个页面当中你会看到有四个文件构成，一个是J，这是它的逻辑部分，然后你会看到有一个Json文件，这个是它的配置部分。配置当中可以配置一些标题啊，也可以配置它单独引入的第三方组件啊，还有对一些窗口行为的一些的设置的东西。然后呢，这个下来的文件叫WTL结尾这个就是对应它的模板部分，就是这一个页面当中会渲出来的整个页面对应的部分的内容。

然后往下这一个就是叫W叉SS，然后双击它，然后你看到这里面代码是不是很熟悉，这就是对应的样式部分，而这个样式只会作用于他同名下的这个WTL这个模板文件当中使用。啊，这个目录的结构会跟我们的。网页当中的名称稍微有点不同啊，网页当中可能大家熟悉的是啊，H7L结尾的一个后缀，然后呢到样式部分习惯的是一个CS结尾的一个部分，但这两者其实差异不会特别特别大，它当中的很多结构还是遵从了我们对于HTL节点的一个的理解的，使用的办办方方式。的方式，但是这里面呢，更多的是由它的制定组件来使用啊，当然我这里面例子当中也引入了一些第三方组件。然后呢，你看到了这个TS，虽然说它的不是CSS，但实际上里面的很多样式的写法也是跟我们CS是一样的，你还能看到里面有一些。

单位叫IPS，这个是我们对应的小程序当中特有的一个单位尺寸，它是相对于750像素的标准设计稿当中的一个相对单位，然后使用它就是对应的750像素里面你测量是多少的宽度和高度和大小，你就写上对应的一个数值，就可以进行移动端的适配了，可是卫视非常非常的智能。然后呢，接下来我们看到下面会有一个目录叫unitx，这里面叫单元哈，你在新创建一个小程序项目的时候，直官方的例子当中也会有一个这样子的一个目录，这目录当中呢，是希望我们通过它来说明一些工具的模块化的一些功能的函数啊，比如说这里面我照着它原来的一个方态的，但是我引入了第三方的DJS，以便我在里面能更好的对于它进行一个日期的格式化的一个使用。而下面的这个呢，我是对应写了一个函数，这个函数呢，就是对我们一些订单的状态啊，通过它来返回一些铭文，用户能看得懂的一些啊，订单对应的状态的一个函公共函数，因为我们在页面当中很多地方都会使用到这个函数，所我们会把它单独的封装出来啊，以实现模块化的开发，然后呢，你看到上面还有一个API点在。

这里面呢，封装的主要是我们对于啊服务微服务这边。封装了我们对于云托管的接口的请求的方式方法啊，都在这里面进行统一的一个调配了，然后呢，这就是我们的uns放置的就是我们公共的一些函数和模块，然后往下这个地方，我们看到的这个s link是对于我们的编写代码的一些的书写规范啊，你可以暂时先忽略不计。然后呢，接下来我们看到有一个入口文件app.js，这个就是我们整个项目的入口了，就是我们小程序打开的时候，最先的就先执行AP0JS里面的APP方法，而AP方案里面呢，大多数内容就是对于我们的项目进行一些初始化的配置。

因为这里面有个的钩子，这里面就是会在项目一开始初始化的时候就会执行的一个函数，然后往下你看到app.jason啊，这里面呢，就是我们整个项目当中的一些全局配置，其中最重要的是上面有个page点。最重要的是上面有个pages pages里面定义的就是我们项目当中所有涉及到的页面，这里面默认的第一个排列在第一个的就是我们的首页。然后呢，往下的Windows设置就是我们对于项目当中一些窗口表现的内容。然后呢，往下TB就是入到了我们的项目当中的底部导航啊，我刷新一下进来量，你看一下，然后底部导航的这一个刚才看到的三个导航的对应的内容。

啊，这里面引用的图标同学们注意了，这里面是不能使用网络图标的，所以说我们刚才特别说明了，我们会在这地方放着你一些本地图标。就把图片放至本地。然后呢，往下这一个using components放置，就什么放，这是我们整个项目当中公共全局引入的第三方组件，这里面我拿了一些。Wind当中常用的组件啊，当然我们项目当中也封装制止的组件啊，到时候我们会单独的讲解说明。使用地方组件和使用制的组件的区别。然后往下的文件有一个ap.w叉SS啊，这个文件呢，就是我们的公共样式，就我们整个项目每一个页面都会和组件都会使用到的样式，叫全局样式。而往下的这四个就是对应的一些常规的no的项目当的配置文件了，其中还有一个project con，而这个文件当中约束了我们项目当中的一些打包部署项目的内容。

然后呢，往下的s map Jason，这是对我们项目当中一个优化的一个流程了哈，这里面大家可以暂时忽略，因为你不需要修改太多这部分的内容啊，所以我们实际上关注的业务点主要集中在APPJSP和我们的unit和pages，和我们上面的components啊，这是我们主要关注的四个目。以上的这些就是我们小程序当中的主要的目录结果。