快应用开发注意事项
CSS层
- 不支持继承。
- display只有两种值:flex与node。因此它勉强算是flexbox布局,但是它是没有inline-flex. 默认flex-direction为row, 因此其他小程序转换过来的页面大多数堆在一行里。如果对纯flexbox布局不熟悉,可以参考我们官网的文章,这里总结了一些布局 https://rubylouvre.github.io/...
- 没有浮动与清理浮动的样式,即 float与overflow。
- 定位没有相对定位与绝对定位,因此也没有z-index , 因此想实现某个东西浮在另一个东西的上面,需要用到它的stack标签。当然你也可以使用 负margin与transform 。
- 没有精细地处理文本的样式,如text-overflow, letter-spacing, line-break ,overflow-wrap, tab-size, text-align, text-align-last, text-indent, text-justify, text-size-adjust, text-transform, white-space, word-break, word-spacing。
- 浏览器中可以用16进制,颜色名,RGB, RGBA, HSL, HSLA 这些方式指定颜色值,但快应用只支持前两种。
标签层面
- 没有button,建议用我们提供Button。
- 没有icon, 建议用我们提供Icon。
- 文本节点必须放在text, span, a, label 标签内,否则它们不会显示。不过娜娜奇会帮你自己添加的。 并且text标签内容不能再套text标签, span标签内容不能再套span标签
- checkbox、 radio必须放在checkbox-group、 radio-group中,这是为了与其他平台保持一到,娜娜奇会帮你处理
- 文本节点中有换行符,它们会真的换行的,不会像浏览器那样自动忽略。因此我们框架会自动去掉文本两边的空白或 移除纯的空白节点。
list-item
是一个巨坑,它总是会报各种BUG。为了减少BUG,它内部就不要使用if指令,而改用show指令。- 百度、微信,支付宝小程序是使用hidden指令隐藏元素,而快应用是用 show指令,我们会用娜娜奇做处理。
- 组件render的第一行不能是 if, 三元表达式, 短路与, map循环,因为它们会生成block标签,而快应用的根标签不能为block。
- 由于label下不能放text,因此不建议用label标签。
- swiper与其他小程序有差异,每次只展示一个标签,以后使用我们封装的swiper组件。
- 快应用的标签都必须有闭标签,如
<input />
必须写成<input ></input>
。如果用娜娜奇,我们会帮你做处理。 - 快应用有div没有view,其他小程序有view没有div,建议统一使用div,娜娜奇做处理
- 不支持
data-*
属性,在编译时会发出警告