当前位置： 首页 > news >正文

微信小程序学习笔记（1）

news 2026/5/13 5:01:57

文章目录

  • 一、文件作用
    • `app.json`：
    • `project.config.json`:
    • `sitemap.json`
    • 页面中`.json`
  • 二、项目首页
  • 三、语法
    • **WXML**和**HTML**
    • WXSS 和CSS的区别
    • 小程序中.js文件的分类

一、文件作用

在这里插入图片描述

app.json：

当前小程序的全局配置，包括所有页面路径、窗口外观、界面表现、底部tab

在这里插入图片描述

pages：当前小程序的所有页面路径

window：全局定义小程序的背景色、文字色等可以设置如下：

在这里插入图片描述

更多用法：window用法

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

sitemapLocation：指定sitemap.json的路径

project.config.json:

项目配置文件，记录对小程序开发工具所做的个性化配置

setting：保存了编译相关的配置

appid：小程序的账号 ID

sitemap.json

微信现已开放小程序内搜索，效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许
微信索引。
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

页面中.json

和app.json一样，但是页面中的配置会覆盖app.json中相同的window配置

二、项目首页

app.json中pages的前后顺序，默认第一个是首页

三、语法

WXML和HTML

  • 标签名称不同
    HTML ( div, span, img, a )
    WXML ( view, text, image, navigator)

    (上面的是一一对应的类似用法比较)

  • 属性节点不同

    <a href="#">超链接</a>
<navigator url="/ pages/home/home"> </navigato>

  • 提供了类似于Vue中的模板语法
    数据绑定
    列表渲染

    条件渲染

WXSS 和CSS的区别

① 新增了rpx尺寸单位

  • cSS中需要手动进行像素单位换算，例如 rem
  • wXSS在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算

② 提供了全局的样式和局部样式

  • 项目根目录中的app.wxSs会作用于所有小程序页面
  • 局部页面的.wxSS样式仅对当前页面生效

③ WxSS仅支持部分CSS选择器

  • .class和#id
  • element
  • 并集选择器、后代选择器
  • ::after和 ::before等伪类选择器

小程序中.js文件的分类

小程序中的JS文件分为三大类，分别是:

① appg.js

  • 是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序

② 页面的.js 文件

  • 是页面的入口文件，通过调用Page()函数来创建并运行页面

③ 普通的.js 文件

  • 是普通的功能模块文件，用来封装公共的函数或属性供页面使用

相关文章：

微信小程序学习笔记（1）

文章目录 一、文件作用app.json&#xff1a;project.config.json:sitemap.json页面中.json 二、项目首页三、语法**WXML**和**HTML**WXSS 和CSS的区别小程序中.js文件的分类 一、文件作用 app.json&#xff1a; 当前小程序的全局配置&#xff0c;包括所有页面路径、窗口外观、…...

编程日记 2024/6/11 1:46:56

OpenGauss数据库-6.表空间管理

第1关&#xff1a;创建表空间 gsql -d postgres -U gaussdb -W passwd123123 CREATE TABLESPACE fastspace OWNER omm relative location tablespace/tablespace_1; 第2关&#xff1a;修改表空间 gsql -d postgres -U gaussdb -W passwd123123 ALTER TABLESPACE fastspace R…...

编程日记 2024/6/11 1:45:54

相约乌镇 续写网络空间命运与共的新篇章（二）

从乌镇峰会升级为世界互联网大会&#xff0c;既是展示互联网发展成果的技术盛会&#xff0c;也是尖端科技综合运用的宏大场景。从枕水江南散发出的“互联网之光”&#xff0c;到前沿技术的创新突破和场景应用&#xff0c;澎湃的是数字经济浪潮&#xff0c;激荡的是科技创新能量…...

编程日记 2024/6/11 1:43:52

【全网最简单的解决办法】vscode中点击运行出现仅当从 VS 开发人员命令提示符处运行 VS Code 时，cl.exe 生成和调试才可用

