组件初探

Posted on

框架

小程序的目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 目录结构
├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils
小程序主体部分：

由三个文件组成，必须放在项目的根目录；

目录介绍：

文件 必须 作用
app.js 是 小程序的逻辑
app.json 是 小程序的公共配置
app.wxss 否 小程序的公共样式
  • 根目录下的app.js是整个小程序的逻辑文件。该文件用于对程序的注册，可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
  • 根目录下的app.json是对整个小程序就行全局配置，进行页面注册、窗口表现、设置网络超时时间、设置多 tab 等。
    • app.json页面配置项列表(此处只列出了初学小程序时需要用到的)
属性 类型 必填 描述
pages String Array 是 页面路径列表
window Object 否 全局的默认窗口表现
tabBar Object 否 底部tab栏的表现

若想详细了解，请到官网查看 全局配置

注意： 1. pages表示进行页面注册，你每增加或减少一个页面，都要在该处进行修改
      2. 文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
      3. 写在pages中第一个位置的页面，时小程序的首页
  • app.wmss对一些全局的样式进行设置，如background-color，font-size等；
小程序单页：

由四个文件组成，一般放在一个同一文件夹下（一般，一个页面对应一个文件夹）

文件 作用
index.js 小程序的逻辑,页面的交互等代码在这里实现
index.wxml 用于构建页面，在页面上增加控件，相当于html
index.json 对该页面进行单独配置
index.wxss 该页面的样式文件，类似于前端中的css,用于对界面进行美化
> 此处index只是官方示例，名字可根据自己需要见名知意的起 
四个文件名称相同，文件夹名称也要与其内部包含文件名称相同
原因：与页面注册时只写了文件名有关（不懂可回看页面注册部分）
Utils文件夹

该文件件主要用于存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。
例如： 自带的utils.js文件里面封装了获取格式化时间的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const formatTime = date => { // 此处运用了ES6语法，不熟悉的可以去网上找一些教程
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
} // 在module。exports进行了声明，可以在其他js文件中调用

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
} // 没有声明，该函数不允许在其他js文件中调用

module.exports = {
  formatTime: formatTime
} 对于允许外部调用的方法，用module.exports进行声明，才能在其他js文件中用以下代码引入