小程序学习笔记一：基本目录结构与主目录文件详解

 

一：基本项目文件组成

   

   除了上面默认有的三大目录，我们还可以自己新建一些用于某些用途的目录：

   component：存放自定义组件的目录。（组件的定义与 page 的定义类似，只不过是采用 Component 对象来注册，并且要在json文件中声明 component=true）

   images：存放图片的目录。

   style：样式目录。

   screenshot：截图保存目录。

   audio：音频目录。

   video：视频目录。

    。。。。。。根据需要自己建立。

 

二：根目录

    根目录主要分为两部分：程序主体部分 和  项目配置部分。

    1：程序主体

    小程序中维护一个 App 对象，代表整个程序本身，与之相关的一系列文件就是对程序内容的相关定义。

    1）app.js

    app.js定义了程序对象的相关逻辑，主要是 注册程序对象以及程序对象的生命周期函数、程序全局变量等。

    格式为：

App({ //App() 函数用来注册一个小程序。接受一个 object 参数{在花括号中定义}，其指定小程序的生命周期函数等。
  onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'//一个名为globalData的全局变量
})

    其他page、component的js文件中可以获取App实例，通过实例来调用程序js中的逻辑函数、全局数据。

var appInstance = getApp() //获取App实例
console.log(appInstance.globalData) // 通过实例访问全局数据

   

    2）app.json

  app.json文件用来对小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

    格式为：

{
  "pages": [
    "页面文件的路径", 
  ],
  "window": {
   //设置小程序的状态栏、导航条、标题、窗口背景色。
  },
  "tabBar": {
    "list": [{
      "pagePath": "第一个tab的页面路径",
      "text": "第一个tab的标签文本"
    }, {
      "pagePath": "第二个tab的页面路径",
      "text": "第二个tab的标签文本"
    },{
      ....其他tab配置
   }]
  },
  "networkTimeout": {
   //设置各种网络请求的超时时间。
  },
  "debug": 是否启动调试模式
}

    pages：接收一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+wxml不带后缀的文件名】信息，数组的第一项代表小程序的初始页面。

    window：设置小程序的状态栏、导航条、标题、窗口背景色、上拉下拉事件。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

   配置tabBar：如果小程序是一个多 tab 应用（窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 标签的内容与属性，以及 tab 切换时显示的对应页面。

  注意：

1. 当设置 position 为 top 时，将不会显示 icon（顶部tabBar无图标）
2. tabBar 中的 list 是一个数组，最少配置2个、最多5个tab，tab 按配置时的顺序排序。

     tabBar标签的属性内容：

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色， 仅支持 black/white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top //顶部导航栏or底部导航栏

     list标签的内容：list 接受一个数组，数组中的每个项都是一个对象，每一个对象包含以下属性：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

   3）app.wxss

    wxss是微信小程序的样式语言，用来定义 WXML 的组件应该怎么显示。

    定义在 app.wxss 中的样式为全局样式，作用于程序中的每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

 

    2：项目配置文件

   通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

   小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

 

三：pages目录

    pages目录下存放页面文件，一个子目录对应一个页面，子目录名就是页面名，如：

  

    这里，定义了四个页面：cinema、home、logs、my。

    每个页面子目录下包含了该页面的相关定义文件：页面描述文件wxml、页面样式文件wxss、页面逻辑文件js、页面配置文件json。如：

   

    各种文件的具体内容与定义，在后续文章中梳理。

 

四：utils目录

    工具目录，可以用于定义一些所有页面、组件公用的方法，比如：获取日期字符串、生成随机数等等功能函数。

   我们可以在util.js中定义功能函数，也可以按照相关性，把同一类别的功能函数单独写进一个js文件，例如：创建time.js文件专门用于定义与时间处理的一系列函数。

   

  

 

转载于:https://www.cnblogs.com/ygj0930/p/8342697.html