首先确保你是否下载好了gcc编译器&#xff01;&#xff01;&#xff01; 检测方法&#xff1a; winR 打开cmd命令窗 输入where gcc(如果出现路径则说明gcc配置好啦&#xff01;) where gcc 然后打开我们的vscode 把这个文件删除掉 再次点击运行代码&#xff0c;第一个出现…...

编程日记 2024/6/11 1:42:50

NFS共享存储服务

NFS共享存储服务 NFS&#xff1a;network file system ,在计算机网络中共享文件系统的协议。 计算机之间可以通过网络共享目录和文件&#xff0c;分为两个部分&#xff1a; 1、rpcbind&#xff1a;远程共享调用 2、nfs&#xff1a;共享服务&#xff0c;端口号&#xff1a;2…...

编程日记 2024/6/11 1:41:49

Docker面试整理-Docker 常用命令

Docker 提供了一套丰富的命令行工具，使得用户能够管理容器、镜像、网络和卷等资源。这里列出了一些常用的 Docker 命令： 镜像相关命令:docker pull [OPTIONS] NAME[:TAG|@DIGEST]: 从仓库拉取一个镜像或仓库。docker push NAME[:TAG]: 推送一个镜像或仓库到远程仓库。docker …...

编程日记 2024/6/11 1:34:42

Cinema 4D 2024 软件安装教程、附安装包下载

Cinema 4D 2024 Cinema 4D&#xff08;C4D&#xff09;是一款由Maxon开发的三维建模、动画和渲染软件&#xff0c;广泛用于电影制作、广告、游戏开发、视觉效果等领域。Cinema 4D允许用户创建复杂的三维模型&#xff0c;包括角色、场景、物体等。它提供了多种建模工具&#x…...

编程日记 2024/6/11 1:33:41

2024全国高考作文题解读（Chat GPT 4.0版本）

新课标I卷 阅读下面的材料&#xff0c;根据要求写作。&#xff08;60分&#xff09; 随着互联网的普及、人工智能的应用&#xff0c;越来越多的问题能很快得到答案。那么&#xff0c;我们的问题是否会越来越少&#xff1f; 以上材料引发了你怎样的联想和思考&#xff1f;请写…...

编程日记 2024/6/11 1:32:39

欧美北美南美国外媒体投稿和东南亚中东亚洲媒体海外新闻发稿软文推广营销策略有哪些？

在当今全球化的浪潮中&#xff0c;中国品牌正积极拓展海外市场&#xff0c;寻求更广阔的发展空间。面对国际竞争&#xff0c;有效的海外媒体发稿营销策略对于品牌国际化至关重要。以下是一些关键点和建议&#xff0c;以帮助品牌在海外市场取得成功。 深入了解目标市场&#xf…...

编程日记 2024/6/11 1:31:38

Rust-10-数据类型

Rust 标准库中包含一系列被称为 集合&#xff08;collections&#xff09;的非常有用的数据结构。大部分其他数据类型都代表一个特定的值&#xff0c;不过集合可以包含多个值。不同于内建的数组和元组类型&#xff0c;这些集合指向的数据是储存在堆上的&#xff0c;这意味着数据…...

编程日记 2024/6/11 1:30:37

C#面：PDB是什么东西? 在调试中它应该放在哪里

C# PDB&#xff08;Program Database&#xff09;是一种用于存储调试信息的文件格式。它包含了源代码文件、符号表和其他调试相关的信息&#xff0c;可以帮助开发人员在调试过程中定位和解决问题 在调试中&#xff0c;PDB文件应该与编译生成的可执行文件&#xff08;如DLL或EX…...

编程日记 2024/6/11 1:28:35

C#--使用CMake构建C++程序调用示例

1.C代码 // example.cpp#include <iostream>extern "C" {__declspec(dllexport) void PrintMessage() {std::cout << "Hello from C!" << std::endl;} }2.CMakeLists.txt文件&#xff0c;用于使用CMake构建C库&#xff1a; # CMakeLis…...

编程日记 2024/6/11 1:25:32

三十七篇：大数据架构革命：Lambda与Kappa的深度剖析

