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

组件问题

list组件

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

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

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

1. 可能是list-item中又再次嵌套了list组件；
2. 需要将嵌套的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组件使用注意事项总结

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

span组件

有数据但是没展示出来

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

input组件

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

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

image组件必须设置宽和高

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

1. block组件是表达逻辑区块的组件，没有对应的Native组件。可以使用实现更为灵活的"列表/条件渲染"。

2. 注意目前只支持for和if/elif/else属性，如果没有指定任何属性，则在构建时被当作“透明”节点对待，其子节点被添加到的父节点上

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

没有box-shadow,通过渐变实现

background: linear-gradient(#ffffff, #f3f3f3)

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

js问题

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

1. <a href="tel:10086">调起电话</a>

2. router.push({ uri: 'tel:10086' })

生成桌面图标的时候报200,install:fail

1. 可能是没有正确获取到要设为图标的图片,检查图片地址是否正确

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

兼容问题

华为的兼容问题

华为对结构的解析与别的品牌有所不同；

同一触发点 e.target 的解析
小米手机:

华为

兼容写法:

对 align-self:的处理不同；

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

vivo的兼容问题

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

其他内容

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

总结

以上就是我在开发中遇到的问题及解决方法,之后遇到别的问题,会持续更新.