knownIssues.md

February 14, 2019 · View on GitHub

已知问题

标签问题

快应用的组件可以简单分为容器组件（div 等）、文本组件、表单组件、其他组件。快应用组件与 html 标签转换规则如下：

标签转换列表

快应用组件html 标签
divdiv; p,h1,h2,h3,h4,h5,h6; aside,footer,header,nav,main,section,figcaption,figure; dd,dl,dt,ul,ol,li; table,thead,tbody,td,th,tr; fieldset,legend,article
blocktemplate
progressprogress
textspan,strong,i,small,sub,sup,time,u,var,b,abbr,cite,code,em,q,address,pre,del,ins,mark
spanspan嵌套的span
aa,router-link
labellabel
textareatextarea
inputinput,button
imageimg
videovideo
  • 块级元素（即上面表格中 div 组件对应的 html 标签）不能直接放置文本，需要这样使用:
<div>
  <span>文本</span>
</div>

未兼容原因：快应用会忽略容器组件下的文本；并且容器组件不支持文本样式，因此只能直接在文本标签上设置样式。如果做了兼容，设置在容器组件上的文本样式会丢失。

  • span 标签最多支持两层嵌套，比如下面的代码不被允许：
<span>
  <span>
    <span>文本</span>
  </span>
</span>

未兼容原因：快应用对 text、span 组件的嵌套限制

TODO

  • 由于快应用 list 组件比较特殊，暂时没有把 ul、ol 等列表标签转换为 list 组件。未来可能会在 web 端实现一个与 list 组件表现一致的组件。

样式问题

由于快应用支持的样式有限，样式很难抹平，但快应用支持的样式，web 肯定是支持的，因此可以针对快应用写样式，然后运行在两端。参考快应用通用样式、文本样式。

特异性

下面是快应用关于样式特异性的说明：

  • 只有文本组件（a、span、label、text 等）才支持文本样式
  • 只支持#id、.class 、tag、后代、直接后代选择器。由于快应用组件类型数量限制，标签选择器暂只支持 div、span、a、input、label、textarea
  • 对于多级选择器，只有最后一个选择器的改变，组件才会更新，比如下面的代码，将 div class 中的 parent1 修改为 parent2 样式不会更新，child1 修改为 child2 则会更新
<style>
  .parent1 .child1 {}
  .parent2 .child1 {}
  .parent1 .child2 {}
</style>
<div class="parent1 child1">
  <div></div>
</div>
  • 快应用中使用 visibility 切换元素是否可见存在 bug，切换为 visibility:visible 后，再切换为 visibility:hidden，不生效
  • style 对象绑定中 border 样式不生效，比如
<template>
  <div :style=[styleObj]></div>
</template>
<script>
  export default {
    data () {
      return {
        styleObj: {
          color: '#ccc',
          border: '1px solid  #ccc' // 不生效
        }
      }
    }
  }
</script>
  • 当 style、:style 同时使用时，:style 不支持数组绑定，比如
<template>
  <!-- styleObj无效 -->
  <div style="color: red" :style=[styleObj]></div>
</template>

TODO

下面是样式中需要规避的点，未来会逐一解决

  • 快应用中 div 组件默认是 display: flex，因此标签转换列表中div组件对应的html标签需要设置为 display: flex
  • 不能依赖web标签的默认样式。比如 h1、h2、p 都会转换为 div 组件，其默认样式会丢失
  • border-color 不支持 rgb 形式的颜色

js问题

  • 快应用输入框不支持键盘相关事件（keyup、keydown等），也不支持 input 事件，监听输入框值变化只能用 change 事件
  • 快应用事件不冒泡
  • 快应用的 bug，自定义事件的回调函数不能加括号传参，比如下面这样写会报错： 
      <!-- 报错 -->
  <component @customEvent="handle('someData')"></component>
  <!-- 不报错 -->
  <component @customEvent="handle"></component>
  • 快应用的 bug，列表中的 checkbox 会被复用，删除、添加列表项时，可能会错误地触发 checkbox 的 onchange 事件；
  • 不支持 watch $route 变量
  • 由于快应用会把页面间传递的 router 数据直接绑定到 this 上，所以 this 实例上不应该有与上个页面传递的 query 数据的 key 冲突的属性，否则会出现覆盖问题