快应用的开发注意点

59次阅读

共计 2400 个字符,预计需要花费 6 分钟才能阅读完成。

随着公司越来越多业务线开发快应用,我们总结一下我们这个月开发快应用的心得及给出必要的指导。因为快应用与我们公司的预装策略有关,我们想要手机商预装我们的去哪儿 App,那么我们就得帮他们推广一下他们的快应用。至于快应用是否能比微信小程序带来更多流量,那是另一回事了。
快应用目前是由小米公司统一给九大手机商提供技术支持的,因此我们在开发快应用有问题时,直接问小米的人就行了。而小米在早期就开发过类似小程序的东西,因此它的体系与微信小程序出入比较大,像百度,支付宝,头条都是直接抄微信的,网上早有破解微信小程序的代码,因此他们在开发者工具,模板,接口,实现得几乎一样。而快应用则自己独立开发,是真正的 native 架构(其他公司是多 webview 架构),前端模板又是走 vue 那套,又没有统一的接口对象,许多经验是不能直接迁移的。最坑的是,由于没有 webview,需要自己实现 CSS 引擎,小米早期为了性能考虑,许多 CSS 样式不支持的。
下面就展开描述吧
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-* 属性,在编译时会发出警告

事件系统

事件不能冒泡。
事件不区分 onXXX, catchXXX, 与其他小程序不一样,因此建议不想冒泡时一定要自己 stopPropagation

input 事件中,它的 onChange 事件相当于 onInput 事件。
事件没有 pageX, pageY。
暂时没有 touchstart, touchmove, touchend 事件,听说下一版有。

其他
快应用没有页面组件这一概念,为了实现与其他小程序一样的效果,如往下拉,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>

页面组件与普通组件的文件名都统一用 index.js,这是方便我们兼容各种小程序的路由系统。
我们想做日志收集,在 App 退出时,快应用是触发 onDestory 事件,在其他小程序是触发 onHide 事件。

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

正文完
 0