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

微信小程序学习笔记(1)

文章目录

  • 一、文件作用
    • `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.jsonpages的前后顺序,默认第一个是首页

三、语法

WXMLHTML

  • 标签名称不同
    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;包括所有页面路径、窗口外观、…...

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…...

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

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

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

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

NFS共享存储服务

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

Docker面试整理-Docker 常用命令

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

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

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

2024全国高考作文题解读(Chat GPT 4.0版本)

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

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

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

Rust-10-数据类型

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

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

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

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…...

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

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

Vue3【十五】标签的Ref属性

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

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

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

线程知识点总结

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

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

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

视频修复工具,模糊视频变清晰!

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

协程库——面试问题

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

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

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

8086 汇编笔记(十二):int 指令 端口 直接定址表

一、int 指令 int 指令的格式为:int n&#xff0c;n 为中断类型码&#xff0c;它的功能是引发中断过程 CPU 执行 intn 指令&#xff0c;相当于引发一个n号中断的中断过程&#xff0c;执行过程如下&#xff1a; (1) 取中断类型码 n; (2) 标志寄存器入栈&#xff0c;IF0&…...

揭开FFT时域加窗的奥秘

FFT – Spectral Leakage 假设用于ADC输出数据分析的采样点数为N&#xff0c;而采样率为Fs&#xff0c;那我们就知道&#xff0c;这种情况下的FFT频谱分辨率为δf&#xff0c;那么δfFs/N。如果此时我们给ADC输入一个待测量的单频Fin&#xff0c;如果此时Fin除以δf不是整数&a…...

【AI基础】第二步:安装AI运行环境

开局一张图&#xff1a; ​ 接下来按照从下往上的顺序来安装部署。 规则1 注意每个层级的安装版本&#xff0c;上层的版本由下层版本决定 比如CUDA的版本&#xff0c;需要看显卡安装了什么版本的驱动&#xff0c;然后CUDA的版本不能高于这个驱动的版本。 这个比较好理解&…...

【MySQL】聊聊唯一索引是如何加锁的

首先我们要明确&#xff0c;加锁的对象是索引&#xff0c;加锁的基本单位是next-key lock&#xff0c;由记录锁和间隙锁组成。next-key是前开后闭区间&#xff0c;间隙锁是前开后开区间。根据不同的查询条件next-key 可能会退化成记录锁或间隙锁。 在能使用记录锁或者间隙锁就…...

k8s-CCE使用node节点使用VIP--hostNetworkhostPort

CCE使用node节点使用VIP 背景:想在节点上使用VIP,将nodeport服务做到高可用。启动VIP后发现访问失败 部署 ! Configuration File for keepalived global_defs { router_id master-node }vrrp_instance VI_1 {state BACKUPinterface eth0mcast_src_ip 10.1.0.60virtual_rou…...

18、关于优化中央企业资产评估管理有关事项的通知

一、加强重大资产评估项目管理 (一)中央企业应当对资产评估项目实施分类管理,综合考虑评估目的、评估标的资产规模、评估标的特点等因素,合理确定本集团重大资产评估项目划分标准,原则上,企业对外并购股权项目应纳入重大资产评估项目。中央企业应当研究制定重大资产评估…...

AI大模型日报#0610:港大等1bit大模型“解决AI能源需求”、谷歌开源TimesFM时序预测模型

导读&#xff1a;AI大模型日报&#xff0c;爬虫LLM自动生成&#xff0c;一文览尽每日AI大模型要点资讯&#xff01;目前采用“文心一言”&#xff08;ERNIE 4.0&#xff09;、“零一万物”&#xff08;Yi-Large&#xff09;生成了今日要点以及每条资讯的摘要。欢迎阅读&#xf…...

速盾:图片cdn加速 免费

随着互联网的快速发展&#xff0c;图片在网页设计和内容传播中起着重要的作用。然而&#xff0c;随着网站访问量的增加和图片文件大小的增加&#xff0c;图片加载速度可能会成为一个问题。为了解决这个问题&#xff0c;许多网站使用图片CDN加速服务。 CDN&#xff08;Content …...

贪心算法例子

贪心算法概述 贪心算法是一种在每一步选择中都做出局部最优选择的算法,以期望通过一系列局部最优选择达到全局最优。贪心算法在许多优化问题中表现良好,特别是在某些特定类型的问题中能够保证找到最优解。 活动选择问题(Activity Selection Problem)背包问题(贪心解法)霍…...

vivado HW_ILA_DATA、HW_PROBE

HW_ILA_DATA 描述 硬件ILA数据对象是ILA调试核心上捕获的数据的存储库 编程到当前硬件设备上。upload_hw_ila_data命令 在从ila调试移动捕获的数据的过程中创建hw_ila_data对象 核心&#xff0c;hw_ila&#xff0c;在物理FPGA上&#xff0c;hw_device。 read_hw_ila_data命令还…...

教育校园网站建设方案/建站系统软件有哪些

println("JS语言中的对象--Global对象, 顶层函数&#xff08;全局函数&#xff09;");//eval(str): 把字符串当成js语句来进行评估且执行eval("var a 10;var b 23;document.write( ab );");//33println("<br>"eval("38"));//i…...

网站制作书籍推荐/开网店哪个平台靠谱

1.ios离线打包配置appid 和 cer证书 和 描述文件2.iOS离线打包-支付插件配置主要注意打包&#xff1a;在info.plist root 节点添加 UniversalLinks 项&#xff0c;值和微信开放平台配置的一致&#xff0c;(微信开放平台配置的域名地址)3.本次核心处理微信支付链接的配置(微信…...

网站建设流程中哪些部分比较重要/推广接单平台哪个好

RabbitMQ在Erlang node&#xff08;节点&#xff09;上 Erlang天生具有集群特性&#xff0c;非常好搭建集群&#xff0c;每一个节点&#xff08;node&#xff09;上具有一个叫erlang.Cookie的东西&#xff0c;也是一个标识符&#xff0c;可以互认。 1&#xff09;、n台Linux的防…...

web前端期末考试网页制作/快速提升排名seo

可编辑版Word完美格式HUNAN CITY UNIVERSITY数据库系统课程设计设计题目&#xff1a;宿舍管理信息系统姓 名&#xff1a;学 号&#xff1a;专 业&#xff1a;信息与计算科学指导教师&#xff1a;20年 12月1日目 录TOC \o "1-3" \h \z HYPERLINK \l "_Toc2306871…...

工商管理系统官网/win10优化大师免费版

linux 内存设置问题(2011-08-15 04:26:56)标签&#xff1a;杂谈linux 内存设置问题RedHat 64位物理内存32G/etc/sysctl.conf里搭配如下kernel.shmall4194304kernel.shmmax17179869184kernel.shmmni4096我想问的是&#xff0c;shmall*shmmni究竟代表什么&#xff1f;系统可用最大…...

西安东郊网站建设公司/谷歌浏览器官网下载手机版

作者&#xff1a;Pranjal Satija&#xff0c;原文链接&#xff0c;原文日期&#xff1a;2016-08-16译者&#xff1a;Cwift&#xff1b;校对&#xff1a;Cee&#xff1b;定稿&#xff1a;CMB欢迎&#xff01;这篇文章将教你一项 iOS 中的关键技术&#xff1a;图层&#xff08;la…...