【微信小程序】WXML WXSS JS

news/2024/10/31 1:22:01/

目录

🍓小程序代码的构成 - WXML 模板

1. 什么是 WXML

2. WXML 和 HTML 的区别

🍇小程序代码的构成 - WXSS 样式

1. 什么是 WXSS

2. WXSS 和 CSS 的区别

🍒小程序代码的构成 - JS 逻辑交互

1. 小程序中的 .js 文件

2. 小程序中 .js 文件的分类


🍓小程序代码的构成 - WXML 模板

1. 什么是 WXML

WXML(WeiXin Markup Language)是小程序框架设计的一套 标签语言 用来构建小程序页面的结构 ,其作用类似于网页开发中的 HTML。

2. WXML 和 HTML 的区别

标签名称不同
HTML (div, span, img, a)
WXML(view, text, image, navigator)
属性节点不同
  <a href ="#">超链接</a>
<navigator url ="/pages/home/home"></navigator>
提供了类似于 Vue 中的模板语法
数据绑定
列表渲染
条件渲染
<view>aaa</view>
<view>aaa</view>
<div>aaa</div>
<div>aaa</div>

 

 div标签在小程序中不能换行了

🍇小程序代码的构成 - WXSS 样式

1. 什么是 WXSS

WXSS (WeiXin Style Sheets)是一套 样式语言 ,用于描述 WXML 的组件样式,类似于网页开发中的 CSS。

2. WXSS 和 CSS 的区别

新增了 rpx 尺寸单位
  CSS 中需要手动进行像素单位换算,例如 rem
  WXSS 在底层支持新的尺寸单位 rpx,在不同大小的屏幕上小程序会自动进行换算
提供了全局的样式和局部样式
  项目根目录中的 app.wxss 会作用于所有小程序页面
  局部页面的 .wxss 样式仅对当前页面生效
WXSS 仅支持部分 CSS 选择器
  .class 和 #id
  element
并集选择器、后代选择器
  ::after 和 ::before 等伪类选择器
当然你可以把HTML和CSS放入小程序中:
效果:

