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

微信小程序目录

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

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

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 是全局配置文件,用于定义小程序的页面路径、窗口样式、导航栏设置等核心属性。其中,pageswindow

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/88946.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/88946.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[element-ui]el-table在可视区域底部固定一个横向滚动条

背景当el-table的列太多时,得拖动横向滚动条才能看到,但如果内容也很多,可能横向滚动条还看不到,又得滑到最下方才能拖动滚动条,这样不太方便。若内容过多时,有个固定在可视区域的横向滚动条就好了&#xf…

大模型核心组件结构与计算顺序详解(Embedding/FFN/LayerNorm等)

在大模型(如GPT、BERT、LLaMA等)的架构设计中,各个组件的协同工作是模型性能的核心保障。本文将详细解析大模型中Embedding、前馈神经网络(FFN)、LayerNorm、Softmax、MoE、残差连接的作用及计算顺序,帮助理…

希尔排序:突破传统排序的边界

一、算法思想希尔排序(Shell Sort),也被叫做缩小增量排序,是插入排序的一种改进版本。希尔排序的核心在于先将整个待排序的记录序列分割成若干个子序列,分别进行直接插入排序。随着增量逐渐减小,子序列的长…

Kafka事务消息与Exactly-Once语义实战指南

Kafka事务消息与Exactly-Once语义实战指南 在分布式微服务或大数据处理场景中,消息队列常被用于异步解耦、流量削峰和系统伸缩。对于重要业务消息,尤其是金融、订单、库存等场景,消息的精确投递(Exactly Once)和事务一…

26.将 Python 列表拆分为多个小块

将 Python 列表拆分为多个小块(Chunk a List) 📌 场景 1:按份数 chunk_into_n(lst, n) 将一个列表平均拆分为 n 个块。如果不能整除,最后一块会包含剩余元素。 ✅ 示例代码 from math import ceildef chunk_into_n(lst, n):size = ceil(len

18.理解 Python 中的切片赋值

1. 切片语法回顾 标准切片语法格式为: [start_at : stop_before : step]start_at:起始索引(包含)stop_before:结束索引(不包含)step:步长(默认为 1)例如: lst = [1, 2,

论文 视黄素与细胞修复

王伟教授发布,通过对比兔子和老鼠耳朵穿孔后的复原,控制变量法发现了 视黄素对细胞修复的影响

JavaScript 的执行上下文

当 JS 引擎处理一段脚本内容的时候,它是以怎样的顺序解析和执行的?脚本中的那些变量是何时被定义的?它们之间错综复杂的访问关系又是怎样创建和链接的?要解释这些问题,就必须了解 JS 执行上下文的概念。 JavaScript引擎: JavaScript引擎是一个计算机程序,它接收JavaScri…

掉线监测-tezos rpc不能用,改为残疾网页监测

自从有了编程伴侣,备忘的需求变得更低了,明显不担心记不住语法需要记录的情景。然而还是保持习惯,就当写日记吧,记录一下自己时不时在瞎捣腾啥。tm,好人谁记日记。就是监控灰色各自前紧挨着出现了多少红色格子。一共查…

Spark Expression codegen

Expression codegen src/main/scala/org/apache/spark/sql/catalyst/expressions/Expression.scala def genCode(ctx: CodegenContext): ExprCode = {ctx.subExprEliminationExprs.get(ExpressionEquals(

Axios方法完成图书管理页面完整版

一、目的 需要实现的功能有包括&#xff1a; 从服务器发送请求&#xff0c;获取图书列表并渲染添加新图书编辑现有图书信息删除图书以上每一步都实现与服务器存储数据同步更改 二、基础配置 引入Axios库&#xff1a; <script src"https://cdn.jsdelivr.net/npm/ax…

SQLlite下载以及简单使用

SQLite Download Page cd D:\WK\2025\StudentManagerSystem\sqlite D: entManagerSystem\sqlite>sqlite3.exe 所建库的名字.db 一&#xff1a;命令 <1>打开某个数据库文件中 sqlite3 test.db<2>查看所有的命令介绍(英文) .help<3>退出当前数据库系统 .qu…

函数柯里化详解

一、函数柯里化&#xff1a; 是一种高阶函数技术&#xff0c;它将一个多参数函数转换为一系列单参数函数的链式调用。 核心概念 定义&#xff1a;将一个函数 f(a, b, c) 转换为 f(a)(b)© 的形式 **本质&#xff1a;**通过闭包保存参数&#xff0c;实现分步传参 关键特征&a…

C++11:constexpr 编译期性质

C11&#xff1a;constexpr & 编译期性质常量表达式 constexpr变量IiteralType函数自定义字面量参数匹配与重载规则静态断言常量表达式 constexpr const expression常量表达式&#xff0c;是C11引入的新特性&#xff0c;用于将表达式提前到编译期进行计算&#xff0c;从而减…

【每天一个知识点】多模态信息(Multimodal Information)

常用的多模态信息&#xff08;Multimodal Information&#xff09;指的是来源于多种感知通道/数据类型的内容&#xff0c;这些信息可以被整合处理&#xff0c;以提升理解、推理与生成能力。在人工智能和大模型系统中&#xff0c;典型的多模态信息主要包括以下几类&#xff1a;✅…

iOS 抓包工具精选对比:不同调试需求下的工具适配策略

iOS 抓包痛点始终存在&#xff1a;问题不是“抓不抓”&#xff0c;而是“怎么抓” 很多开发者都遇到过这样的情况&#xff1a; “接口没有返回&#xff0c;连日志都没打出来”“模拟器正常&#xff0c;真机无法请求”“加了 HTTPS 双向认证&#xff0c;抓不到了”“明明设置了 …

图像修复:深度学习实现老照片划痕修复+老照片上色

第一步&#xff1a;介绍 1&#xff09;GLCIC-PyTorch是一个基于PyTorch的开源项目&#xff0c;它实现了“全局和局部一致性图像修复”方法。该方法由Iizuka等人提出&#xff0c;主要用于图像修复任务&#xff0c;能够有效地恢复图像中被遮挡或损坏的部分。项目使用Python编程语…

css 边框颜色渐变

border-image: linear-gradient(90deg, rgba(207, 194, 195, 1), rgba(189, 189, 189, 0.2),rgba(207, 194, 195, 1)) 1;

本地 LLM API Python 项目分步指南

分步过程 需要Python 3.9 或更高版本。 安装 Ollama 并在本地下载 LLM 根据您的操作系统&#xff0c;您可以从其网站下载一个或另一个版本的 Ollama 。下载并启动后&#xff0c;打开终端并输入以下命令&#xff1a; ollama run llama3此命令将在本地拉取&#xff08;下载&…

日本的所得税计算方式

✅ 【1】所得税的计算步骤&#xff08;概要&#xff09; 日本的所得税大致按照以下顺序来计算&#xff1a; 1️⃣ 统计收入&#xff08;销售额、工资等&#xff09; 2️⃣ 扣除必要经费等&#xff0c;得到「所得金額」 3️⃣ 扣除各类「所得控除」&#xff08;所得扣除&#xf…