当前位置: 移动技术网 > IT编程>网页制作>CSS > 快应用的开发注意点

快应用的开发注意点

2018年12月19日  | 移动技术网IT编程  | 我要评论

汉方百草堂,凌云仙境官网,cad 64位下载

随着公司越来越多业务线开发快应用,我们总结一下我们这个月开发快应用的心得及给出必要的指导。因为快应用与我们公司的预装策略有关,我们想要手机商预装我们的去哪儿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组件。 快应用的标签都必须有闭标签,如必须写成。如果用娜娜奇,我们会帮你做处理。 快应用有p没有view,其他小程序有view没有p,建议统一使用p,娜娜奇做处理 不支持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。

    

async/await

status:{{state.status}}

试一试

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

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

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网