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

分类介绍

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

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.mzph.cn/pingmian/63210.shtml

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

相关文章

什么是Bug,bug怎么提交

1 bug的定义与起源 Bug在计算机科学中通常指的是程序或系统中的错误或缺陷&#xff0c;导致其无法按预期执行。这种错误可能源于代码中的逻辑错误、输入输出的意外处理、资源分配不当等问题。Bug的产生与多方面因素有关&#xff0c;包括程序员未能正确实现软件的特定规格或设定…

Agent AI: Surveying the Horizons of Multimodal Interaction---摘要、引言、代理 AI 集成

题目 智能体AI:多模态交互视野的考察 论文地址&#xff1a;https://arxiv.org/abs/2401.03568 图1&#xff1a;可以在不同领域和应用程序中感知和行动的Agent AI系统概述。Agent AI是正在成为通用人工智能&#xff08;AGI&#xff09;的一个有前途的途径。Agent AI培训已经证…

前端开发入门指南Day 17:TypeScript高级类型(泛型,类型守卫,Partial<T>和 Required<T>等)

泛型&#xff1a;代码的"变色龙" &#x1f98e; 为什么需要泛型&#xff1f; 想象一个快递员&#xff0c;每天要处理不同类型的包裹。如果为每种类型的包裹都写一套处理程序&#xff0c;那会很麻烦。泛型就像是一个"通用的包裹处理系统"&#xff0c;它能…

LRU Cache替换算法

目录 1.什么是LRU Cache&#xff1f; 2.LRU Cache 的底层结构 3.LRU Cache的实现 LRUCache类中的接口总览 构造函数 get操作 put操作 打印 4.LRU Cache的测试 5.LRU Cache相关OJ题 6.LRU Cache类代码附录 1.什么是LRU Cache&#xff1f; 首先我想解释一下什么是cach…

小米二面:JVM 触发类加载的条件有哪些?

类加载生命周期 类加载的生命周期包括&#xff1a;加载&#xff08;Loading&#xff09;、链接&#xff08;Linking&#xff09; 和 初始化&#xff08;Initialization&#xff09;。而其中&#xff0c;初始化阶段是决定类是否被真正加载的关键。 JVM 在什么时候启动类加载过…

数字孪生与大型模型强强联合,共塑工业制造崭新前景

随着新一代信息技术与实体经济的加速融合&#xff0c;工业领域的数字化、智能化转型趋势愈发显著&#xff0c;孕育出一系列制造业数字化转型的新模式与新业态。在此背景下&#xff0c;数字孪生技术作为关键支撑力量&#xff0c;正在全球范围内迅速崛起并得到广泛应用&#xff0…

【笔记2-5】ESP32:freertos消息队列

主要参考b站宸芯IOT老师的视频&#xff0c;记录自己的笔记&#xff0c;老师讲的主要是linux环境&#xff0c;但配置过程实在太多问题&#xff0c;就直接用windows环境了&#xff0c;老师也有讲一些windows的操作&#xff0c;只要代码会写&#xff0c;操作都还好&#xff0c;开发…

Qt Chart 模块化封装曲线图

一 版本说明 二 完成示例 此文章包含:曲线轴设置,曲线切换,单条曲线显示,坐标轴。。。 三 曲线图UI创建 在UI界面拖放一个QWidget,然后在 Widget里面放一个 graphicsView 四 代码介绍 1 头文件 #include <QString> #include <QTimer> #include <QMessa…

a7678 食品添加剂健康小助手系统微信小程序的的设计与实现 后台php+mysql+layui+thinkphp 源码 配置 文档 全套资料

食品添加剂健康小助手 1.摘要2.开发目的和意义3.系统功能设计4.系统界面截图5.源码获取 1.摘要 食品添加剂健康小助手系统是一个能够帮助消费者更好地了解食品添加剂相关信息的智能系统。在现代食品生产过程中&#xff0c;许多食品添加剂被广泛使用&#xff0c;以提高食品的质…

HTTP(超文本传输协议)

HTTP是万维网通信的基础构成&#xff0c;是一个简单的请求相应协议&#xff0c;基于TCP之上80号端口 通信原理 DNS解析 将域名甩个DNS服务器解析&#xff0c;将域名化为IP访问 建立TCP连接 如图&#xff0c;客户端先发送一个sys置位seq为x&#xff08;任意值&#xff09;的…

