微信小程序-项目目录结构

发表于 | 分类于

        我们在开发项目的时候，项目创建好之后都会有一个默认的目录结构，在开发微信小程序的时候，通过官方提供的微信开发者工具创建项目之后，也会生成一个默认的目录结构，和我们开发一般项目的结构稍微有所不同，今天记录和分析一下微信小程序的目录结构。

小程序-项目结构

1. 创建项目

        打开从微信公众平台下载的微信开发者工具，需要先进行登录，用你在公众平台注册的那个微信账号进行登录，在左侧项目列表中选择小程序，然后如下图所示。

新建项目

上面一共有这么几个地方需要填写：

  • 项目名称：就是你开发的项目。
  • 目录：默认是C:\Users\XXX\WeChatProjects\项目名，可以手动选择代码的存放路径；
  • AppID：如果是注册用户，需要到公共平台在菜单“开发”—“开发设置”可以看到小程序AppID，这相当于是给开发人员的通行证，复制下来填入即可。如果是未注册的用户也可以使用测试号，不过测试号不可以选择后端服务(反正暂时也用不到)。
  • 开发模式：小程序(默认)，插件。我们选择小程序。
  • 后端服务：小程序·云开发(默认)，不使用云服务。我们选择不使用云服务。
  • 语言：如果后端服务选择不使用云服务的话，会多一个语言选择，分别有JavaScript和TypeScript两者，在这选择Javascript。

上面的选项选择完毕之后，点击右下角的新建即可创建项目。

2. 目录结构

        新创建出的项目的目录结构如下，包括两个文件夹和5个文件。文件夹分别是pages文件夹和utils文件夹；文件分别是app.js，app.json，app.wxss，project.config.json，sitemap.json。

总目录

3. 文件分析

3.1 app.js

        该文件是小程序的逻辑文件，是项目必须要有的一个文件，里面的App是用于启动时做一下内容加载请求使用，是小程序进入首页之前调用的，里面的globalData存放的是全局变量，可以在任何一个.js文件里面被调用。

        每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。详细的参数含义和使用请参考 App 参考文档 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

整个小程序只有一个App实例，是全部页面共享的，。开发者可以通过getApp方法获取全局唯一的App实例，获取App上的数据或者电调用开发者注册在App上的函数。

1
2
3
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

3.2 app.json

        在小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，该文件也是项目必须要有的，它决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。完整配置项说明请参考小程序全局配置。以下是一个包含了部分常用配置选项的 app.json ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

3.3 app.wxss

        该文件是小程序的公共样式，不是项目所必须有的，定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。WXSS 具有 CSS 大部分特性。为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有尺寸单位和样式导入。

尺寸单位：rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

建议：在开发微信小程序的时候可以用iPhon作为视觉稿的标准，也就是1px=2rpx。

注意：在较小的屏幕上不可避免的会有一些毛刺。

样式导入：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例代码如下：

1
2
3
4
/** common.wxss **/
.small-p {
  padding:5px;
}
1
2
3
4
5
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式：框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
1
<view style="color:{{color}};" />
  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
1
<view class="normal_view" />

选择器：目前支持的选择器有：

选择器 样例 样例描述
.class .intro 选择所有拥有 class=”intro” 的组件
#id #firstname 选择拥有 id=”firstname” 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

3.4 project.config.json

        该文件是一个工具配置文件，通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
{
	"description": "项目配置文件",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true,
		"autoAudits": false,
		"coverView": true,
		"showShadowRootInWxmlPanel": true,
		"scopeDataCheck": false
	},
	"compileType": "miniprogram",
	"libVersion": "2.10.1",
	"appid": "wxd837a802c37e57a0",
	"projectname": "test",
	"debugOptions": {
		"hidedInDevtools": []
	},
	"isGameTourist": false,
	"simulatorType": "wechat",
	"simulatorPluginLibVersion": {},
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

3.5 sitemap.json

        小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。默认是所有页面都会被微信索引。在此就不过多解释，完整配置项说明请参考小程序 sitemap 配置。

1
2
3
4
5
6
{
  "rules":[{
    "action": "disallow",
    "page": "*"
  }]
}

注：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false。

*注: *sitemap 文件内容最大为 5120 个 UTF8 字符。

4. 文件夹分析

4.1 pages

        该文件夹是存放小程序页面的文件夹，下面每一个子文件夹都是一个小程序页面，一个小程序页面由四个文件组成，分别是：

文件类型 必需 作用
js 是 页面逻辑
wxml 是 页面结构
json 否 页面配置
wxss 否 页面样式表

4.1.1 js

        对于小程序中的每个页面，都需要在页面对应的js文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。使用Page()构造器注册页面。详细的参数含义和使用请参考 Page 参考文档 。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

4.1.2 wxml

        该文件是编写小程序页面的文件，WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。要完整了解 WXML 语法，请参考WXML 语法参考。下面是一些wxml使用的简单的例子。

数据绑定：

1
2
<!-- wxml -->
<view>{{message}}</view>
1
2
3
4
5
6
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染：

1
2
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
1
2
3
4
5
6
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染：

1
2
3
4
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
1
2
3
4
5
6
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

4.1.3 json

        该文件是当前页面的配置文件，每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。完整配置项说明请参考小程序页面配置。

配置示例：

1
2
3
4
5
6
7
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

上面的配置分别是导航栏背景颜色、导航栏标题颜色、导航栏标题文字内容、窗口背景色、下拉 loading 的样式。

4.1.4 wxss

        该文件是对当前页面元素的样式进行渲染，和app.wxss一样，只不过是作用范围不一样，可以参看app.wxss。

4.2 utils

        这是一个工具包，里面的js文件是一个工具类，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const formatTime = date => {
  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(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
//将方法暴露出去，供别人调用
module.exports = {
  formatTime: formatTime
}

然后在其他页面的js文件里通过require进行引入该工具类，即可进行方法的调用。示例代码如下：

1
2
3
4
5
6
7
8
//xxx.js
var util = require('../../utils/util.js')
Page({
    getTime:funnction(){
    	var time = util.formatTime(new Date())
		console.log(time)          //  2020/02/05 18:40 
	}
})

5. 总结

        以上就是对小程序开发的目录结构介绍，还是很好了解的，具体里面的一些语法和用法，可以去微信公众平台查看官方文档。

        另外在说一下怎么快速创建页面文件，一个页面需要有.js，.json，.wxss，wxml四个文件，如果一个一个的创建会很麻烦，说一个简单的方法，首先在pages上右键—>新建目录，然后输入目录名称，接着在刚创建的目录上右键—>新建Page，这样会直接在该目录下创建出与目录同名的四个相应的文件，是不是很便捷？还有一种更便捷的方法，就是在app.json文件中的pages里，直接按格式添加上要创建的目录，例如"pages/test/test"，保存之后，会直接创建出test文件夹以及下面的四个子文件。

1
2
3
4
5
6
7
{
    "pages": [
        "pages/index/index",
        "pages/logs/logs",
        "pages/test/test"
    ],
}

        就写这么多吧，感觉整理的也还算详细，收工收工~

0%