WXSS-WXML-WXS

最新推荐文章于 2023-07-20 18:07:19 发布

提拉米苏爱拿铁

最新推荐文章于 2023-07-20 18:07:19 发布

阅读量312

点赞数

分类专栏：小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/m0_50789696/article/details/129724527

版权

小程序专栏收录该内容

4 篇文章

订阅专栏

文章详细介绍了小程序的样式语言WXSS，包括样式写法、选择器权重和rpx自适应单位。同时，讨论了模板语法WXML，如Mustache、wx:if、wx:elif、wx:else和hidden属性的使用。此外，还提到了WXS，一种小程序的脚本语言，用于处理数据和提升性能，并给出了使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. WXSS

1.1 小程序的样式写法

页面样式的三种写法：行内样式、页面样式、全局样式
优先级依次是：行内样式> 页面样式 > 全局样式

1.2 支持的选择器

选择器权重与CSS类似

1.3 wxss扩展——尺寸单位rpx

rpx: responsive pixel : 可以根据屏幕宽度进行自适应规定屏幕宽度为750rpx

建议开发中将 iPhone6 作为视觉稿的标准
- iPhone6 屏幕宽度为375px 750物理像素所以 750rpx = 375px = 750物理像素
- 1rpx = 0.5px
- 因此如果想定义一个100px宽度的view 则需要设置width为 200rpx

二. WXML

2.1 Mustache 语法

开发中, 界面上展示的数据并不是写死的 , 而是会根据服务器返回的数据，或者用户的操作来进行改变
如果使用原生JS 或者 jQuery 的话 , 我们需要通过操作 DOM 来进行界面的更新
小程序和Vue 一样 , 提供了插值语法 : Mustache 语法双大括号

2.2 逻辑判断 wx:if wx:elif wx:else

某些时候,我们需要根据条件来决定一些内容是否渲染

当条件为 true 时, view 组件会渲染出来
当条件为 false 时, view 组件不会渲染出来

2.3 hidden属性

hidden是所有的组件都默认拥有的属性；
当hidden 属性为 true 时, 组件会被隐藏；
当hidden 属性为 false 时,组件会显示出来；

wx:if和hidden属性有什么区别？开发中如何选择？

wx:if 和 hidden 属性的区别 :

wx:if ：是控制组件是否渲染的。需要根据条件判断组件是否渲染，条件为true，对应的组件才会渲染出来；条件为false时，对应组件不仅不会渲染，也不会出现在虚拟DOM中

hidden：本质是通过添加hidden这个属性来控制组件的隐藏或显示，即使条件为true，对应组件也会渲染，只不过不会显示在页面中

开发中选择:

如果操作很频繁则使用hidden

如果不频繁则使用 wx:if

2.4 列表渲染 wx:for 基础

补充点

item/index 名称指定当出现多层遍历时，名字会重复

wx:for-item
wx:for-index

2 wx:for为什么需要绑定key？绑定key的方式有哪些？

为什么要绑定key:

当我们希望处于同一层的VNode 进行插入删除新增节点时可以更好的进行节点的复用就需要key属性来判断

绑定key的方式有哪些:

字符串: 表示 for循环array中item的某个属性(property) 该property是列表中的唯一的字符串或数字，且不能动态改变

保留关键字 *this 表示 item 本身此时item本身是唯一的字符串或数字,如果item是对象类型会转换为字符串会变成【object object】不具备唯一性

2.5 block 标签 --- 类似 <template>

某些情况下，我们需要使用 wx:if 或 wx:for 时，可能需要包裹一组组件标签
<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
使用block 有两个好处：

将需要进行遍历或者判断的内容进行包裹。
将遍历和判断的属性放在 block 标签中，不影响普通属性的阅读，提高代码的可读性。

三. WXS 官方文档说明

作用:

小程序的一套脚本语言和JavaScript基本一致，结合 WXML 可以构建出页面的结构。
为了在 wxml 中调用函数来处理对应的数据

如何使用:

写在 <wxs> 标签中

<!-- 1.方式一: 标签 -->
<!-- 模块命名 -->
 <wxs module="format">
  function formatPrice(price) {
    return "¥" + price
  }

  // 必须导出后, 才能被其他地方调用: 必须使用CommonJS导出
  module.exports = {
    formatPrice: formatPrice
  }
</wxs>

//使用
 <view>name:{{item.name}}-price:{{format.formatPrice(item.price)}}</view>

写在 .wxs结尾的文件中以CommonJS的方式即 modelu exports 导出在wxml文件中引入进行使用
```

<wxs module="format" src="/utils/format.wxs"></wxs>
```

WXS使用的限制和特点：

WXS不依赖于运行时的基础库版本，可以在所有版本的小程序中运行；
WXS的运行环境和其他 JavaScript 代码是隔离的， WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的 API
由于运行环境的差异，在iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异；

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

// 对count进行格式化
function formatCount(count) {
  count = Number(count)
  if (count >= 100000000) {
    return (count / 100000000).toFixed(1) + "亿"
  } else if (count >= 10000) {
    return (count / 10000).toFixed(1) + "万"
  } else {
    return count
  }
}

// 必须导出后, 才能被其他地方调用: 必须使用CommonJS导出
module.exports = {
 formatCount: formatCount
}

练习二：传入一个时间，格式化后进行展示（例如100秒，展示结果为01:40）；

// function padLeft(time) {
//   if ((time + "").length >= 2) return time
//   return "0" + time
// }


// 2 -> 002 -> 02
// 24 -> 24 ->0024 ->24
function padLeft(time) {
  time = time + ""
  return ("00" + time).slice(time.length)
}



// 对time进行格式化
// 100 -> 01:40
function formatTime(time) {
  // 1.获取时间
  var minute = Math.floor(time / 60)
  var second = Math.floor(time) % 60

  // 2.拼接字符串
  return padLeft(minute) + ":" + padLeft(second)
}