快应用开发注意事项

Posted 2022-06-20 u-1596086

CSS层

1. 不支持继承。
2. display只有两种值：flex与node。因此它勉强算是flexbox布局，但是它是没有inline-flex. 默认flex-direction为row， 因此其他小程序转换过来的页面大多数堆在一行里。如果对纯flexbox布局不熟悉，可以参考我们官网的文章，这里总结了一些布局 https://rubylouvre.github.io/...
3. 没有浮动与清理浮动的样式，即 float与overflow。
4. 定位没有相对定位与绝对定位，因此也没有z-index , 因此想实现某个东西浮在另一个东西的上面，需要用到它的stack标签。当然你也可以使用 负margin与transform 。
5. 没有精细地处理文本的样式，如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。
6. 浏览器中可以用16进制，颜色名，RGB， RGBA， HSL， HSLA 这些方式指定颜色值，但快应用只支持前两种。

标签层面

1. 没有button，建议用我们提供Button。
2. 没有icon， 建议用我们提供Icon。
3. 文本节点必须放在text, span, a, label 标签内，否则它们不会显示。不过娜娜奇会帮你自己添加的。 并且text标签内容不能再套text标签， span标签内容不能再套span标签
4. checkbox、 radio必须放在checkbox-group、 radio-group中，这是为了与其他平台保持一到，娜娜奇会帮你处理
5. 文本节点中有换行符，它们会真的换行的，不会像浏览器那样自动忽略。因此我们框架会自动去掉文本两边的空白或 移除纯的空白节点。
6. list-item是一个巨坑，它总是会报各种BUG。为了减少BUG，它内部就不要使用if指令，而改用show指令。
7. 百度、微信，支付宝小程序是使用hidden指令隐藏元素，而快应用是用 show指令，我们会用娜娜奇做处理。
8. 组件render的第一行不能是 if， 三元表达式， 短路与， map循环，因为它们会生成block标签，而快应用的根标签不能为block。
9. 由于label下不能放text，因此不建议用label标签。
10. swiper与其他小程序有差异，每次只展示一个标签，以后使用我们封装的swiper组件。
11. 快应用的标签都必须有闭标签，如<input />必须写成<input ></input>。如果用娜娜奇，我们会帮你做处理。
12. 快应用有div没有view，其他小程序有view没有div，建议统一使用div，娜娜奇做处理
13. 不支持data-*属性，在编译时会发出警告

 

原文链接：https://segmentfault.com/a/1190000017255903