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

news2024/12/24 8:29:19

文章目录

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1809186.html

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

相关文章

[Cloud Networking] Layer3 (Continue)

文章目录 1. DHCP Protocol1.1 DHCP 三种分配方式1.2 DHCP Relay (中继) 2. 路由协议 (Routing Protocol)2.1 RIP (Routing Information Protocol)2.2 OSPF Protocol2.3 BGP Protocol2.4 IS-IS Protocol2.5 ICMP&#xff08;Internet Control Message Protocol&#xff09; 1. …

架构设计-全局异常处理器404、405的问题

java web 项目中经常会遇到异常处理的问题&#xff0c;普遍的做法是使用全局异常处理&#xff0c;这样做有以下几种原因&#xff1a; 集中化处理&#xff1a;全局异常处理允许你在一个集中的地方处理整个应用程序中的异常。这有助于减少代码重复&#xff0c;因为你不必在每个可…

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

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

MySQL从入门到高级 --- 15.优化 16.pymysql

文章目录 第十五章 && 第十六章&#xff1a;15.优化15.1 查询SQL执行效率15.2 定位低效率执行SQL15.3 explain分析执行计划 - 基本使用15.4 explain分析执行计划 - id15.5 explain分析执行计划 - select_type15.6 explain分析执行计划 - type15.7 explain分析执行计划 …

计算机网络期末考试知识点(关键词:江中)

目录 大家端午节快乐呀&#xff01;又到了一年两度的期末考试月了&#xff0c;这里给大家整理了一些复习知识点&#xff0c;大家可以边吃粽子边复习&#xff0c;事半功倍哈哈哈。祝各位期末过&#xff01;过&#xff01;过&#xff01;。 1 第一章 计算机网络体系结构 计算机…

【python】在【机器学习】与【数据挖掘】中的应用:从基础到【AI大模型】

目录 &#x1f497;一、Python在数据挖掘中的应用&#x1f495; &#x1f496;1.1 数据预处理&#x1f49e; &#x1f496;1.2 特征工程&#x1f495; &#x1f497;二、Python在机器学习中的应用&#x1f495; &#x1f496;2.1 监督学习&#x1f49e; &#x1f496;2.2…

ue5创建地图瓦片

先在虚幻商城下载免费的paperzd插件&#xff0c;并启用。 导入资源后&#xff0c;先通过应用paper2d纹理资源&#xff0c;将去掉导入ue时产生的边缘模糊&#xff0c;再点击下面的创建瓦片集&#xff0c; 打开瓦片集&#xff0c;发现选中不对&#xff0c; 改变瓦片大小为16*…

如何学习自动化测试?(附教程)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 自动化测试介绍 自动化测试(Automated Testing)&#xff0c;是指把以人为驱动的测试行为转化为…

汇聚荣科技有限公司实力怎么样?

汇聚荣科技有限公司&#xff0c;一家专注于高新技术研发和应用的企业&#xff0c;在业界享有一定的声誉。那么&#xff0c;这家公司的实力究竟如何?我们将从公司概况、技术研发、市场表现、企业文化和未来展望五个方面进行详细探讨。 一、公司概况 汇聚荣科技有限公司经过多年…

【Python核心数据结构探秘】:元组与字典的完美协奏曲

文章目录 &#x1f680;一、元组⭐1. 元组查询的相关方法❤️2. 坑点&#x1f3ac;3. 修改元组 &#x1f308;二、集合⭐1. 集合踩坑❤️2. 集合特点&#x1f4a5;无序性&#x1f4a5;唯一性 ☔3. 集合&#xff08;交&#xff0c;并&#xff0c;补&#xff09;&#x1f3ac;4. …

月薪6万,想离职...

大家好&#xff0c;我是无界生长&#xff0c;国内最大AI付费社群“AI破局俱乐部”初创合伙人。这是我的第 39 篇原创文章——《月薪6万&#xff0c;想离职...》 是的&#xff0c;你没有看错&#xff0c;我月薪6万&#xff0c;却想离职&#xff0c;很不可思议吧&#xff1f;周围…

如何为色盲适配图形用户界面

首发日期 2024-05-25, 以下为原文内容: 答案很简单: 把彩色去掉, 测试. 色盲, 正式名称 色觉异常. 众所周知, 色盲分不清颜色. 如果用户界面设计的不合理, 比如不同项目只使用颜色区分, 而没有形状区分, 那么色盲使用起来就会非常难受, 甚至无法使用. 色盲中最严重的情况称为…

车载电子电气架构 - 智能座舱技术及功能应用

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

【MySQL】(基础篇六) —— 过滤数据

过滤数据 本文将讲授如何使用SELECT语句的WHERE子句指定搜索条件。 WHERE子句 数据库表一般包含大量的数据&#xff0c;很少需要检索表中所有行。通常只会根据特定操作或需要提取表数据的子集。只检索所需数据需要指定搜索条件&#xff08;search criteria&#xff09;&…

FedAvg论文

论文&#xff1a;Communication-Efficient Learning of Deep Networks from Decentralized Data 原code Reproducing 通过阅读帖子进行的了解。 联邦平均算法就是最典型的平均算法之一。将每个客户端上的本地随机梯度下降和执行模型的平均服务器结合在一起。 联邦优化问题 数…

08 Dataset and DataLoader (加载数据集)

本节内容是学习 刘二大人的《PyTorch深度学习实践》的 08 Dataset and DataLoader (加载数据集&#xff09;。 上节内容&#xff1a;07 Multiple Dimension Input (处理多维特征的输入)-CSDN博客 这节内容&#xff1a; 目录 一、Epoch,Batch-Size,Iterations 二、DataLoad…

【quarks系列】基于Dockerfile构建native镜像

目录 Dockerfile构建代码测试 Dockerfile FROM quay.io/quarkus/ubi-quarkus-native-image:22.3-java11 AS buildWORKDIR /workspace COPY . .RUN ./mvnw -DskipTeststrue clean package -Dnative -U# Stage 2: Create the minimal runtime image FROM registry.access.redhat…

linux的持续性学习

安装php 第一步&#xff1a;配置yum源 第二步&#xff1a;下载php。 yum install php php-gd php-fpm php-mysql -y 第三步&#xff1a;启动php。 systemctl start php-fpm 第四步&#xff1a;检查php是否启动 lsof -i :9000 计划任务 作用&am…

ollama webui 11434 connection refused

报错&#xff1a;host.docker.internal:11434 ssl:default [Connection refused] 将/etc/systemd/system/ollama.service中加上如下红框两行 然后 systemctl daemon-reload systemctl restart ollama然后删掉之前的container。 最后 sudo docker run -d -p 4000:8080 --add-…

初识volatile

volatile&#xff1a;可见性、不能保证原子性(数据不安全)、禁止指令重排 可见性&#xff1a;多线程修改共享内存的变量的时候&#xff0c;修改后会通知其他线程修改后的值&#xff0c;此时其他线程可以读取到修改后变量的值。 指令重排&#xff1a;源代码的代码顺序与编译后字…