QinUi

# 注意事项

由于 QinJs 支持多端开发，而各端，特别是各小程序平台，没有统一的标准，加重了开发者和企业的成本，幸好 QinJs 使用 Vue 标准，对各端进行了写法的统一， 推动了生态的发展，但是由于某些小程序平台自身的原因，仍然会出现某些兼容性问题，我们会将制作 QinUi 过程中遇到，和平时收集的兼容性问题呈现在本专题，希望能帮助到 QinJs 开发者。

其他一些开发中遇到的问题，后期在问题汇总里面持续更新。

# 注意

ref 不可以等于组件名，比如 qinui-title 组件 ref 不能为 qinuiTitle 或 qinuititle

# 组件怎么阻止事件冒泡

由于 vue3 没有了 native 修饰符，所以不能直接在组件上阻止事件冒泡，只能套一层 view 标签，在 view上 写点击事件 @click.stop 等。 组件内部不能直接使用 @click.stop 阻止事件冒泡，如果这样做了，那么嵌套组件的元素点击事件均失效了，这样肯定是不合理的。

# 微信小程序

注意

微信小程序基础库需要设置在2.19.2及以上

# Vue 特性在各平台支持度

  1. 以下特性， QinUi 已对各小程序开发工具，H5浏览器进行过实测，均获得支持，其中支付宝小程序需要开启 component2 模式。
H5 小程序
√ √
  • provide / inject
  • $slots
  • v-model / sync
  • $parent / $children

# 设置页面背景颜色

一般情况下，我们给页面的 page 节点或者给页面的最外层 view 设置背景颜色，二者分别有如下需要注意点：

# 1. 通过page节点设置

这个方式全端有效，但是需要注意的是，在微信小程序，或者某些安卓机型上，该节点如果写在带scoped属性的样式标签内是无效的，所以我们建议 您可以在页面多加一个不带 scoped 属性的样式标签，如下：

/* 如果需要css的支持，还可以添加lang属性 */
<style lang="scss">
page {
  background-color: #3c9cff;
}
</style>

/* 带scoed属性的其他样式 */
<style lang="scss" scoped>
.box {
  ......
}
</style>

# 2. 通过页面外层 view 设置

相比 page 节点， view 的高度默认为内容高度，所以如果页面内容不足一屏高度时，底部剩余部分依然为默认的白色，所以我们给需要这个 view 设置一个 最低高度，让它等于窗口高度：

<template>
  <view class="wrap">
    ......
  </view>
</template>

<style scoped lang="scss">
.wrap {
  background-color: #3c9cff;
  min-height: 100vh;
}
</style>

# 小程序主包太大无法预览和发布

我们都知道微信小程序预览和发布的主包大小都不能超过 2M ，否则无法真机预览和上传发布，经常有同学反馈刚使用 QinUi ，调试时候主包就超过了 2M 而无法真机预览。

我们在这里做一个说明， QinUi 是按需引入的，在发行时，即使您使用了 QinUi 的全部组件，整个 QinUi 的大小也只有 500K 左右，但是有如下两点前提：

# qin.scss 的优缺点

qin.scss 为 QinJs 新建项目自带工程文件，使用的预处理器为 sass/scss ，由此可见，QinJs 官方推荐的是 scss ，同时我们 QinUi 也是 scss 的坚定推崇者，不建议在 QinJs 中使用 less 、stylus 等。

qin.scss具有如下一些特点：

  • 无需引入， QinJs 在编译时，会自动引入此文件
  • 在此中定义的 scss 变量，可以全局使用，可以在此定义一些颜色，主题，尺寸等变量
  • ** qin.scss 会编译到每个 scss 文件中**(请着重理解这一句话)

综上所述，我们可以得知， qin.scss 主要是利用 scss 的特性，定义一些全局变量，供各个写了 lang=scss 的 style 标签引用，但是这引出了一个重要的问题：
qin.scss中所写的一切内容，都会注入到每个声明了 scss 的文件中，这意味着，如果您的 qin.scss 如果有几百行，大小 10k 左右，那么这个 10k 都会被注入所有的 其他 scss 文件(页面)中，如果您的应用有50个页面，那么有可能因此导致整体的包体积多了 50 * 10 = 500k 的大小，这可能会导致小程序包太大而无法预览和发布， 所以，我们建议您只将 scss 变量相关的内容放到 qin.scss 中。

# 样式覆盖兼容性

使用每个组件的 diy-style 属性进行设置，目前只支持 字符串设置 。

<template>
  <qinui-title diy-style="width: 200rpx;"></qinui-title>
</template>

← 更新日志 →