快应用的开发注意点

2019年9月20日 161次阅读 来源: 司徒正美

随着公司越来越多业务线开发快应用，我们总结一下我们这个月开发快应用的心得及给出必要的指导。因为快应用与我们公司的预装策略有关，我们想要手机商预装我们的去哪儿App，那么我们就得帮他们推广一下他们的快应用。至于快应用是否能比微信小程序带来更多流量，那是另一回事了。

快应用目前是由小米公司统一给九大手机商提供技术支持的，因此我们在开发快应用有问题时，直接问小米的人就行了。而小米在早期就开发过类似小程序的东西，因此它的体系与微信小程序出入比较大，像百度，支付宝，头条都是直接抄微信的，网上早有破解微信小程序的代码，因此他们在开发者工具，模板，接口，实现得几乎一样。而快应用则自己独立开发，是真正的native架构（其他公司是多webview架构），前端模板又是走vue那套，又没有统一的接口对象，许多经验是不能直接迁移的。最坑的是，由于没有webview，需要自己实现CSS引擎，小米早期为了性能考虑，许多CSS样式不支持的。

下面就展开描述吧

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-*属性，在编译时会发出警告

事件系统

  1. 事件不能冒泡。
  2. 事件不区分onXXX, catchXXX, 与其他小程序不一样，因此建议不想冒泡时一定要自己stopPropagation
  3. input事件中，它的onChange事件相当于onInput事件。
  4. 事件没有pageX, pageY。
  5. 暂时没有touchstart, touchmove, touchend事件，听说下一版有。

其他

  1. 快应用没有页面组件这一概念，为了实现与其他小程序一样的效果，如往下拉，tabBar, 分享，我们是用了一层PageWrapper组件。如果你在app中使用enablePullDownRefresh，因为这会逼使娜娜奇在PageWrapper加一个list, list-item标签。上面提过，list-item很坑的。因此不要在app中使用enablePullDownRefresh，而是在特定的页面的config指定enablePullDownRefresh。
<template>
    <anu-page-wrapper>
        <div>
            <div style="{{props['style1233'] }}"><text>async/await</text></div>
            <div><text>status:</text><text>{{state.status}}</text></div>
            <anu-button>试一试</anu-button>
        </div>
    </anu-page-wrapper>
</template>
  1. 页面组件与普通组件的文件名都统一用index.js，这是方便我们兼容各种小程序的路由系统。
  2. 我们想做日志收集，在App退出时，快应用是触发onDestory事件， 在其他小程序是触发onHide事件。

目前就发现这些，如果大家有新的发现请告通我们。GITHUB提ISSUE或Qtalk找我都行。
https://github.com/RubyLouvre…

    原文作者：司徒正美
    原文地址: https://segmentfault.com/a/1190000017255903
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