全网最细致的快应用问题解决之道
主要内容
以下为本人在开发工程中遇到的问题和解决的方法，包括：
1、快应用常见问题
2、CSS的box-shadow暂行替代方法
3、CSS触摸反馈的实现与注意
4、CSS动画遇到的问题
5、CSS隐藏组件的动画实现
6、顶部栏titleBar的配置
7、input组件的防止输入时标题被顶飞
8、input的自动获取焦点例子
9、间接阻止冒泡事件
10、快应用编译出问题的解决方法
前言：
快应用的官方文档已经算完善了，这里就不阐述如何去构建一个项目，还不知道如何去构建一个应用的可以看看官方的文章：
快应用开发教程：开发前的准备工作
1、快应用常见问题
1）快应用并不支持浮动float布局，也不支持grid布局，只支持flex布局。
2）flex布局除了上古手机都兼容了，不用担心兼容问题，如果你不清楚flex布局的，推荐你先了解一下flex布局。
3）快应用里的CSS是间接用原生渲染实现的，所以并不支持web css全部属性，常见的不支持：box-shadow、overflow、letter-spacing、position的relative和absolut、transition、nth-child选择器、hover选择器。
4）position只支持fixed属性。
5）文字要用
6）虽然支持border属性，但是你如果只是要一边border，这样写会不渲染：
border-bottom: 5px solid #000000;你应该这样写：
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #000000;7）快应用的px和网页的px不是同一个东西，快应用的px是这样定义的：
快应用750px = 网页100%width = 微信小程序750rpx = 网页100vw
8）快应用没有img这个标签，请使用image组件，虽然img会被渲染，但是不提倡，未来万一被废弃了呢。
9）双括号{{}}内可以执行简单的js，可以使用三元表达式：
{{getText()}}
.....
getText(){
return '我是小明'
}
10）三元表达式特别有用，请务必学会，它是这样的形式：
条件 ？成立执行我 ：不成立执行我
{{ ok ? 'YES' : 'NO' }}例子：
{{name == '小明' ？'贼帅' ：'一般般'}}
........
2、CSS的box-shadow暂行替代方法：
设计中没有阴影就没有层次感，扁平看多了也会腻，但是快应用不支持css阴影怎么办，小明这里有个傻招式：
1）用Photoshop建一张长宽比比较大的透明图片，用渐变功能添加半透明黑色渐变，导出为png格式。
2）在要用到阴影的div的边用image组件放上这张图片就行了，如果你多次用到某个地方，就弄成自定义组件调用。
上面是我用的阴影png图，你可以用css的transfrom旋转它：
.image{
transform: rotate(90deg); //旋转90度
}
.image{
transform: rotate(180deg); //旋转180度
}
.image{
transform: rotate(270deg); //旋转270度
}3、CSS触摸反馈的实现与注意
快应用可以用:active伪类实现触摸反馈比如：
.btn{
width: 200px;
height: 200px;
background-color: red;
}
.btn:active{
background-color: blue; //div理论上按下时会变蓝,但实际不变蓝
}注意，上面的div按下时并不会变蓝，div要触发active必须绑定一个click事件，比如：
另外，input的button不用绑事件就能触发这个:active，例如：
4、CSS动画遇到的问题
css动画不能行间绑定，像这样是失效的：
动画
替代方法：控制不了anime，但是可以控制class名字嘛，整多几个class，把anime分别绑定到class，在动态控制class名字：
动画
......style.....
.anime1{
.....
}
.anime2{
.....
}
...script.....
export default{
data:{
anime: 'anime1' //此时执行动画1
}
}5、CSS隐藏组件的动画实现
因为出现动画比较容易实现，这里就不详细说了，这里说说怎么做消失动画。
一般我们隐藏组件是用if="{{false}}"或show="{{false}}"来实现的，这样即使动态绑定anime的消失动画class，也来不及执行动画，组件就提前隐藏了。
所以，要换个思路，在隐藏组件时，延迟隐藏，延迟的时间和动画的时间相同。这样就能保证动画完全执行完后，组件才消失。举个淡出的例子：
动画
这样，点击div就能淡出了。
6、顶部栏titleBar的配置
专门抽这块出来是因为大家经常会用到。这里可以分三个配置方式。
1）在项目下的manifest.json文件里全局配置，一次性配全部页面
优点：省事
缺点：不能差异性配置
//在manifest.json里用ctrl+f搜索display，然后你会看到
"display": {
"backgroundColor": "#ffffff", //所有页面的初始背景颜色
"fullScreen": false, //是否全屏显示，是的话会隐藏状态栏
"titleBar": true, //是否显示titleBar
"titleBarBackgroundColor": "#eeeeee", //配置titleBar的背景色，注意这里的颜色会同时配置到全部页面的状态栏颜色。
"titleBarTextColor": "#000000", //配置titleBar的文字颜色
"menu": false, //是否在titleBar右边显示三个点作为菜单
"pages": { //这里开始，是单个页面的配置了。
......
}
}manifest.json一次性配值所有页面的titleBar
2）在项目下的manifest.json文件里全局配置，单个页面配置
优点：方便管理
缺点：静态配置、不能动态变
//在manifest.json里用ctrl+f搜索display，然后你会看到
//比如说我有pageA和pageB，我要pageA开titleBar，pageB不开titleBar
"display":{
........
"pages": {
"pageA": {
"backgroundColor": "#000000", //设置pageA的初始背景颜色为黑色
"fullScreen": false, //设置pageA隐藏状态栏
"titleBar": true, //设置pageA显示titleBar
"titleBarBackgroundColor": "#0000ff", //设置pageA的titleBar的背景为蓝色
"titleBarTextColor": "#ffffff", //设置pageA的titleBar的文字颜色为白色
"menu": false //设置pageA的titleBar不显示菜单
},
"pageB": {
"backgroundColor": "#ffffff", //设置pageB的初始背景颜色为黑色
"fullScreen": true, //设置pageB不隐藏状态栏
"titleBar": false, //设置pageB不显示titleBar
"menu": false //设置pageB的titleBar不显示菜单
}
}
}manifest.json一个页面一个页面地配置titleBar
3）在项目的具体page页，在页面初始化函数里面配置
优点：可以动态修改titleBar
缺点：管理起来不直观
//比如我让页面加载完时修改titleBar样式
在具体的某个页面动态修改titleBar
假如你做一个尝试，对同一个页面：用方法一设置了标题文字颜色为红色，用方法二设置了标题文字颜色为绿色，用方法三设置了标题文字颜色为蓝色，那么最终那个页面标题文字会显示那个颜色呢？
答案是蓝色，因为内部渲染优先级方法三 > 方法二 > 方法一
7、input组件的防止输入时标题被顶飞
在用input组件时，我经常会遇到标题栏会被顶飞到和状态栏重合，对强迫症来说不是一件什么好事，不过1030版本已经可以解决这个问题。
//在manifest.json里用ctrl+f搜索display，然后你会看到
"display": {
"fullScreen": false, //设置不全屏，下面这句防顶飞才生效
"windowSoftInputMode: "adjustResize" //防顶飞
"pages":{
......
}
}windowSoftInputMode有两个值可选：adjustPan（顶飞） | adjustResize（不顶飞），默认顶飞，如果设置了全屏，则不顶飞失效。
8、input的自动获取焦点例子
一开始我以为快应用的input自动获取焦点为focus="true"，后来发现并不行，我试了以下几种方法都不行，错误示例：
后来研究了一下文档，发现是这样用的，希望大家别踩我这个坑：
......
注意：this.$element()里传的是id名称而不是class类名，不要在onInit（）里使用这个方法，还没开始渲染，获取不了节点，会报错。onReady（）里可以使用，因为此时节点已经渲染完。
9、间接阻止冒泡事件
官方貌似没提供阻止冒泡事件，因为快应用是默认阻止冒泡的，但是我在某次封装组件在调用时，事件神奇的冒泡了。我请教了群里的大神，想到了一种貌似可以阻止冒泡的方法。
......
10、快应用编译出问题的解决方法
常见的编译问题：
代码错误——这个就不说了，自己查错误日志然后修bug
编译失败——找不到node module，可以尝试打开调试板，点击终端，输入npm install，如图：
如果还是编译不成功就把项目下的node_modules删了，再npm install一次，通常这样就能解决大部分编译失败问题。
注意：npm install的过程会有点慢，因为依赖包服务器在国外，想快的话就用淘宝镜像cnpm。
如果你试了上面的方法都不行，还是编译失败，可能你遇到了我这个问题。有一次因为要安装deepin，我就把d盘空了出来，快应用开发工具也从d盘移到了f盘，于是问题出现了，不管我怎么编译都不成功，我重复试了上面的方法，还重装了快应用开发工具，都是不行，编译失败。
后来发现要改一下项目配置：
第一步：在快应用开发工具的安装目录找到\resources\app\extensions\hap-debugger\toolkit，你会看到有一个叫hap-toolkit.tgz的文件，我们需要它的路径
第二步：在项目根目录找到package.json，打开，ctrl+f搜索hap-toolkit，你会看到
"hap-toolkit": "一条长长的路径"
把刚才我们找的这个文件的路径替换原来的，保存，记得要用\\而不是\,举个例子，我在F盘的Quickapp下面装了快应用开发工具，那我的hap-toolkit.tgz文件路径应该是
F:\Quickapp\resources\app\extensions\hap-debugger\toolkit\hap-toolkit.tgz
那我应该这样写：
"hap-toolkit": "f:\\Quickapp\\resources\\app\\extensions\\hap-debugger\\toolkit\\hap-toolkit.tgz"
写完ctrl+c保存，然后删除项目根目录的node_modules文件夹，然后在调试工具的终端输入npm install，完了你就会惊喜的发现项目又可以跑了。以上基于1030版本，个人测试手机华为honnor 5c，不排除这些问题未来会被修复或手机不同从而导致测试结果不同。所以自己动手实践才是真理。
我是小明，一名大学生，写这篇文章花了我很多个小时，希望能让读着这篇文章的你少踩几个坑，少走点弯路。最后，祝快应用越来越好。
相关阅读：
网页与快应用之间构造可靠通信通道
一个前端攻城狮的快应用开发之路
快应用的用法和常见问题解答
快应用开发漫谈-部署与调试
快应用开发新手入门指南
快应用list组件的那些事儿
写在最后
在去年的开发者大赛征文中，我们通过多个社区联合活动收集了很多优质文章，有入坑指南、开源项目、开发模板、常见问题总结等多个方面，这些内容为很多开发者提供了参考，感谢大家的支持和参与，今年的我们的征文活动还在继续，感兴趣的开发者可以点阅读原文查看详情哦！
快应用生态平台
赋能开发者
拓展场景未来
快来关注我们吧