小程序项目的基本组成结构

news2025/1/16 13:21:48

分类介绍

  • 项目根目录下的文件及文件夹

pages文件夹

用来存放所有小程序的页面,其中每个页面都由4个基本文件组成,它们分别是:

.js文件:页面的脚本文件,用于存放页面的数据、事件处理函数等

.json文件:当前页面的配置文件

.wxml文件:页面的模板结构文件

.wxss文件:当前页面的样式文件

utils文件夹

用来存放工具性质的模块

app.js文件

小程序项目的入口文件

app.json文件

小程序项目的全局配置文件;用于配置小程序的所有页面路径、窗口外观等

pages:用来记录当前小程序所有页面的路径

注意两点:

1. 当我们想要新建小程序页面时,只需要在 app.json -> pages 中新增页面的存放路径即可;

小程序开发者工具可以帮我们自动创建对应的页面文件

2. 当我们想要修改项目首页时,只需要调整 app.json -> pages 数据中页面路径的前后顺序;

小程序会把排在第一位的页面,当作项目首页进行渲染

window:全局定义小程序所有页面的背景颜色、文字颜色等

style:全局定义小程序组件所使用的样式版本

sitemapLocation:用于指明sitemap.json的位置;像这里 "sitemapLocation": "sitemap.json"就表示和app.json同级

app.wss文件

小程序项目的全局样式文件

project.config.json文件

项目的配置文件

appid:用于保存小程序的账号ID

小程序这里看

sitemap.json文件

用于配置小程序页面是否允许被微信索引

  • 文件后缀

.json文件

app.json

project.config.json

sitemap.json

每个页面文件夹中的.json配置文件

注意:小程序中的每一个页面,可以使用.json文件来对本页面的窗口外观进行配置,

           其中页面中的navigationBarBackgroundColor配置项会覆盖app.json的window中相同的配置项

.wxml文件

用于构建小程序页面的结构,作用类似于网页开发中的HTML

区别在于:

标签名称不同 —— WXML中的view、text、image、navigator 对应 HTML中的div、span、img、a

属性节点不同 —— <navigator url="/pages/home/home"></navigator> 对应 <a href="#">超链接</a> 

.wxss文件

用于描述WXML的组件样式,作用类似于网页开发中的CSS

区别在于:

增加了rpx尺寸单位,在不同大小的屏幕上小程序会自动进行换算

提供了app.wss全局样式和局部页面的.wxss局部样式

仅支持部分CSS选择器 eg. .class、#id、::after、::before、并集选择器、后代选择器

.js文件

app.js:整个小程序项目的人口文件,通过调用App()函数来启动整个小程序

页面.js:页面的入口文件,通过调用Page()函数来创建并运行页面

普通.js:普通的功能模块文件,用于封装公共的函数或属性供页面使用

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

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

相关文章

【uni-app 微信小程序】新版本发布提示用户进行更新

知识准备 uni.getUpdateManager文档介绍 不支持APP与H5&#xff0c;所以在使用的时候要做好平台类型的判断&#xff0c;如何判断&#xff0c;参考条件编译处理多端差异 代码参考 export const updateApp () > {const updateManager uni.getUpdateManager()updateManag…

LabVIEW断路器检测系统

随着电网技术的快速发展&#xff0c;对电力系统的可靠性和安全性要求不断提高&#xff0c;塑壳断路器作为关键的保护设备&#xff0c;其出厂前的检测非常重要。开发了一种基于LabVIEW软件平台开发的塑壳断路器智能脱扣器检测系统&#xff0c;该系统能够有效提高检测的自动化水平…

ASP.NET Core API 前后端分离跨域

环境准备 数据库&#xff1a; sqlserver 2022 后端&#xff1a; vs2022 ASP.NET Core API .net 8 前端&#xff1a; Hbuilderx bootstrap 5.3.0 jquery v3.7.1 bootstrap-table 1.23.5 完整项目代码下载地址 功能 实现 单张表 的 增 删 改 查 创建数据库和表 create data…

Mac M1 安装数据库

1. Docker下载 由于Sqlserver和达梦等数据库&#xff0c;不支持M系列的芯片&#xff0c;所以我们通过docker安装 下载并安装docker: https://www.docker.com/get-started/ 安装完成后&#xff0c;打开docker 2. SQL Server 安装 2.1 安装 打开终端&#xff0c;执行命令 doc…

进程的管理与控制

一、进程与线程 1. 进程 程序&#xff1a;是静态的&#xff0c;就是个存放在磁盘里的可执行文件&#xff0c;就是一系列的指令集合。 进程&#xff08;Process&#xff09;&#xff1a;是指计算机中已执行的程序&#xff0c;是动态的。 &#xff08;1&#xff09;进程的组成…

SQLCipher:SQLite加密工具的实用指南

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;SQLCipher是一个开源工具&#xff0c;用于为SQLite数据库提供透明的数据加密功能&#xff0c;确保数据安全。其工作原理是通过在SQLite的API上增加一层加密层&#xff0c;并使用AES加密算法确保数据在未授权访问…

如何将 JavaWeb 项目部署到云服务器

1. 搭建 Java 部署环境 接下来以 Ubuntu 来进行演示 1.1. apt 包管理工具 apt 就相当于手机上的应用市场 列出所有软件包&#xff1a;apt list 这个命令输出所有包的列表&#xff0c;内容比较多&#xff0c;可以使用 grep 命令过滤输出&#xff1a;apt list |grep "jd…

