Hippy开发踩坑总结 - 前端

Hippy，是腾讯公司内部自研的一项跨多端的、高性能的技术， 可以理解为一个精简版的浏览器，从底层做了大量工作，抹平了 iOS 和 Android 双端差异，提供了接近 Web 的开发体验，目前上层支持了 React 和 Vue 两套界面框架，前端开发人员可以通过它，将前端代码转换为终端的原生指令，进行原生终端 App 的开发。

同时，Hippy 从底层进行了大量优化，在启动速度、可复用列表组件、渲染效率、动画速度、网络通信等等都提供了业内顶尖的性能表现。

有兴趣的可以看看开源文档：

https://hippyjs.org/#/

hippy技术先是在公司内部游戏中心使用，改版后效果明显，在加载速度、体积、仿原生能力、渲染效率等等方面，都有非常优异的表现，所以这次洞结合版改版，决定采用hippy-vue的技术来试试，这里在前端开发这块，有一些坑点，我总结了一下，希望对其他的开发者们有所帮助。

话不多说，直接上：

一、样式问题

1、css无法继承
2、dom上绑定多个样式时，使用数组的形式：

3、动态改变样式时不能直接修改styles，可以通过新增styles的类型来改变;
4、不能用 line-height: 1.2;
5、要写flex-direction;
6、文字要用p span包着;如果文字要加圆角，则要在外面包一个div，背景颜色写在div里，否则ios下不生效。
7、要求滑动的标签下只能包一个标签，标签下再添加列表项，标签样式：

1. display: flex;
2. flex-direction: row;
3. overflow-x: scroll;

8、终端默认box-sizing: border-box;
9、动态引入本地图片，使用require导入：



10、样式scoped不生效，很可能被其他样式影响;
11、不能使用background-image；
12、ul span p不支持border-radius， 目前发现div img支持；
13、默认 flex 布局，不用声明 display: flex；
14、很多样式缩写不支持**，比如：

• 不支持flex-flow，得写flex-direction和 flex-wrap
• 不支持background，得写background-color
• 不支持border缩写，只能写border-width/border-style/border-color
• 不支持overflow，得写overflow-x, overflow-y

15、div 带着 overflow 属性的，只能有一个子节点，否则终端会崩溃（重点！！！在做滚动功能的时候，使用了overflow-x: scroll时，一定要在列表外再加一层div包裹，否则会直接导致crash ！！！！）
16、overflow-x 水平滚动需要添加 flex-direction: row；
17、flex-direction: row 布局下，最后一个元素设置 margin-left: auto 靠右不生效；
18、不支持auto；
19、animation组件里的playing要让组件在屏幕里时才设为true，才能动起来。否则ios下会不动；
20、不支持伪类；
21、image 类名不生效，需要使用类似 .list img {}的方式；
22、image的展示方式有不标准的属性，resize-mode: stretch|cover|center|contain;

23、不支持百分比单位；

平台问题

1、Android默认overflow为hidden，超出的部分会被直接截断；
2、不支持 none 属性，ios 会在单位转换时报错，string 转换 number 失败；
3、大小不支持百分比，否则会导致 ios 告警；

二、组件问题

1、vue 组件

• router-link 必须加 tag="div"

三、 小技巧

1、经过一定时间才能再响应

1. import Throttle from 'lodash-decorators/throttle';
2. @Throttle(400, { leading: true, trailing: false });