大数据架构革命：Lambda与Kappa的深度剖析 1. 引言 在这个数据驱动的时代，我们面临着前所未有的挑战和机遇。随着数据量的爆炸性增长，传统的数据处理方法已无法满足现代业务的需求。大数据处理不仅涉及数据量的增加，还包括数据类型的多样化、数据来源的广泛性以及对实时数据…...

编程日记 2024/6/11 1:23:31

Vue3【十五】标签的Ref属性

Vue3【十五】标签的Ref属性 标签的ref属性 用于注册模板引用 用在dom标签上&#xff0c;获取的是dom节点 用在组件上&#xff0c;获取的是组件实例对象 案例截图 目录结构 代码 app.vue <template><div class"app"><h1 ref"title2">你…...

编程日记 2024/6/11 1:22:29

Java实现数据结构——顺序表

目录 一、前言 二、实现 2.1 增 2.2 删 2.3 查 2.4 改 2.5 销毁顺序表 三、Arraylist 3.1 构造方法 3.2 常用操作 3.3 ArrayList遍历 四、 ArrayList具体使用 4.1 杨辉三角 4.2 简单洗牌算法 一、前言 笔者在以前的文章中实现过顺序表 本文在理论上不会有太详细…...

编程日记 2024/6/11 1:21:26

线程知识点总结

Java线程是Java并发编程中的核心概念之一&#xff0c;它允许程序同时执行多个任务。以下是关于Java线程的一些关键知识点总结&#xff1a; 1. 线程的创建与启动 继承Thread类&#xff1a;创建一个新的类继承Thread类&#xff0c;并重写其run()方法。通过创建该类的实例并调用st…...

编程日记 2024/6/11 1:18:24

计算机网络：数据链路层 - 扩展的以太网

计算机网络&#xff1a;数据链路层 - 扩展的以太网 集线器交换机自学习算法单点故障 集线器 这是以前常见的总线型以太网&#xff0c;他最初使用粗铜轴电缆作为传输媒体&#xff0c;后来演进到使用价格相对便宜的细铜轴电缆。 后来&#xff0c;以太网发展出来了一种使用大规模…...

编程日记 2024/6/11 1:16:22

视频修复工具，模糊视频变清晰！

老旧视频画面效果差&#xff0c;视频效果模糊。我们经常找不到一个好的工具来让视频更清晰&#xff0c;并把它变成高清画质。相信很多网友都会有这个需求&#xff0c;尤其是视频剪辑行业的网友&#xff0c;经常会遇到这个问题。今天给大家分享一个可以把模糊视频修复清晰的工具…...

编程日记 2024/6/11 1:15:20

协程库——面试问题

1 同步、异步 1.1 同步 代码顺序执行&#xff0c;完全由用户控制. 同步阻塞 等待可读、可写的时候阻塞&#xff0c;不让出cpu。读、写之后&#xff0c;下面的代码才能执行、 同步非阻塞 等待可读、可写时&#xff0c;不会阻塞cpu&#xff0c;返回失败&#xff0c;设置错误码为…...

编程日记 2024/6/11 1:14:19

数据结构与算法题目集（中文）6-2顺序表操作集

题目地址 https://pintia.cn/problem-sets/15/exam/problems/type/6?problemSetProblemId725&page0 注意审题&#xff0c;返回false的时候不要返回ERROR&#xff0c;否则答案错误&#xff0c;机器规则是死的。 位置一般指数组下标&#xff0c;位序一般指数组下标1。但是思…...

编程日记 2024/6/11 1:13:17

InputTip：提升表单体验的动态输入引导组件设计与实战

1. 项目概述&#xff1a;一个被低估的输入增强工具 在桌面应用开发中&#xff0c;我们常常会花费大量精力去构建复杂的业务逻辑和炫酷的界面&#xff0c;却容易忽略一个直接影响用户体验的细节&#xff1a; 输入引导 。回想一下&#xff0c;你是否遇到过这样的场景&#xff1…...

编程新知 2026/5/13 3:45:06

AGHub：统一管理AI编码助手配置与技能，打造高效开发工作流