自动驾驶算法——卡尔曼滤波器平滑感知车道线参数【C++代码实现】

1.算法原理 在工程实践中,由于感知识别到的车道线偶尔存在较大的跳变,导致后端控制算法计算出的控制角度也存在较大的跳变,所以我们需要对感知输入的车道线系数进行平滑处理。 已知卡尔曼滤波算法主要分为以下几大步骤: 感知将车道线以三次螺旋曲线方程 y = c 0 + c 1 x +…

用python替换和循环插入excel的内容

用python替换和循环插入excel的内容 目的&#xff1a; 1.有一个word模板和一个有数据的excel表格 2.需要将excel中的数据经过更改成需要的字符串插入word段落中 3.更改word中的字符串 4.写一个现阶段可以用的程序&#xff0c;并用作以后更新迭代复用。 过程&#xff1a; …

UE5基本数据类型

bool: 表示布尔值&#xff0c;只有两个取值&#xff1a;true 或 false&#xff0c;用于表示逻辑条件。int8: 表示 8 位的有符号整数&#xff0c;范围是 −128−128 到 127127。uint8: 表示 8 位的无符号整数&#xff0c;范围是 00 到 255255。int16: 表示 16 位的有符号整数&am…

【Unity高级】在编辑器中如何让物体围绕一个点旋转固定角度

本文介绍如何在编辑器里让物体围绕一个点旋转固定角度&#xff0c;比如上图里的Cube是围绕白色圆盘的中心旋转45度的。 目标&#xff1a; 创建一个在 Unity 编辑器中使用的旋转工具&#xff0c;使开发者能够在编辑模式下快速旋转一个物体。 实现思路&#xff1a; 编辑模式下…

深度学习:从入门到精通的全面学习路径

摘要&#xff1a; 本文详细阐述了深度学习从入门到精通的系统学习路线。从基础数学与编程知识的夯实&#xff0c;到深度学习核心技术栈的深入掌握&#xff0c;包括 TensorFlow 与 PyTorch 等框架的应用&#xff1b;再到各类主流深度学习算法的原理学习与实践&#xff0c;涵盖神…

CC2530传感器应用实例

1.CC2530流水灯实验 //基于CC2530微控制器的程序&#xff0c;用于控制三个LED灯的闪烁。#include <ioCC2530.h>#define uint unsigned int #define uchar unsigned charuint代表无符号整型&#xff0c;uchar代表无符号字符型。#define LED1 P1_0 #define LED2 P1_1 #defi…

深度和法线纹理

屏幕后期处理效果的基本原理就是当游戏画面渲染完毕后通过获取到该画面的信息进行额外的效果处理 之前的边缘检测、高斯模糊、Bloom、运动模糊等效果都是基于获取当前屏幕图像中的像素信息进行后期处理的 如果仅仅根据像素信息来进行一些效果处理&#xff0c;存在以下问题&…

Oracle之表空间迁移

问题背景&#xff1a;一个数据表随着时间的累积&#xff0c;导致所在表空间占用很高&#xff0c;里面历史数据可以清除&#xff0c;保留近2个月数据即可 首先通过delete删除了2个月以前的数据。 按网上的教程进行空间压缩&#xff0c;以下sql在表所在用户执行: -- 允许表重新…

非父子通信(扩展)-- event bus 事件总线

创建一个空实例Bus&#xff0c; export default 导出Bus 过程:由A组件对Bus组件进行监听&#xff0c;B组件触发Bus对应的事件&#xff0c;由于A组件进行监听&#xff0c;触发事件之后就会进行A组件的回调&#xff0c;那么就可以将消息发送给A了 在src文件夹下新建utils文件夹&a…

vue深入理解(1)

本文章内容主要来源于《vue.js设计与实现》 视图层框架设计 命令式和声明式 范式上&#xff0c;视图层框架通常分为命令式和范式 JQuery就是典型的命令式框架&#xff0c;命令式框架的一大特点就是关注过程 例子&#xff1a; $(#app) // 获取app.text(hello world) // 设置…

CSDN博客如何修改删除上传的资源

CSDN博客是我用过的最好用的博客&#xff0c;它对用户发布文章的限制比较少&#xff0c;而且还支持用户利用知识创新来获取收益&#xff0c;不象51CTO这种垃圾博客&#xff0c;动不动就给扣分限号。但我发现CSDN也有设计缺陷&#xff0c;虽然其上传资源的入口很好找&#xff0c…

【SpringBoot】Day11-10 yml文件配置

三种配置文件 前面我们一直使用springboot项目创建完毕后自带的application.properties进行属性的配置&#xff0c;那其实呢&#xff0c;在springboot项目当中是支持多种配置方式的&#xff0c;除了支持properties配置文件以外&#xff0c;还支持另外一种类型的配置文件&#x…

React路由使用入门react-router-dom

1.安装react-router-dom npm i react-router-dom 2.配置 &#xff08;1&#xff09;创建router实例对象并且配置路由对应关系 &#xff08;2&#xff09;路由绑定 import {createBrowserRouter,RouterProvider} from react-router-dom//&#xff08;1&#xff09;创建rou…