Lyk-Blog

四、WXSS-WXML-WXS语法

2022/9/10 微信小程序wxss语法尺寸单位rpxwxml语法Mustache语法逻辑判断wx：ifhidden属性wx：for列表渲染block标签wxs语法

# 1、WXSS 编写程序样式

# 1.1.小程序的样式写法

  • 页面样式的三种写法：
    • 行内样式、页面样式、全局样式
    • 三种样式都可以作用于页面的组件
  • 如果有相同的样式：
    • 优先级依次是：行内样式 > 页面样式 > 全局样式

17348d029b6442eef.png

# 1.2.WXSS 优先级与 CSS 类似

  • wxss 选择器权重如下图所示

36aa529762dbed2de.png

# 1.3.wxss 的扩展 – 尺寸单位rpx

  • 尺寸单位
    • rpx（responsive pixel）: 可以根据屏幕宽度进行自适应，规定屏幕宽为 750rpx。
    • 如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

4689e6b5fe7606e61.png

  • 建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
    • 公司的设计稿一般宽度是 375px

# 2、Mustache 语法绑定

  • WXML 基本格式：

  • 类似于 HTML 代码：比如可以写成单标签，也可以写成双标签；

  • 必须有严格的闭合：没有闭合会导致编译错误

  • 大小写敏感：class 和 Class 是不同的属性

  • 开发中, 界面上展示的数据并不是写死的, 而是会根据服务器返回的数据，或者用户的操作来进行改变.

    • 如果使用原生 JS 或者 jQuery 的话, 我们需要通过操作 DOM 来进行界面的更新.

    • 小程序和 Vue 一样, 提供了插值语法: Mustache 语法(双大括号)；

      • 但是不同的是：小程序的插值语法不支持{{}}中调用页面的 Page 函数中定义的方法；【在小程序中，wxs 模块中定义的方法才可以放在{{}}中进行调用】

      • 因为小程序是双线程模型，为了更好的体验，wxs 标签是在 webView 中进行解析执行的；这样避免了 webView 和 JsCore 的频繁沟通导致的性能影响

445723c8972d4e3be.png

# 3、WXML 的条件渲染 wx:if 和 hidden 属性

# 3.1.逻辑判断 wx:if – wx:elif – wx:else

  • 某些时候, 我们需要根据条件来决定一些内容是否渲染：
    • 当条件为 true 时, view 组件会渲染出来
    • 当条件为 false 时, view 组件不会渲染出来

5875e7d1e57fc3617.png

# 3.2.hidden 属性

  • hidden 属性:
    • hidden 是所有的组件都默认拥有的属性；
    • 当 hidden 属性为 true 时, 组件会被隐藏；display:none;
    • 当 hidden 属性为 false 时, 组件会显示出来；
  • hidden 和 wx:if 的区别
    • hidden 控制隐藏和显示是控制是否添加 hidden 属性
    • wx:if 是控制组件是否渲染的

# 4、WXML 的列表渲染

# 4.1.列表渲染 – wx:for 基础

  • 为什么使用 wx:for？
    • 我们知道，在实际开发中，服务器经常返回各种列表数据，我们不可能一一从列表中取出数据进行展示；
    • 需要通过 for 循环的方式，遍历所有的数据，一次性进行展示；
  • 在组件中，我们可以使用 wx:for 来遍历一个数组 （字符串 - 数字）
    • 默认情况下，遍历后在 wxml 中可以使用一个变量 index，保存的是当前遍历数据的下标值。
    • 数组中对应某项的数据，使用变量名 item 获取。

6ecdc560b61da04c4.png

# 4.2.block 标签

  • 什么是 block 标签？
    • 某些情况下，我们需要使用 wx:if 或 wx:for 时，可能需要包裹一组组件标签
    • 我们希望对这一组组件标签进行整体的操作，这个时候怎么办呢？
  • 注意：
    • 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
  • 使用 block 有两个好处：
    1. 将需要进行遍历或者判断的内容进行包裹。
    2. 将遍历和判断的属性放在 block 便签中，不影响普通属性的阅读，提高代码的可读性

# 4.3.列表渲染 - item和index 名称的重命名

  • 默认情况下，item – index 的名字是固定的
    • 但是某些情况下，我们可能想使用其他名称
    • 或者当出现多层遍历时，名字会重复
  • 这个时候，我们可以指定 item 和 index 的名称：
//page.js内容
Page({
  data: {
    books:[
      {name:'你不知道的JavaScript',id:110},
      {name:'JavaScript高级程序设计',id:111}
    ]
  },
})

//page.wxml内容
<block
  wx:for="{{ books }}"
  wx:key="id"
  wx:for-index="i"
  wx:for-item="book">

    <view>{{ book.name }}-{{ i }}</view>

</block>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 4.4.列表渲染 – key 作用

  • 我们看到，使用 wx:for 时，会报一个警告：
    • 这个提示告诉我们，可以添加一个 key 来提供性能。
  • 为什么需要这个 key 属性呢？
    • 这个其实和小程序内部也使用了虚拟 DOM 有关系（和 Vue、React 很相似）。
    • 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入、删除一个新的节点，可以更好的复用节点；
  • wx:key 的值以两种形式提供
    • 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
    • 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。wx:key="*this" 等同于 wx:key="的写法"

7d43d872439d68c86.png

# 5、WXS 语法基本使用

# 5.1.什么是 WXS？

  • WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
    • 官方：WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。（不过基本一致）
  • 为什么要设计 WXS 语言呢？
    • 在 WXML 中是不能直接调用 Page/Component 中定义的函数的.
    • 但是某些情况, 我们可以希望使用函数来处理 WXML 中的数据(类似于 Vue 中的过滤器)，这个时候就使用 WXS 了
  • WXS 使用的限制和特点：
    • WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行；
    • WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的 API；
    • 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备 上二者运行效率无差异；
    • 注意 wxs 不支持 ES6 语法

# 5.2.WXS 的写法

  • WXS 有两种写法：
    1. 写在标签中
    2. 写在以.wxs 结尾的文件中
  • <wxs/>标签的属性：

891a45e51cb2d59a9.png

  • 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。
    • 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见；
    • 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现；【只能用 CommonJs 模块化方案】

# 6、WXS 语法案例练习

  • 案例一：传入一个数字，格式化后进行展示（例如 36456，展示结果 3.6 万）；

  • 案例二：传入一个事件，格式化后进行展示（例如 100 秒，展示结果为 01:40）；

9.png

fmt.wxs 文件

10.png

最后更新时间: 2022/11/15, 15:33:04

五、小程序的事件处理

彩虹
周杰伦