微信小程序的目录结构

Posted 向世界拥抱

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序的目录结构相关的知识,希望对你有一定的参考价值。

当我们打开一个微信小程序项目后,点击进入“编辑”菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文件app.js文件,全局文件app.json文件,图片编辑文件工具app.wxss文件。

小程序目录结构的整体结构如下:

小程序包含一个描述整体程序的APP和多个描述各自页面的page。

文件 必填 作用
app.js 小程序逻辑
app.json 小程序公共设置
app.wxss 小程序公共样式表

一个小程序页面由四个文件组成,分别是:

文件类型    必填    作用

js      是     页面逻辑

wxml      是      页面结构

wxss                 否      页面样式表

json      否      页面配置

1.pages目录介绍

pages:主要存放小程序的页面文件,其中每个文件夹为一个页面,每个页面包含四个文件:
注意:
1.小程序每个页面必须有.wxml和.js文件,其他两种类型的文件可以不需要
2.文件名称必须与页面的文件夹名称相同,如index文件夹,文件只能是index.wxml、index.wxss、index.js和index.json.
1.2 utils
该文件件主要用于存放全局的一些.js文件,公共用到的一些事件处理代码文件可以放到该文件夹下,用于全局调用。例如,公用的方法:对时间的处理等。
1 module.exports = {  
2   formatTime: formatTime  
3 }  
复制代码
对于允许外部调用的方法,用module.exports进行声明,才能在其他js文件中用一下代码引入
1 var util = require(\'../../utils/util.js\')
复制代码 
然后就可以调用该方法。
举例:我们直接定义一个utils函数,如下图所示:
1 function util(){
2   console.log("模块被调用了!!")
3 }
4 module.exports.util = util
复制代码
然后在index.js文件中调用这个util函数,如下所示:
 var common = require(\'../../utils/util.js\')
复制代码
1.3 app.js、app.json、app.wxss
app.js : 系统的方法处理全局文件,也就是说文件中规定的函数和数据,在整个小程序中,每一个框架页面和文件都可以使用this获取。每个小程序都会有一个app.js文件,有且只有一个,位于项目的根目录!app.js的作用就是告诉小程序,注册一个小程序实例使用app(object)的形式注册,实现小程序在不同阶段的需要实现的事件功能,如onLoad,onshow等,全局的on事件只有如下三个,要比页面的on事件要少。主要处理程序的声明周期的一些方法;例如:程序刚开始运行时事件处理等.app.js 里面包含一个app() 方法,里面提供对应事件定义,如下
 1 App({
 2   onLaunch: function () {
 3     console.log(\'App Launch\')
 4   },
 5   onShow: function () {
 6     console.log(\'App Show\')
 7   },
 8   onHide: function () {
 9     console.log(\'App Hide\')
10   }
11 })
12 复制代码

App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。

app.json : 系统全局配置文件,是必须包含的。包含设置页面路径,设置底部,网络,调试模式,设置导航头的颜色,字体大小,下面有没有tabbar等功能,具体页面的配置在页面的json文件中单独修改,任何一个页面都需要在app.json中注册,如果不在json中添加,页面是无法打开的。

1  "pages":[
2     "pages/index/index",
3     "pages/logs/logs"
4   ],
5 复制代码
(框架中的json优先级高于全局的json优先级。)

app.wxss : 全局的界面美化代码,并不是必须的。其优先级同样没有框架中的wxss的优先级高。
举例:在index.wxss中有头像的外边距设置
1 .usermotto {
2   margin-top: 200px;
3 }
4 复制代码

在app.wxss中也定义一个全局的头像外边距设置400px,我们看看到底哪一个被执行了。

在执行重启的过程中,我们可以看到全局的参数被index.wxss里面的覆盖了。

微信小程序的图片添加和处理
微信小程序中添加图片是非常麻烦的,只能通过打开项目文件夹,把图片放到目录下即可。在代码中引用图片的相对路径或者绝对路径就可以了。目前小程序开发中仅支持png和jpg格式,其他格式的图片无法打开。

以上是关于微信小程序的目录结构的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序插件

微信小程序视图层WXML_模板

微信小程序代码结构

微信小程序小程序代码基本组成结构

入门系列 微信小程序简介

微信小程序介绍