快应用踩坑汇总——下

快应用官方介绍

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

前排提示：快应用的开发体验真的巨坑，小程序与之相比简直是神仙，例如华为开发甚至要专属的ide，内容也需要额外适配

开发心得感悟

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

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

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

坑点汇总

踩坑汇总------上

快应用不像微信小程序，并不支持浮动float布局，也不支持grid布局，只支持flex布局。
快应用里的CSS是间接用原生渲染实现的，所以并不支持web css全部属性，常见的不支持：box-shadow、overflow、letter-spacing、position的relative和absolut、transition、nth-child选择器、hover选择器
文字要用包裹，在div层写文字默认不渲染，同样在div层设置字体color无效，与字体有关的css都要在text层设置。
虽然支持border属性，但是你如果只是要一边border:

css 复制代码

// 这样写不行❌

border-bottom: 5px solid #000000; 

// 这样写可以

border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #000000;

快应用的px和网页的px不是同一个东西，快应用的px是这样定义的：

快应用750px = 网页100%width = 微信小程序750rpx = 网页100vw
接口申明在 manifest 文件的 features 中，除了@system.app使用前以外都需要申明。
纯文字需text标签 div标签文字内容不展示（文本节点必须放在text, span, a, label 标签内）
相对定位和绝对定位都不能用，也没有z-index , 因此想实现某个东西浮在另一个东西的上面，需要用到它的stack标签
设置或清空输入框的值示例．注意: 必须在input的change事件中同步value的变量值

html 复制代码

<div class="input-item">
    <text class="input-hint">设置或清空输入框的值：</text>
    <input class="input-text" type="text" placeholder="必须在change事件中同步value才能改变value" value="{{inputValue}}"
           onchange="updateValue"></input>
    <div class="doc-row" style="margin-top: 30px;">
      <input class="input-button input-button-first color-3" type="button" value="设置value值" onclick="setValue"></input>
      <input class="input-button color-3" type="button" value="清空value值" onclick="resetValue"></input>
    </div>
</div>
updateValue (e) {
 this.inputValue = e.text
},

list-item是一个巨坑，它总是会报各种BUG。为了减少BUG，它内部就不要使用if指令，而改用show指令。
block 用来表示逻辑，不渲染

html 复制代码

<block for="hotWords" :key="$idx">
    <div @click="tapKeyword($item.keyword)" class="hot-search-item">
	<image :src="'/static/' + ($idx+1) + '.png'"></image>
	<text class="desc">{{ $item.keyword }}</text>
    </div>
</block>

背景颜色要用background-color，用background的话不展示颜色
在快应用中，想要在某个值发生变化的时候监听到，可以这么写：

js 复制代码

// 我们现给出一组属性：
props: [
    'name',
    'age'
]
onInit () { 
      // 监听数据变化，如果监听的是对象中的某一特性，可以用.   比如user.name,user.age
      this.$watch('name', 'watchNameChange')
      this.$watch('age', 'watchAgeChange')
 },
 watchNameChange (newV, oldV) {
      console.info(`监听name变化：`, newV, oldV)
 },
 watchAgeChange (newV, oldV) {
      console.info(`监听age变化：`, newV, oldV)
 }

display只有flex和none两种值没有浮动和清除浮动的样式

js 复制代码

// 不支持这么写
flex-flow: row wrap;   
// 需要写成这样
flex-direction: row;
flex-wrap: wrap;

不支持white-space: nowrap; 要是想单行的话用lines：1
props: ['title', ''], // 传入属性：必须字母开头，全小写、数字和 - ，不能保留字和函数，不能以符号开头，dataList这种大小写混着会报错
子组件在emit方法时也不能大小写混写会触发不了事件
子组件emit事件往父组件传的参数，父组件接收到是个含有时间戳和事件类型还有参数内容的对象
动态设置当前页面的标题this.$page.setTitleBar({ text: '你要设置的标题' })