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

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

news 2026/3/26 12:08:40

文章目录

  • 一、文件作用
    • `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

基于51单片机与74LS30的智能抢答器系统设计与实现

1. 智能抢答器系统概述 在各类知识竞赛、课堂互动和电视节目中&#xff0c;抢答器都是不可或缺的设备。传统机械式抢答器存在响应慢、易误触等问题&#xff0c;而基于51单片机的智能抢答器系统则完美解决了这些痛点。这个系统我做过不下十次&#xff0c;实测响应时间可以控制在…...

编程新知 2026/3/26 11:45:58

FPGA音频播放器避坑指南：WM8731 I2C配置与左对齐时序的那些坑

FPGA音频播放器避坑指南&#xff1a;WM8731 I2C配置与左对齐时序的那些坑 第一次听到自己设计的FPGA音频播放器发出刺耳的噪音时&#xff0c;我盯着示波器上扭曲的波形陷入了沉思。作为嵌入式开发者&#xff0c;我们总在数字与模拟的交界处行走&#xff0c;而WM8731这颗看似简单…...

编程新知 2026/3/26 10:53:27

解决CLI工具接入DeepSeek API流式传输失败的实战指南

最近在对接DeepSeek的API时&#xff0c;遇到了一个挺典型的问题&#xff1a;用CLI工具调用API进行流式传输时&#xff0c;经常中途失败&#xff0c;返回的错误信息又比较模糊&#xff0c;调试起来很头疼。特别是在处理长文本生成或者需要连续对话的场景下&#xff0c;这个问题直…...

编程新知 2026/3/26 10:31:18

别再死记硬背了！用一次完整的网页访问，帮你彻底搞懂HCIA/HCIP里的TCP/IP和OSI模型

从输入网址到页面加载&#xff1a;用真实场景拆解TCP/IP与OSI模型 想象一下这个场景&#xff1a;你在浏览器地址栏输入"www.baidu.com"&#xff0c;按下回车键&#xff0c;不到一秒就看到了熟悉的搜索页面。这看似简单的操作背后&#xff0c;隐藏着一场精密的网络协议…...

编程新知 2026/3/26 10:23:15

YOLO训练结果results.csv全字段解读：从epoch到lr/pg2，每个数字背后的调参玄机

YOLO训练结果results.csv全字段解读&#xff1a;从epoch到lr/pg2&#xff0c;每个数字背后的调参玄机 当你盯着YOLO训练结束后生成的results.csv文件&#xff0c;是否曾感到困惑——这些密密麻麻的数字究竟在诉说什么故事&#xff1f;作为模型训练的"黑匣子记录仪"&a…...

编程新知 2026/3/26 10:03:10

信息发布平台毕设实战：从零构建高可用内容分发系统

背景痛点&#xff1a;为什么你的毕设平台总感觉“差点意思”&#xff1f; 很多同学在做“信息发布平台”这类毕业设计时&#xff0c;往往只关注功能实现&#xff0c;忽略了背后的架构和性能问题。结果就是&#xff0c;一个看似功能齐全的平台&#xff0c;一旦面临稍微复杂的场景…...

编程新知 2026/3/26 9:59:09

为什么头部金融科技公司已在2026 Q1全面切换Python AOT？——基于百万行代码仓库的构建耗时、镜像体积、安全扫描通过率真实数据复盘

第一章&#xff1a;Python 原生 AOT 编译方案 2026 对比评测报告Python 社区在 2025 年底迎来关键演进&#xff1a;CPython 官方正式将原生 AOT&#xff08;Ahead-of-Time&#xff09;编译能力纳入 3.14 开发主线&#xff0c;并以“Project Graviton”为代号推动落地。2026 年初…...

编程新知 2026/3/26 8:10:29

基于YOLOv12与Flask-SocketIO的番茄成熟度Web端实时检测系统设计与性能对比

1. 为什么需要番茄成熟度实时检测系统&#xff1f; 在农业生产中&#xff0c;番茄成熟度的准确判断直接影响采摘效率和果实品质。传统的人工检测方式存在几个明显痛点&#xff1a;首先&#xff0c;人工判断主观性强&#xff0c;不同工人对"完全成熟"的标准可能不一致…...

编程新知 2026/3/26 7:38:23

使用Docker部署Qwen3-TTS语音生成服务

使用Docker部署Qwen3-TTS语音生成服务 1. 引言 语音合成技术正在改变我们与机器交互的方式&#xff0c;而Qwen3-TTS作为开源领域的佼佼者&#xff0c;提供了高质量的语音生成能力。传统的部署方式往往需要复杂的环境配置和依赖安装&#xff0c;这让很多开发者望而却步。 Doc…...

编程新知 2026/3/26 5:59:29

Easegress全方位监控指南：构建云原生流量可观测性系统的终极方案

Easegress全方位监控指南&#xff1a;构建云原生流量可观测性系统的终极方案 【免费下载链接】easegress A Cloud Native traffic orchestration system 项目地址: https://gitcode.com/gh_mirrors/eas/easegress Easegress是一个强大的云原生流量编排系统&#xff0c;专…...

编程新知 2026/3/26 5:49:15