如何设置合理的爬取频率避免被网站封锁?

要合理设置爬取频率以避免被网站封锁&#xff0c;可以采取以下几种策略&#xff1a; 遵守robots.txt规范&#xff1a;确保爬虫程序遵守目标网站的robots.txt文件中定义的爬取规则&#xff0c;避免爬取被网站禁止的内容。 设置请求头信息&#xff1a;在爬取时&#xff0c;设置合…

LeetCode Hot100 51~60

图论51. 岛屿问题52. 腐烂的橘子53. 课程表54. 前缀树55. 全排列56. 子集57. 电话号码58. 组合总和59. 括号生成60. 单词搜索 图论 51. 岛屿问题 经典洪水问题算法 class Solution { public:int numIslands(vector<vector<char>>& grid) {int nr grid.size…

SpringBoot的validation参数校验

文章目录 前言一、引入validation 依赖二、validation中的注解说明 &#xff08;1&#xff09;Validated&#xff08;2&#xff09;Valid&#xff08;3&#xff09;NotNull&#xff08;4&#xff09;NotBlank&#xff08;5&#xff09;NotEmpty&#xff08;6&#xff09;Patte…

SSH克隆github项目

1、生成密钥 ssh-keygen -t rsa -C "你的邮箱xxx.com" 全程回车即可&#xff08;不用输入ras文件名及密码&#xff09;、为了方便下面的公钥查看 2、配置公钥 查看公钥内容 cat c:\Users\xxx\.ssh\id_rsa.pub(修改为自己的路径及名字) 将公钥内容复制并粘贴至…

CASAIM与中国航天携手合作,CASAIM IS全自动化光学测量系统交付中国航天山西工厂,助力航空航天零部件全自动化3D测量

近日&#xff0c;CASAIM与中国航天达成全自动化光学测量技术合作&#xff0c;并将CASAIM IS全自动化光学测量系统交付给中国航天科技集团山西工厂&#xff0c;这一合作标志着双方在智能制造和精密测量领域迈出了重要一步。 中国航天科技&#xff0c;是在中国战略高技术领域拥有…

基于Springboot+Vue的电子博物馆系统

基于SpringbootVue的电子博物馆系统 前言&#xff1a;随着信息技术的不断发展&#xff0c;传统博物馆的参观方式逐渐向数字化、在线化转型。电子博物馆作为这一转型的重要组成部分&#xff0c;能够通过信息化手段为用户提供更丰富、更便捷的博物馆参观体验。本文基于Spring Boo…

【软考速通笔记】系统架构设计师⑭——面向服务架构设计理论与实践

文章目录 一、前言二、基础知识2.1 介绍2.2 作用 三、参考架构四、主要协议五、设计原则六、设计模式6.1 服务注册模式6.2 企业服务总线模式6.3 微服务模式6.4 微服务架构模式方案 七、注意事项 一、前言 笔记目录大纲请查阅&#xff1a;【软考速通笔记】系统架构设计师——导读…

K8S的资源配置

资源配额 当多个用户或团队共享具有固定节点数目的集群时&#xff0c;人们会担心有人使用超过其基于公平原则所分配到的资源量。资源配额是帮助管理员解决这一问题的工具。资源配额&#xff0c;通过 ResourceQuota 对象来定义&#xff0c;对每个命名空间的资源消耗总量提供限制…

Python+OpenCV系列:入门环境搭建、图像读写、像素操作、色彩空间和通道、

入门环境搭建、图像读写、像素操作、色彩空间和通道 **Python与OpenCV环境搭建、图像处理与色彩空间介绍****引言****1. Python和OpenCV的环境搭建****1.1 安装Python和OpenCV****1.2 配置开发环境** **2. 图像的读取、显示与保存****2.1 图像的读取****2.2 图像的显示****2.3 …

在Docker中部署禅道,亲测可用

1、确保centos中已安装docker docker -v 2、启动docker systemctl start docker 3、可设置docker开机启动 systemctl enable docker.service 4、获取最新版禅道开源版镜像 docker pull idoop/zentao 5、运行镜像生成禅道容器【创建 /data/www /data/data 目录】 doc…