「小程序开发」项目结构和页面组成

微信小程序目录

微信小程序的目录，每种文件都有特定用途，组合起来才能构建完整应用。

小程序最基本的目录结构通常包含这些部分：

my-miniprogram/
├── pages/          // 存放所有页面
│   ├── index/      // 存放index页面的逻辑文件
│   └── logs/       // 存放logs页面的逻辑文件
├── utils/          // 存放公用工具
├── app.js          // 控制整个小程序
├── app.json        // 全局配置
└── app.wxss        // 全局样式

核心文件与简单案例

app.js文件

app.js 是项目的全局逻辑配置文件，用于定义小程序的生命周期函数、全局状态管理以及基础配置。它与app.json和页面级别的page.js文件共同构成了小程序的运行框架。

全局生命周期函数
app.js中提供的全局生命周期函数，包括：

• onLaunch：小程序初始化时触发，仅执行一次。
• onShow：当小程序启动或从后台进入前台时触发。
• onHide：当小程序从前台进入后台时触发。
• onError：当小程序发生脚本错误或API调用失败时触发。

示例代码：

App({
   
  onLaunch() {
   
    // 初始化全局变量或调用登录接口
    console.log('小程序初始化');
  },
  onShow() {
   
    console.log('小程序显示');
  },
  onHide() {
   
    console.log('小程序隐藏');
  },
  onError(err) {
   
    console.error('发生错误:', err);
  }
});

此示例展示了app.js的基本结构，其中App()函数是程序入口点，用于注册小程序并提供全局配置和生命周期处理。

app.js 还可以定义全局变量和工具函数，供各个页面组件访问和调用。通过将常用的数据或方法挂载到 globalData 或自定义属性上，可以实现跨页面的数据共享和功能复用。

示例代码：

App({
   
  globalData: {
   
    userInfo: null,
    apiUrl: 'https://api.example.com'
  },
  fetchUserInfo() {
   
    // 模拟获取用户信息
    this.globalData.userInfo = {
    name: '张三', id: 123 };
  }
});

此示例，在页面中可以通过const app = getApp();获取全局实例，并访问app.globalData.userInfo或调用 app.fetchUserInfo() 方法。

app.json文件

app.json 是全局配置文件，用于定义小程序的页面路径、窗口样式、导航栏设置等核心属性。其中，pages 和 window