uni-app 记录

[toFrankie]

有些东西隔一段时间不用就容易忘记，在此作下记录。

自定义组件选项配置

诸如 styleIsolation、virtualHost 等自定义组件配置，声明方式如下：

▼ Composition API

若是 Vue3.3+，可使用 defineOptions()。

<script setup>
  defineOptions({
    options: {
      virtualHost: false,
      styleIsolation: 'shared',
    },
  })

  // your code...
</script>

若是 Vue3.3 以下，需要独立的 <script> 块。

<script setup>
  // your code...
</script>

<script>
  export default {
    options: {
      virtualHost: false,
      styleIsolation: 'shared',
    },
  }
</script>

▼ Options API

<script>
  export default {
    options: {
      virtualHost: false,
      styleIsolation: 'shared',
    },
  }
</script>

各端差异

主要讨论微信小程序端与 App、H5 等非小程序端的差异。

后代选择器

比如，在父组件查询子组件内的某个元素。

在微信小程序端有两种做法：

1. 拿到子组件实例，然后再父组件内使用 uni.createSelectorQuery.in(subComponentInstance).select('.descendant') 获取元素。
2. 使用 >>>（跨自定义组件的后代选择器），在父元素内使用 uni.createSelectorQuery().select('.ancestor >>> .descendant') 获取其子（子子...）组件内的元素。

而 App 端，编译后的 HTML 结构跟小程序不一样，小程序带有一个 ShadowRoot 节点隔离，而 App 端不会。因此使用 uni.createSelectorQuery().select('.ancestor .descendant') 直接查询到后代的元素。而且 App 端不支持 >>> 语法，它是小程序特有的。

布尔 dataset

在 HTML 中有一种布尔类型的属性。

<!-- attr is true -->
<div attr></div>
<div attr=""></div>
<div attr="false"></div>
<div attr="any value"></div>

<!-- attr is false -->
<div></div>

如果要将某个属性变为 false，只能 removeAttribute('attr')。对于 setAttribute('attr', undefined) 等均是无效的，内部会有 toString() 的处理，因为 HTML 的属性值只能是字符串。data-* 同理。

但使用 uniapp 时，不同端表现不一样。

<view data-attr></div>

对于 dataset.attr 微信小程序是布尔值 true，而 App 端则是字符串 ''，后者表现是符合 HTML 规范的。猜测是微信小程序内部做了 dataset.attr !== undefined 的处理。如果要用于条件判断，要注意各端值是不一样的。

未完待续...