微信小程序开发入门教程（二）深入剖析项目结构

2023-12-15 02:35:07

项目结构

小程序的项目结构如下图所示：

|-- miniprogram
|   |-- app.js
|   |-- app.json
|   |-- pages
|   |   |-- index
|   |   |   |-- index.js
|   |   |   |-- index.wxml
|   |   |   |-- index.wxss
|   |   |-- other
|   |   |   |-- other.js
|   |   |   |-- other.wxml
|   |   |   |-- other.wxss
|   |-- components
|   |   |-- my-component
|   |   |   |-- my-component.js
|   |   |   |-- my-component.wxml
|   |   |   |-- my-component.wxss
|   |-- utils
|   |   |-- util.js
|   |-- package.json

小程序的项目主要包含四种文件：

.json 后缀的文件：用于配置小程序的基本信息，如小程序名称、版本号、页面路径等。
.js 后缀的文件：用于编写小程序的逻辑代码。
.wxml 后缀的文件：用于编写小程序的页面模板。
.wxss 后缀的文件：用于编写小程序的样式代码。

app.js

app.js 文件是小程序的入口文件，用于初始化小程序，并在小程序生命周期中提供一些公共的方法和属性。

app.json

app.json 文件用于配置小程序的基本信息，如小程序名称、版本号、页面路径等。

pages

pages 文件夹用于存放小程序的页面文件，每个页面都有一个单独的文件夹，文件夹中包含三个文件：

.js 文件：用于编写页面的逻辑代码。
.wxml 文件：用于编写页面的模板。
.wxss 文件：用于编写页面的样式代码。

components

components 文件夹用于存放小程序的组件文件，组件是一种可重用的 UI 元素，可以被多次使用。每个组件都有一个单独的文件夹，文件夹中包含三个文件：

.js 文件：用于编写组件的逻辑代码。
.wxml 文件：用于编写组件的模板。
.wxss 文件：用于编写组件的样式代码。

utils

utils 文件夹用于存放小程序的工具方法，这些方法可以被其他文件调用。

package.json

package.json 文件是小程序的配置文件，用于指定小程序的依赖关系、构建命令等。

开发步骤

首先，我们需要创建一个小程序项目，可以使用微信开发者工具创建，也可以使用命令行工具创建。
创建好项目后，我们需要在 app.json 文件中配置小程序的基本信息，如小程序名称、版本号、页面路径等。
然后，我们需要在 pages 文件夹中创建页面文件，每个页面都有一个单独的文件夹，文件夹中包含三个文件：.js 文件、.wxml 文件和 .wxss 文件。
在 .js 文件中编写页面的逻辑代码，在 .wxml 文件中编写页面的模板，在 .wxss 文件中编写页面的样式代码。
编写好页面文件后，我们需要在 app.js 文件中注册页面，以便小程序可以找到这些页面。
最后，我们需要使用微信开发者工具编译小程序项目，然后就可以在手机上运行小程序了。