1. 项目概述&#xff1a;为什么我们需要一个AI编码代理的“集线器”&#xff1f; 最近一年&#xff0c;我几乎把所有主流的AI编码助手都试了个遍&#xff1a;Cursor、Windsurf、Claude Code、Gemini CLI&#xff0c;还有各种基于OpenCode的本地模型。它们各有千秋&#xff0c;…...

编程新知 2026/5/13 3:15:45

别再只会用0填充了！Pandas DataFrame.fillna() 的6个高阶用法，数据分析师必看

别再只会用0填充了&#xff01;Pandas DataFrame.fillna() 的6个高阶用法&#xff0c;数据分析师必看 在数据分析的日常工作中&#xff0c;缺失值处理就像是一道无法回避的数学题。许多刚入行的分析师会条件反射般地输入.fillna(0)&#xff0c;这就像用创可贴处理所有伤口——有…...

编程新知 2026/5/13 3:05:38

Nintendo Switch游戏安装终极指南：3种方法解决所有格式兼容问题

Nintendo Switch游戏安装终极指南&#xff1a;3种方法解决所有格式兼容问题 【免费下载链接】Awoo-Installer A No-Bullshit NSP, NSZ, XCI, and XCZ Installer for Nintendo Switch 项目地址: https://gitcode.com/gh_mirrors/aw/Awoo-Installer 还在为Nintendo Switch…...

编程新知 2026/5/13 3:03:34

统一AI编程助手配置：使用agent-anatomy提升开发效率与一致性

1. 项目概述&#xff1a;一个配置文件夹&#xff0c;统一所有AI编程助手如果你和我一样&#xff0c;日常开发中会同时使用Claude Code、Cursor、GitHub Copilot等多个AI编程助手&#xff0c;那你一定也经历过同样的烦恼&#xff1a;每个助手都需要自己独立的配置文件。今天要介…...

编程新知 2026/5/13 2:32:12

Harbor：统一管理MCP服务器的配置中心与团队协作平台

1. 项目概述&#xff1a;一个统一管理MCP服务器的“港口” 如果你和我一样&#xff0c;每天都在Claude Code、Cursor、VS Code这几个编辑器之间来回切换&#xff0c;同时还要折腾一堆MCP服务器&#xff0c;那你肯定也经历过这种痛苦&#xff1a;在 ~/.claude.json 里加一个配…...

编程新知 2026/5/13 1:50:27

FinFET与FD-SOI工艺下的IC可靠性验证关键技术

1. 集成电路可靠性验证的挑战与演进在28nm工艺节点之前&#xff0c;芯片设计工程师面临的选择相对简单——只需沿着摩尔定律的轨迹向下一个工艺节点迁移。但随着FinFET和FD-SOI等新型晶体管结构的出现&#xff0c;以及台积电、三星等代工厂推出的多样化工艺节点选项&#xff0c…...

编程新知 2026/5/13 1:09:12

3步免费获取公式识别神器：img2latex-mathpix本地部署终极指南

3步免费获取公式识别神器&#xff1a;img2latex-mathpix本地部署终极指南 【免费下载链接】img2latex-mathpix Mathpix has changed their billing policy and no longer has free monthly API requests. This repo is now archived and will not receive any updates for the …...

编程新知 2026/5/13 0:16:13

如何实现微信聊天记录永久保存：WeChatMsg完整备份终极指南

如何实现微信聊天记录永久保存&#xff1a;WeChatMsg完整备份终极指南 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/W…...

编程新知 2026/5/12 23:57:28

中小企业技术团队的生存法则：用巧劲对抗资源不足

一、夹缝中求存的中小企业测试团队在软件行业的生态版图里&#xff0c;中小企业技术团队始终处于一种特殊的位置。它们没有行业巨头动辄数百人的测试大军&#xff0c;没有动辄千万级的测试预算&#xff0c;也无法像大厂那样依靠成熟的流程体系和工具矩阵实现自动化、规模化的测…...

编程新知 2026/5/12 21:56:22