当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序开发目录结构介绍

微信小程序开发目录结构介绍

2018-06-06 11:27 来源: 霸界科技

摘要:在进行微信小程序开发的时候,有一个固定的默认的目录结构,该结构中包含一个app(主体部分)和多个page(页面),其中分别有四种文件类型。...

期权保本理财
  在进行微信小程序开发的时候,有一个固定的默认的目录结构,该结构中包含一个app(主体部分)和多个page(页面),其中分别有四种文件类型,详细介绍如下:
 
微信小程序开发目录结构介绍
 
  

1、目录结构

 
  test
 
  ├─ page
 
  │ └─ index
 
  │  ├─ index.js
 
  │  ├─ index.json
 
  │  ├─ index.wxml
 
  │  └─ index.wxss
 
  ├─ app.js
 
  ├─ app.json
 
  └─ app.wxss
 
  

2、目录结构详细介绍

 
  (1)项目文件介绍
 
  .js后缀的文件是脚本文件,实现页面的交互等代码;
 
  .json后缀的文件是配置文件,主要用于json数据格式存放与设置程序的配置效果;
 
  .wxss后缀的是样式表文件,类似前端css,用于界面美化;
 
  .wxml后缀的文件是页面结构文件,用于构建页面与页面上控件的增加。
 
微信小程序开发目录结构介绍
 
  (2)app主体部分介绍
 
  app是用来描述整体程序的,由.js、.json、.wxss文件组成。.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,它们都必须放在项目根目录中。
 
  app.js是小程序的必要的脚本代码,在这个文件中可以监听并处理小程序的生命周期函数、声明全局变量,并调用框架为开发提供的丰富的 API。
 
  app.json是对整个小程序运行中必须的全局配置,用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。它所接受每一个数组中每一项都是字符串,来指定小程序由哪些页面组成。微信小程序中的每一个页面的“路径+页面名”都必须写在app.json的pages中,并且pages中的第一个页面是小程序的首页。
 
  app.wxss是整个小程序的公共样式表,不同于app.js与app.json的必须性,它是非必须的存在。
 
  (3)page页面介绍
 
  page是用来描述页面,一个页面由.js、.json、.wxss、.wxml四个文件组成,即每一个小程序页面都是由同路径下同名的四个不同后缀文件的组成。比如首页的index,它的纹面组成就是index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。
 
  index.js 是必须的页面脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。
 
  index.wxss是非必须的页面样式表文件,当有页面样式表时,页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。
 
  index.json是非必须页面配置文件,当有页面有指定的页面配置文件时,配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用app.json中的默认配置。
 
  文末,小编顺便说下两个需要注意的点,一是为了为了方便开发者减少配置项,小程序规定描述页面的四个文件必须具有相同的路径与文件名;二是小程序提供了丰富的API,开发者可根据需求选择,具体网址为https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715。
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088