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

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

news 2026/2/8 20:35:27

文章目录

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

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/31 10:55:22

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2026/1/31 12:03:23

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2026/2/7 21:37:35

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2026/1/31 8:53:50