微信小程序 基础教程

微信小程序 高级教程

original icon
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.knowledgedict.com/tutorial/wechatminiprogram-structure.html

微信小程序开发 目录结构详解


作为微信小程序的开发者,首先必须清晰地了解其目录结构,这里总结了一套还算好维护的目录结构跟大家分享。

基本结构

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

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

文件 必需 作用
app.js 小程序逻辑文件,主要是 javascript 代码
app.json 小程序公共配置
app.wxss 小程序公共样式表,主要是 css 代码

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

文件类型 必需 作用
js 页面逻辑,javascript 代码
wxml 页面结构,类似 html 代码
json 页面配置,json 格式数据
wxss 页面样式表,css 代码

注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

初始目录结构

当初始化创建小程序后,微信小程序 dev tools 默认会有如下目录结构:

├─  app.js                  --- 小程序加载时优先加载的入口 js
├─  app.json                --- 入口文件和公共配置
├─  app.wxss                --- 公共样式表
├─  project.config.json     --- 小程序全局配置文件
├─  sitemap.json            --- 允许微信索引文件
│      
├─  pages                   --- 小程序页面
│  ├─  index               --- 示例页面
│  │      index.js
│  │      index.json
│  │      index.wxml
│  │      index.wxss
│  ├─  logs                --- 日志
│  │      log.js
│  │      log.json
│  │      log.wxml
│  │      log.wxss
│  └─  ...
│          ...   
│          ...   
│               
├─  utils                   --- 功能组件
    └─  util.js             --- 公共小组件库

组件 components

小程序项目初始化不包含 components 目录,需要手动创建,其和 pages 目录同级。

Django是一个使用Python编写的Web应用程序框架,它有一种标准的项目结构,以帮助组织和管理代码。py:Django项目的命令行工具 ...
Scrapy 通过 scrapy startproject <project_name> 命令来在 project_name 文件夹下创建一 ...
Vue 项目通过 npm 及 vue 创建后,我们可以在 IDE(VSCode、IDEA、Eclipse、Atom 等) 中打开项目,下面详 ...
微信小程序还是小游戏都是前端基于 javascript(typescript)的程序,所以客户端的源码是在用户本地手机(pad)上的,下面介 ...
Lucene 的 Directory 是一个抽象类,是针对索引文件目录操作的抽象类,对文件操作都是通过 Directory 来实现的;Dir ...