快应用开发过程中遇到的问题及解决方法

open

本期作者：郭苗苗

组件问题

list组件

• list组件中出现数据渲染混乱,组件的显示与隐藏混乱的问题

• 先看是否在list-item中使用了for循环和if判断来控制组件的显示与隐藏；
• 将 if 修改为 show；
• for循环里如果有导致dom结构不一样的地方,可以将整个list-item细分为小范围的list-item,dom结构改变的list-item,可以用show控制；

• list组件中点击事件,第一次可以正常点击,第二次点击不起作用的情况

• 可能是list-item中又再次嵌套了list组件；
• 需要将嵌套的list组件改成div形式的；

• 报 xxx cannot be cast to xxx at …list 的错误, 是不规则使用list组件导致的,根据如下的注意事项修改就可以 。
  解释：Native 会复用相同type属性的list-item,所以有type属性但是dom结构会变得list-item就会出现渲染问题,但是设置相同type属性的list-item是优化列表滚动性能的关键,所以只有划分成更细的list-item会是比较好的解决方法；

list组件使用注意事项总结

• list-item内不能再嵌套list；
• list-item的type属性为必填属性；
• list-item内部最好不使用if指令或for指令，因为相同type属性的list-item的 DOM 结构必须完全相同，而使用if指令或for指令会造成 DOM 结构差异；

span组件

• 有数据但是没展示出来

• 应该是直接在div组件中写了span组件导致的；
• 可以将span组件换成text组件,或者在span组件外层再加一层text组件；

input组件

• 报错如下: java.lang.IndexOutOfBoundsException: index=2 count=1

• 如果两个input要在一个div下,那么他们不能有非input的兄弟元素,必须都是input,否则会报错；
• 如果一定要有别的兄弟元素,可以将每个input外层都加一个div,这样就不会报错了；

其他组件

• image组件必须设置宽和高

• 不能给block加class,只支持for, if, elif, else属性,不支持show条件渲染

• block组件是表达逻辑区块的组件，没有对应的Native组件。可以使用实现更为灵活的"列表/条件渲染"。
• 注意目前只支持for和if/elif/else属性，如果没有指定任何属性，则在构建时被当作“透明”节点对待，其子节点被添加到的父节点上

• 背景渐变色和圆角不能同时使用，圆角会失效

• 没有box-shadow,通过渐变实现
  background: linear-gradient(#ffffff, #f3f3f3)

• justify-content属性，在快应用官方开发环境中，目前不支持space-around

1

JS问题

• 如果电话是固定的, 用a调起电话比较方便,如果电话是变动的,需要用接口返回,则用router.push比较方便,用a的话, 去掉接口之后,数据返回,调不起拨打电话界面
  调起电话
  router.push({ uri: 'tel:10086' })

• 生成桌面图标的时候报200,install:fail
  可能是没有正确获取到要设为图标的图片,检查图片地址是否正确

• 在显示与隐藏比较频繁的模块,一直用if控制组件显示与隐藏,用户体验较差,最好与show结合使用

1

兼容问题

华为的兼容问题

• 华为对结构的解析与别的品牌有所不同；
  同一触发点 e.target 的解析
  小米手机:

华为手机：

兼容写法:

对 align-self:的处理不同；

兼容性写法：去掉babelstyle的align-self: center;这句话对小米的机型没影响正常显示，但是华为honor会把整个标签都放在图片的中间。

vivo的兼容问题

在我写的项目中,使用组件slider,在小米手机上正常,在vivo手机上报错,导致整个页面崩溃,所以都不使用slider组件了

1

其他内容

• background加背景颜色加不上,background-color才可以

• 在本地项目中添加了图片,没展示出来
  添加本地图片后需要重新npm run watch 或者 npm run build 之后才可以显示出来；
• 修改manifest文件后,报 Unexpected token } in JSON at position 1815,如图:

同级属性的最后一个属性的属性值多加了这个符号(,),去掉即可 ；

• 已经配置debug了,但是调试信息不展示。

解决方式: hap update --force 之后,删掉node_modules,重新npm install

• 关于prompt接口，showToast的duration参数官方不支持具体时长的设置，华为可以进行duration和gravity参数设置

• 使用stack组件，变相实现浮动，绝对定位等效果。快应用仅支持display: flex|none, position: none|fixed

1

总结

以上就是我在开发中遇到的问题及解决方法，随着版本的迭代，部分可能有所更新，欢迎大家一起探讨。