快应用踩坑

1. css的坑一大堆

   • 很多属性不能用，只能用flex布局，position几乎不能用，只能在html结构修改stack来达到定位
   • px是自适应的，没有em，em，支持百分比
   • 其他超多的属性都不支持

2. 文本只能在text和label标签中，否则不显示

   • 且这两个标签不能有嵌套

3. 图片是image标签

   • 一般最好用网络图片，因为快应用要求包最大为1M

4. background

   • 不能连写

5. 接口的 content-type 不能是 application/javascript

6. 华为加载器 和 厂商联盟的有区别，有超多的坑

   • 有很多接口在厂商联盟上使用没问题，在华为加载器上不行
   • 华为渲染机制更严格，很多联盟可以的操作在华为上报错

7. tabs的滚动会有bug，内容没有超出也可以滚动

   • 在用tabs的时候，tab-content里面的list高度自动识别错误，不是父元素的高度，设置height: 100%也没用
   • 所以当内容很少的时候依然可以滚动
   • 解决办法是自己用div写tabs，不用其tabs组件

8. 切换类名改变样式的时候，类名必须是目标元素上，不然没效果

   • 可能是偶现，在某些场景下

9. for循环的value和index位置与vue相反

   • 习惯了vue的写法，在这里得改变了

10. list-item的问题

    • 有type属性，且是必填的，相同type的必须要有相同的结构
    • 因为上一条，所以 list-item 里面不能用 if, 最好用 show 代替
    • 在循环渲染list-item的时候，里面不要再for循环，会很慢，甚至影响后面东西的加载

11. show 只能用 true 和 false

    • 如果是非布尔值的变量，先转换成布尔值，不然没效果

12. input 标签没有失焦(blur)事件

    • 在我的一个项目中，返回一个有input标签的页面，它自动触发了该input的focus事件
    • 且在联盟引擎上是部分情况如此（同一个页面），在华为加载器上是全部会触发

13. 有时候接口会莫名其妙的报错，甚至是接口数据已经返回了还是报错

    • 用setTimeout，200ms都行，很多莫名其妙的问题都可以解决

14. 渲染接口返回的数据报错

    • 在华为加载器上更明显
    • 例如接口返回了 userInfo： {name: 'zhangsan'}
    • 在页面上 <text if="{{userInfo && userInfo.name}}">{{userInfo.name || ' '}}</text>
    • 上面会报错，
    • 然后<text if="{{userInfo && userInfo.name}}">{{userInfo ？ userInfo.name ： ' '}}</text> 也会报错
    • 最终 <text if="{{userInfo && userInfo.name}}">{{userInfo ？( userInfo.name || ' ') ： ' '}}</text>
    • 终于不报错了

15. 各厂商的卡片

    • 首先各厂商的卡片的规则不完善，有的厂商都没有在线文档
    • 各厂商的卡片在mainifest.json中的位置有冲突，字段也不一样，没能够统一
    • oppo卡片调试只能将包放到手机专门的目录，麻烦