快应用开发常见问题以及解决方案【持续更新】

接触快应用也有一段时间了，踩过了大大小小的坑，让我活到了今天。准备在此立贴持续更新，记录遇到的问题以及解决方案，造福大众。

css 方面

一、文字竖排不支持

目前官方还不支持writing-mode，除了等待官方支持这个api之外，还可使用一种hack手段：给元素设置一个比较小的宽度。

二、text-align: center;居中无效

因为快应用默认是flex布局，因此居中的话应当使用justify-content: center;

template 方面

一、使用了list组件以后整个页面都不能滚动了

list组件须要加上“scrollpage=true”。https://doc.quickapp.cn/widge...

二、list 组件滑动无端闪退-- 很抱歉, “快应用” 已中止运行。

极可能是你的list-item 里面用了不一样的文件结构致使的

<list-item>
 <div if={{item.img}}>
   <image src='{{item.img}}'>
 </div>
 <div else>
   <text>{{item.text}}</text>
 </div>
</list-item>

相同的type的list-item必须具有彻底一致的DOM结构, 上例的list-item 的dom结构是会改变的,理应使用两个不一样的type 的list-item才行

<list-item type="img" if={{item.img}}>
 <div>
   <image src='{{item.img}}'>
 </div>
</list-item>
<list type="text" else>
 <div>
   <text>{{item.text}}</text>
 </div>
</list-item>

三、richtext 插入的html片断，没法更改样式？有时候图片还超出屏幕的边缘

因为官方没有接口对richtext的样式做修改，目前能够有的一种办法就是使用正则搜索匹配，而后加样式在须要的地方

四、list组件有时候会没法渲染

解决这个问题但是花了我很多时间呐。这个是快应用已知的一个bug。
当list用在第三层的时候就会有这个没法渲染的问题。

<template>
<div>
  <div>
    <list>
    ...
    </list>
  </div>
</div>
</template>

解决方案： 改为div，或者不要放在第三层。

js 方面

一、storage.get 在success中设置变量没反应

var a;
storage.get({
  key: 'a',
  success: function (data) {
    a = data;
  }
})
console.log(a) //undefined

缘由是storage是异步的。

其余

一、如何达到全屏的效果

在配置文件manifest.json 中设置display，"fullScreen": false, 能够隐藏电量信号的手机状态栏；"titleBar": false; 能够隐藏titleBar。这样子就全屏了。

二、工程升级之后，background-image变成白色背景了

background-image 使用了相对路径，工程对相对路径的处理有点bug；暂时改为绝对路径就行了

三、windows 安装完找不到hap 命令

这个多半是npm 安装目录没有配置环境变量的问题。

npm prefix -g 
// 会打印一个出一个路径，将它添加进系统变量中
// 再次运行
npm install -g hap-toolkit

参考:
快应用采坑与flex布局讲解
开发文档