微信小程序学习笔记(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 文件

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

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

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

相关文章

文件的基础必备知识(初学者入门)

1. 为什么使用文件 2. 什么是文件 3. 二进制文件和文本文件 4. 文件的打开和关闭 1.为什么使用文件 我们写的程序数据是存储在电脑内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失&#xff0c;等程序再次运行时&#xff0c;上次的数据已经消失。面…

每日复盘-20240607

今日关注&#xff1a; 这几天市场环境不好&#xff0c;一直空仓。 六日涨幅最大: ------1--------605258--------- 协和电子 五日涨幅最大: ------1--------605258--------- 协和电子 四日涨幅最大: ------1--------605258--------- 协和电子 三日涨幅最大: ------1--------0…

入侵报警系统的智慧核心——ARMxy工控机深度应用

智能安防领域高清视频监控、人脸识别门禁系统以及入侵报警系统的智能化升级&#xff0c;正以前所未有的速度推动着行业的变革。在这场变革中&#xff0c;ARMxy工业计算机以其卓越的性能、高度的灵活性及强大的集成能力&#xff0c;成为了众多安防解决方案中的核心组件。 高清视…

BC11 学生基本信息输入输出

BC11 学生基本信息输入输出 废话不多说上题目&#xff1a; 这道题表面上很简单&#xff0c;但是里面有很重要的点先给大家上正确的代码&#xff1a; #include<stdio.h> int main() {int stu 0;float c 0;float English 0;float math 0;scanf("%d;%f,%f,%f"…

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

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

Jmeter分布式、测试报告、并发数计算、插件添加方式、常用图表

Jmeter分布式 应用场景 当单个测试机无法模拟用户要求的业务场景时&#xff0c;可以使用多台测试机进行模拟&#xff0c;就是Jmeter的分布 式测试。 Jmeter分布式执行原理 Jmeter分布测试时&#xff0c;选择其中一台作为控制机&#xff08;Controller&#xff09;&#xff0c…

Spring5

文章目录 1. Spring 是什么&#xff1f;2. IoC3. Spring Demo4. IoC 创建对象的方式 / DI 方式注入的默认参数在哪里设定? 5. Spring 配置tx:annotation-driven 用于启用基于注解的事务管理 6. Bean的作用域7. 在Spring中有三种自动装配的方式1. 在xml中显式的配置2. 在java中…

RAG:如何从0到1搭建一个RAG应用

通过本文你可以了解到&#xff1a; 什么是RAG&#xff1f;如何搭建一个RAG应用&#xff1f;目前开源的RAG应用有哪些&#xff1f; 大模型学习参考&#xff1a; 1.大模型学习资料整理&#xff1a;大模型学习资料整理&#xff1a;如何从0到1学习大模型&#xff0c;搭建个人或企业…

定个小目标之刷LeetCode热题(15)

这道题直接就采用两数相加的规则&#xff0c;维护一个进阶值&#xff08;n&#xff09;即可&#xff0c;代码如下 class Solution {public ListNode addTwoNumbers(ListNode l1, ListNode l2) {// 新建一个值为0的头结点ListNode newHead new ListNode(0);// 创建几个指针用于…

【C++初阶学习】第十三弹——优先级队列及容器适配器

C语言栈&#xff1a;数据结构——栈(C语言版)-CSDN博客 C语言队列&#xff1a;数据结构——队列&#xff08;C语言版&#xff09;-CSDN博客 C栈与队列&#xff1a;【C初阶学习】第十二弹——stack和queue的介绍和使用-CSDN博客 前言&#xff1a; 在前面&#xff0c;我们已经…

Java24:会话管理 过滤器 监听器

一 会话管理 1.cookie 是一种客户端会话技术&#xff0c;cookie由服务端产生&#xff0c;它是服务器存放在浏览器的一小份数据&#xff0c;浏览器 以后每次访问服务器的时候都会将这小份的数据带到服务器去。 //创建cookie对象 Cookie cookie1new Cookie("…

vuInhub靶场实战系列--Kioptrix Level #3

免责声明 本文档仅供学习和研究使用,请勿使用文中的技术源码用于非法用途,任何人造成的任何负面影响,与本人无关。 目录 免责声明前言一、环境配置1.1 靶场信息1.2 靶场配置 二、信息收集2.1 主机发现2.1.1 netdiscover2.1.2 arp-scan主机扫描 2.2 端口扫描2.3 指纹识别2.4 目…

基于Ascend C的FlashAttention算子性能优化最佳实践

LLM的Attention部分处理给计算系统带来巨大的计算和访存压力。业界先后出现FlashAttention、FlashAttention2等算法&#xff0c;通过计算等价和切分有效降低HBM数据访问量。 昇腾异构计算架构CANN针对昇腾AI处理器的片上内存和缓存大小&#xff0c;以及数据搬运通路&#xff0…

为Nanopi m1交叉编译opencv

为Nanopi m1交叉编译opencv 一、下载交叉编译器 根据之前的博客进行 二、下载opencv和必要库 sudo apt-get install cmake git libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-devgit clone https://github.com/opencv/opencv.git cd opencv三、进行编…

鸿蒙开发必备:《DevEco Studio 系列一:实用功能解析与常用快捷键大全》

系列文章目录 文章目录 系列文章目录前言一、下载与安装小黑板 二、IDE被忽略的实用功能-帮助&#xff08;Help&#xff09;1.Quick Start2. API Reference3.FAQ 三、常用快捷键一、编辑二、查找或替换三、编译与运行四、调试五、其他 前言 DevEco Studio&#xff09;是基于In…

RK3568-修改fiq-debugger调试串口

瑞芯微SDK默认将uart2_m0作为调试串口,以下方法将调试串口修改为uart5_m1。修改bootloader 修改/OK3568-linux-source/rkbin/tools/ddrbin_param.txt文件,5表示串口5。1表示复用m1。执行./ddrbin_tool ddrbin_param.txt ../bin/rk35/rk3568_ddr_1560MHz_v1.11.bin命令修改ub…

el-table 实现表头置顶【干货满满】附源码

a)一般情况下&#xff0c;想要在 ElTable 上实现表头固定&#xff0c;滑动滚动条时希望表头常显&#xff0c;不被滚动条顶上去。这时候就需要给表格添加高度&#xff0c;但是这个高度需要提前确定好&#xff0c;不是很方便&#xff0c;表格上边一段距离不是固定的&#xff0c;常…

字节面试:CPU100% 如何处理?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的线上问题的场景题&#xff1a; 1.CPU100%&#xff0c;你是怎么处理的&…

操作系统复习-存储管理之虚拟内存

虚拟内存概述 有些进程实际需要的内存很大&#xff0c;超过物理内存的容量。多道程序设计&#xff0c;使得每个进程可用物理内存更加稀缺。不可能无限增加物理内存&#xff0c;物理内存总有不够的时候。虚拟内存是操作系统内存管理的关键技术。使得多道程序运行和大程序运行称…

算法金 | A - Z,115 个数据科学 机器学习 江湖黑话(全面)

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 机器学习本质上和数据科学一样都是依赖概率统计&#xff0c;今天整整那些听起来让人头大的机器学习江湖黑话 A - C A/B Testing (A/B …