HTML(放入WXML中): 
<!--pages/tsj/tsj.wxml--><button class="c-button c-button--gooey"> Hover me<div class="c-button__blobs"><div></div><div></div><div></div></div>
</button>
<svg style="display: block; height: 0; width: 0;" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><filter id="goo"><feGaussianBlur result="blur" stdDeviation="10" in="SourceGraphic"></feGaussianBlur><feColorMatrix result="goo" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" mode="matrix" in="blur"></feColorMatrix><feBlend in2="goo" in="SourceGraphic"></feBlend></filter></defs>
</svg>
CSS(放入WXSS中):
/* pages/tsj/tsj.wxss */
/* From www.lingdaima.com */
.c-button {color: #000;font-weight: 700;font-size: 16px;text-decoration: none;padding: 0.9em 1.6em;cursor: pointer;display: inline-block;vertical-align: middle;position: relative;z-index: 1;}.c-button--gooey {color: #06c8d9;text-transform: uppercase;letter-spacing: 2px;border: 4px solid #06c8d9;border-radius: 0;position: relative;transition: all 700ms ease;}.c-button--gooey .c-button__blobs {height: 100%;filter: url(#goo);overflow: hidden;position: absolute;top: 0;left: 0;bottom: -3px;right: -1px;z-index: -1;}.c-button--gooey .c-button__blobs div {background-color: #06c8d9;width: 34%;height: 100%;border-radius: 100%;position: absolute;transform: scale(1.4) translateY(125%) translateZ(0);transition: all 700ms ease;}.c-button--gooey .c-button__blobs div:nth-child(1) {left: -5%;}.c-button--gooey .c-button__blobs div:nth-child(2) {left: 30%;transition-delay: 60ms;}.c-button--gooey .c-button__blobs div:nth-child(3) {left: 66%;transition-delay: 25ms;}.c-button--gooey:hover {color: #fff;}.c-button--gooey:hover .c-button__blobs div {transform: scale(1.4) translateY(0) translateZ(0);}

🍒小程序代码的构成 - JS 逻辑交互

1. 小程序中的 .js 文件

一个项目仅仅提供界面展示是不够的,在小程序中,我们通过 .js 文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。

2. 小程序中 .js 文件的分类

小程序中的 JS 文件分为三大类,分别是:
app.js
整个小程序项目的入口文件 ,通过调用 App() 函数 来启动整个小程序
页面的 .js 文件
  页面的入口文件 ,通过调用 Page() 函数 来创建并运行页面
普通的 .js 文件
普通的功能模块文件 ,用来封装 公共的函数或属性 供页面使用

http://www.ppmy.cn/news/305205.html

相关文章

【小程序】中WXS的语法详解

文章目录 WXS基本使用&#x1f370;WXS的介绍&#x1f370;WXS的写法&#x1f370;WXS的练习(一)&#x1f370;WXS的练习(二) WXS基本使用 &#x1f370;WXS的介绍 WXS&#xff08;WeiXin Script&#xff09;是小程序的一套脚本语言&#xff0c;结合 WXML&#xff0c;可以构建…

微信小程序 | 小程序WXSS-WXML-WXS

&#x1f5a5;️ 微信小程序 专栏&#xff1a;小程序WXSS-WXML-WXS &#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;一个不甘平庸的平凡人&#x1f36c; ✨ 个人主页&#xff1a;CoderHing的个人主页 &#x1f340; 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ &#x1…

20230608----重返学习-react项目的细节

day-088-eighty-eight-20230608-react项目的细节 react项目的细节 进入登录页的情况分析 什么情况下&#xff0c;会进入登录页&#xff1f; 手动输入 /login 地址http://127.0.0.1:3000/#/login 登录成功&#xff1a;跳转到首页push() 我原本想进入的是 个人中心/我的收藏/…

Pascal Voc 2007 2012

1、简介 PASCAL 全称&#xff1a;Pattern Analysis, Statical Modeling and Computational Learning PASCAL VOC&#xff08;The PASCAL Visual Object Classes &#xff09;是一个经典的计算机视觉数据集&#xff0c;由牛津大学、马里兰大学和微软剑桥研究院的研究人员创建的…

[开发|java] com.typesafe.config配置示例说明

com.typesafe.config库是用于处理配置文件的Java库&#xff0c;它提供了一种方便的方式来读取和解析配置文件。要配置时间配置&#xff0c;你可以使用它的Config对象和相关的方法。 官方文档地址 下面是一个示例&#xff0c;演示如何使用com.typesafe.config库来配置时间配置&…

从QGIS图层中裁剪需要的区域

GiS数据裁切&#xff0c;创建一个临时图层&#xff0c;通过矢量裁切的方法&#xff0c;将Gis图层进行裁切&#xff1b;影像裁切&#xff0c;将影像图层放置在Gis中&#xff0c;截取影像图以及临时图层的轮廓&#xff0c;放入PS中进行对比&#xff0c;然后将影像图裁切下来。 1…

升级了显卡驱动,Vista得分从3.1提升到3.5,高兴啊!:)

我的是昭阳K42A笔记本&#xff0c;显卡是Nvidia Geforce8400M GS&#xff0c;升级了最新的修改版驱动&#xff1a;NVIDIA_XTreme-G_162.62mb_vista32&#xff0c;下载地址是&#xff1a;http://count.mydrivers.com/download.aspx?id77223&urlhttp://file5.mydrivers.com/…

新买了一个本

本想买Thinkpad T61的水货&#xff0c;都看好了AR1和A24这两款&#xff0c;昨天跑到市场去看了下真机&#xff0c;感觉外壳做工很粗糙&#xff0c;不是很满意&#xff0c;最后综合考虑入手了联想昭阳K42A&#xff0c;用了一天多了&#xff0c;感觉不错&#xff0c;性能很好&…