原生小程序代码结构保姆教程

最新推荐文章于 2025-04-25 15:30:00 发布

weixin_42113341

最新推荐文章于 2025-04-25 15:30:00 发布

阅读量838

点赞数 21

文章标签： uniapp web app

本文链接：https://blog.csdn.net/weixin_42113341/article/details/144697853

版权

原生小程序（如微信小程序、支付宝小程序等）具有特定的代码结构和生命周期管理机制。以下是原生小程序的代码框架、入口文件、生命周期以及路由管理的详细介绍：

1. 代码框架

原生小程序的代码通常由以下几个主要部分组成：

project/
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── pages/
│   ├── index/
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs/
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
└── utils/
    └── util.js

主要文件说明：

app.js：小程序的逻辑入口文件，用于初始化全局数据和生命周期函数。
app.json：全局配置文件，用于配置小程序的全局样式、页面路径、窗口表现等。
app.wxss：全局样式表，作用于所有页面。
project.config.json：项目配置文件，通常由开发工具自动生成，用于存储项目配置信息。
pages/：存放所有页面的文件夹，每个页面通常包含四个文件：
- *.js：页面的逻辑文件。
- *.json：页面的配置文件（可选）。
- *.wxml：页面的结构文件，类似于 HTML。
- *.wxss：页面的样式文件，类似于 CSS。
utils/：存放工具类或辅助函数的文件夹。

2. 代码入口

小程序的入口文件是 app.js。这是一个全局的 JavaScript 文件，用于初始化小程序实例，并定义全局数据和生命周期函数。

示例 `app.js`：

// app.js
App({
  onLaunch(options) {
    // 小程序初始化时触发
    console.log('小程序初始化', options);
    // 可以在这里进行登录、获取用户信息等操作
  },
  onShow(options) {
    // 小程序启动，或从后台进入前台时触发
    console.log('小程序启动或前台显示', options);
  },
  onHide() {
    // 小程序从前台进入后台时触发
    console.log('小程序进入后台');
  },
  globalData: {
    userInfo: null
  }
});

说明：

onLaunch：小程序初始化时触发，通常用于执行初始化操作，如登录、获取用户信息等。
onShow：小程序启动，或从后台进入前台时触发。
onHide：小程序从前台进入后台时触发。
globalData：定义全局数据，可以在其他页面中通过 getApp() 获取。

3. 生命周期

小程序的每个页面和整个应用都有各自的生命周期。以下是主要生命周期函数：

应用的生命周期

onLaunch：小程序初始化时触发。
onShow：小程序启动，或从后台进入前台时触发。
onHide：小程序从前台进入后台时触发。
onError：小程序脚本发生错误时触发。
onPageNotFound：页面不存在时触发。

页面的生命周期

onLoad：页面加载时触发，可以接收页面参数。
onShow：页面显示时触发。
onReady：页面初次渲染完成时触发。
onHide：页面隐藏时触发。
onUnload：页面卸载时触发。

示例 `pages/index/index.js`：

// pages/index/index.js
Page({
  data: {
    // 页面数据
  },
  onLoad(options) {
    // 页面加载时触发
    console.log('页面加载', options);
  },
  onShow() {
    // 页面显示时触发
    console.log('页面显示');
  },
  onReady() {
    // 页面初次渲染完成时触发
    console.log('页面初次渲染完成');
  },
  onHide() {
    // 页面隐藏时触发
    console.log('页面隐藏');
  },
  onUnload() {
    // 页面卸载时触发
    console.log('页面卸载');
  },
  // 其他事件处理函数
});

4. 路由管理

小程序的路由管理主要通过 app.json 文件中的 pages 数组和 window 配置来实现。

`app.json` 示例：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}

说明：

pages：定义小程序的所有页面路径。小程序的路由导航基于这个数组中的顺序。
window：配置全局的窗口表现，如导航栏颜色、标题等。
tabBar（可选）：配置底部导航栏。

路由导航

小程序的路由导航主要通过以下几种方式实现：

