【小程序】WXML 模板

水深无声 2024-03-30 11:08 74阅读 0赞

**目录**

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 中的模板语法

数据绑定

列表渲染

条件渲染

## 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 等伪类选择器

## JS 逻辑交互 ##

### 1. 小程序中的 .js 文件 ###

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作。例如：

响应用户的点击、获取用户的位置等等。

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

小程序中的 JS 文件分为三大类，分别是：

app.js

是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序

页面的 .js 文件

是页面的入口文件，通过调用 Page() 函数来创建并运行页面

普通的 .js 文件

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

发表评论取消回复

表情：

评论列表（有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】WXML 模板

目录 WXML 模板 1. 什么是 WXML 2. WXML 和 HTML 的区别 WXSS 样式 1. 什么是 WXSS 2. WXSS 和 CSS 的区别 J

水深无声/ 2024年03月30日 11:08/ 0 赞/ 75 阅读

相关小程序WXML之模板

WXML提供一种比较特殊的标签模板（template），可以在模板中定义代码片段，然后在不同的地方调用。这个有点类似C和java里面的函数方法。定义模板 ------

曾经终败给现在/ 2023年10月17日 09:04/ 0 赞/ 149 阅读

相关微信小程序（WXML模板文件二）

课程大纲（1）循环指令key属性补充（2）wx:if条件变异指令（3）`<block>`标签（4）hidden隐藏元素（5）模板

我就是我/ 2023年06月15日 09:45/ 0 赞/ 152 阅读

相关微信小程序（WXML模板文件二）

【本节大纲】（1）循环指令key属性补充（2）wx:if条件变异指令（3）标签（4）hidden隐藏元素（5）模板（6）引用（7）共同

约定不等于承诺〃/ 2023年06月15日 09:43/ 0 赞/ 52 阅读

相关 5.微信小程序（WXML模板文件二）

微信小程序（WXML模板文件二）大纲（1）循环指令key属性补充（2）wx:if条件变异指令（3）标签（4）hidden隐藏元素（5）模

朴灿烈づ我的快乐病毒、/ 2023年06月15日 07:24/ 0 赞/ 16 阅读

相关微信小程序（WXML模板文件一）

课程大纲（1）页面根元素（2）WXML简介（3）标签闭合、敏感性（4）数据驱动（5）数据绑定\{ \{\}\}—\{ \{\}\} （6）列

曾经终败给现在/ 2023年06月13日 04:35/ 0 赞/ 23 阅读

相关微信小程序（WXML模板文件一）

今日大纲（1）页面根元素（2）WXML简介（3）标签闭合、敏感性（4）数据驱动（5）数据绑定\{ \{\}\}—\{ \{\}\}

迷南。/ 2023年06月13日 03:22/ 0 赞/ 38 阅读

相关 4.微信小程序（WXML模板文件一）

微信小程序（WXML模板文件一）（1）页面根元素（2）WXML简介（3）标签闭合、敏感性（4）数据驱动（5）数据绑定\{ \{\}\}—\{ \

落日映苍穹つ/ 2023年06月12日 14:28/ 0 赞/ 19 阅读

相关小程序的WXML动态模板语法详解

WXML动态模板语法详解对于WXML的动态语法，简单的分类为： 1. 数据绑定 2. 条件渲染 3. 列表渲染 4. 事件处理数据绑定基础数据绑

曾经终败给现在/ 2023年03月13日 06:09/ 0 赞/ 20 阅读

相关小程序笔记wxml

数据绑定及渲染 //数据绑定 <view> { { message}} </view> //遍历 <view wx:for="{ { newobj}}">{ { it

痛定思痛。/ 2022年05月29日 01:43/ 0 赞/ 218 阅读