快应用踩坑汇总——上

快应用官方介绍

快应用是一种新的应用形态，以往的手机端应用主要有两种方式：网页、原生应用；网页无需安装，却体验不是很好；原生应用体验流畅，却需要从应用商店下载安装，难以一步直达用户；快应用的出现，就是希望能够让用户无需下载安装，并且还能流畅的体验应用内容。

开发心得感悟

快应用的开发体验真的巨坑，小程序与之相比简直是神仙；

华为开发甚至要专属的ide，内容也需要额外适配；

10分钟能开发完的需求，放在快应用上可能是半小时甚至一小时，ide的坑、语法的坑、连接手机的坑，数不胜数。

坑点汇总

快应用踩坑汇总------下

动画效果和样式

小程序当中支持的一些动画效果比如transition之类的在快应用中可能并不支持，不过这个随着后续版本的更新可能会逐渐加入。由于我使用的也不是很多所以这里不多说了，总之一些比较复杂的动画效果很有可能是实现不了的，只能选择替代方案。另外快应用中不支持伪类选择器:after，并且像z-index这样的图层效果也不支持。

if和show

首先要提到的一点是快应用的控制块是不能使用show的，这个要注意。然后就是非常坑的一点，这个我也是问了快应用官方人员才知道的，if中的条件为false，0，undefined，null和 '' 时都不会显示，而show中的条件只有为0和false的时候才不显示，也就是说直接将if替换为show或者将show替换为if都是不行的。然后就是if和show当中的一些条件，比如如下片段：

js 复制代码

<block if="{{foo === null}}"></block>
<block elif="{{foo.length===0}}"></block>
<block else></block>

像这个if，elif，else的结构中每个条件语句都会执行，也就是说如果foo是null的话这个就会报错Cannot read property 'length' of null 。这个是快应用里面和js机制不一样，因此需要注意。array.length===0这种判断条件最好改成array&&array.length===0这样。

swiper

swiper也是作为出现频率非常高组件，但是字实际使用中，虽然bug不多，但是开放的功能太少，如vertical设置滑动方向都不支持。

js 复制代码

<div class="swiper-container">
    <stack>
        <swiper class="swiper" autoplay="true" indicator="false" interval="2000" loop="true" onchange="swiperChange">
        <block for="(index, item) in data">
        <image class="wrap-img" src="{{item.image}}" onclick="bindViewTap(item)" />
        </block>
        </swiper>
        <div class="dots">
        <block for="(index, item) in data">
        <div class="dot {{index === swiperCurrent ? 'active' : ''}}"></div>
        </block>
        </div>
    </stack>
</div>
<script>
export default {
    swiperChange(e) {
        this.swiperCurrent = e.index
    }
}
</script>

利用onchange事件去做修改
tabs内不能再嵌套tabs，如有此类需求，外部需要div组件模拟选项卡

slider

这个也是一个特别坑爹的组件
slider 组件只有滑动结束后end才有回调，进行中没有回调，改变value值也会触发change事件，无法判断change是人为滑动触发，还是改变数据触发的。官方demo竟然是有时差来区别。

web

1.web组件使用网页与原生通信时（system.postMessage）。
当页面发生跳转时，就无法再触发通信，如:www.xxx.com?id=1跳转到www.xxx.com?id=2
在华为机型上有更多蜜汁bug.

$forceUpdate()

this. <math xmlns="http://www.w3.org/1998/Math/MathML"> f o r c e U p d a t e ( ) 有点类似与 v u e 的 t h i s . forceUpdate()有点类似与vue的this. </math>forceUpdate()有点类似与vue的this.nextTick()，
若开发者期望数据更新时立即执行相应的 DOM 操作，可使用：this.$forceUpdate()；一般不推荐使用

被禁用的 new Function，eval

eval这些容易注入恶意代码，所以小程序，快应用禁用了。
其实就是怕你怕你热更新，绕开审核，进行为所欲为的操作。
但是你确实想用eval，也可以自己实现一个。
参照-《前端与编译原理------用JS写一个JS解释器》
segmentfault.com/a/119000001...

list

快应用中没有微信小程序中的<scroll-view>组件，取而代之的是这个<list>，不过相比于<scroll-view>还是有不少坑的。

首先<list>不支持<scroll-view>中的很多功能，比如滚动条，还有一些不太常见的事件，如果有需求只能自己实现，不过这个还不是最坑的，最坑的其实在于<list>的子组件------<list-item>。

在快应用当中<list>的子组件只能是<list-item>(<block>也可以，但是<block>是控制块，最终仍然必须是<list>的下一层为<list-item>)，而<list-item>大致与<div>的功能相同。

这个看上去倒没什么，只是要对 <list>下的子组件外部包一层就行了，但是这个<list-item>有一个属性------type。<list>的出现本就为了解决列表重复太多的性能问题，因此在<list>中进行复用，而的type如果相同，在复用过程中就会使用相同的结构进行渲染。因此如果要显示不同的内容就必须使用不同的type。

同时为了保证相同type的<list-item>的结构相同，在<list-item>中尽量不使用if或者for。举个例子：

js 复制代码

<list>
	<list-item type="example">
		<block for={{array}}>
			<text>{{$item}}</text>
		</block>
	</list-item>
</list>

这样的写法在实际运行过程中就可能导致渲染出现问题（因为array的长度可能发生改变），正确的写法如下：

js 复制代码

<list>
	<block for={{array}}>
		<list-item type="example">
			<text>{{$item}}</text>
		</list-item>
	</block>
</list>

同理对于if语句，如果在这个item中出现了需要判断的情况，那我建议是分开来写，将if放在item属性里，比如说：

js 复制代码

<list>
	<list-item type="example">
		<text if={{key}}>{{TXT}}</text>
		<text else>{{txt}}</text>
	</list-item>
</list>

这种就有可能会引起最终渲染出错，建议换成如下写法：

js 复制代码

<list>
	<list-item if={{key}} type="example-1">
		<text>{{TXT}}</text>
	</list-item>
	<list-item else type="example-2">
		<text>{{txt}}</text>
	</list-item>
</list>

但是如果这个item本身出现的情况实在太多了，这时候如果将其分离开无疑是不明智的，这种时候就只能将if换成show。

但是这样一来就会引起上面提到的if和show判断条件不一致的问题。

目前来说，只能在其他地方比如生命周期函数onInit里面对判断条件进行判断重新赋值（比如判断条件为undefined就手动赋值成false）来解决这个判断条件不一致的问题，非常麻烦。