页面跳转：

// 跳转到 logs 页面
wx.navigateTo({
  url: '/pages/logs/logs'
});

// 跳转到非 tabBar 页面，并关闭当前页面
wx.redirectTo({
  url: '/pages/logs/logs'
});

// 跳转到 tabBar 页面
wx.switchTab({
  url: '/pages/index/index'
});

// 关闭所有页面，打开到某个页面
wx.reLaunch({
  url: '/pages/index/index'
});

使用导航组件：

在 WXML 中使用 <navigator> 组件进行导航。
```
<navigator url="/pages/logs/logs">跳转到日志页面</navigator>
```

动态路由（高级）

虽然原生小程序本身不直接支持动态路由，但可以通过以下方式实现：

使用 wx.navigateTo 动态传递参数：

wx.navigateTo({
  url: `/pages/detail/detail?id=${id}`
});

在 detail.js 中获取参数：

Page({
  onLoad(options) {
    const id = options.id;
    console.log('接收到的参数:', id);
  }
});

5. 总结

代码框架：小程序主要由 app.js、app.json、app.wxss 以及各个页面的 *.js、*.json、*.wxml、*.wxss 文件组成。
代码入口：app.js 是小程序的入口文件，定义了全局数据和生命周期函数。
生命周期：小程序和每个页面都有各自的生命周期函数，如 onLaunch、onLoad、onShow、onReady、onHide、onUnload 等。
路由管理：路由通过 app.json 中的 pages 数组和 window 配置，以及使用 wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch 等 API 进行管理。

通过理解这些结构，您可以有效地开发和管理原生小程序的代码。

关于小程序进入页面的第一个入口问题：

1. `app.json` 中的 `pages` 数组

app.json 文件中的 pages 数组用于注册小程序的所有页面。例如：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/profile/profile"
  ],
  "window": {
    ...
  }
}

作用：

注册页面：所有需要在小程序中使用的页面都需要在这里声明。
页面顺序：pages 数组中的顺序不会直接决定小程序启动时打开的页面。

2. 小程序启动时打开的页面

小程序启动时打开的页面 取决于 以下几种情况：

a. 默认启动页面

如果没有其他配置，小程序启动时默认会打开 pages 数组中的 第一个页面。例如，在上面的例子中，默认会打开 pages/index/index 页面。

b. 使用 `entryPagePath` 配置

从 微信小程序基础库 2.11.0 版本开始，引入了 entryPagePath 配置，可以 显式指定 小程序启动时打开的页面。

示例：

{
  "entryPagePath": "pages/profile/profile",
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/profile/profile"
  ],
  "window": {
    ...
  }
}

说明：

entryPagePath：指定小程序启动时打开的页面路径。
优先级：entryPagePath 的优先级高于 pages 数组中的第一个页面。

c. 通过 URL Scheme 或其他方式打开特定页面

小程序可以通过 URL Scheme、二维码、小程序消息 等方式，通过传递参数指定启动时打开的页面。

示例：

weixin://dl/business/?t=YOUR_TOKEN&path=pages/profile/profile

说明：

传递 path 参数：可以指定小程序启动时打开的页面路径。

3. 总结

pages 数组中的第一个页面：在没有其他配置的情况下，小程序启动时会默认打开 pages 数组中的第一个页面。
entryPagePath 配置：如果配置了 entryPagePath，小程序启动时会打开指定的页面，而不是 pages 数组中的第一个页面。
通过 URL Scheme 或其他方式指定：可以通过传递参数等方式，指定小程序启动时打开的页面。

因此，小程序启动时打开的页面 取决于具体的配置和启动方式，pages 数组中的第一个页面只是默认情况下的行为。

4. 建议

明确指定启动页面：为了避免混淆，建议在 app.json 中使用 entryPagePath 配置，明确指定小程序启动时打开的页面。
```
{
  "entryPagePath": "pages/profile/profile",
  ...
}
```
理解 pages 数组的作用：pages 数组主要用于注册页面，而不是决定启动时打开的页面。