-
Notifications
You must be signed in to change notification settings - Fork 947
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(doc): add react vue performance doc
- Loading branch information
1 parent
d6aa6b3
commit 334af24
Showing
16 changed files
with
969 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
# 常见反馈 | ||
|
||
## 1. Hippy提供了@hippy/react-web和Web Renderer两套方案,哪一套方案转web的能力更完整一些呢?Hippy后续会重点支持哪一个方向? | ||
|
||
两套方案都有一些业务在用, 组件和属性支持可以参考这两个文档 | ||
|
||
https://iwiki.woa.com/p/1478044741 | ||
|
||
https://iwiki.woa.com/p/1410007954 | ||
|
||
Hippy 会继续维护 Web Renderer,基于 Web Render,更容易对接 kbone 等来扩展小程序 | ||
|
||
## 2. Hippy 如何支持小程序 | ||
|
||
可以Hippy 对接 Kbone、taro、uniapp 等框架,腾讯内部业务可参考其他[业务方案](https://doc.weixin.qq.com/doc/w3_ANsAsgZ1ACcxxR1G3KPR0K85XYnmP?scode=AJEAIQdfAAoD1a4bp0ANsAsgZ1ACc): | ||
|
||
## 3. Hippy 的组件库有推荐吗 | ||
|
||
[开源仓库](https://github.com/hippy-contrib) | ||
|
||
[腾讯内部仓库](https://raftx.woa.com/hippy) | ||
|
||
## 4. Hippy 如何做曝光上报 | ||
|
||
目前 Hippy 还没有对外的曝光上报方案,腾讯内部的业务,可以使用大同来做曝光上报 | ||
|
||
### 方案 | ||
|
||
hippy本质上使用的还是客户端原生组件 以及一部分自绘组件。客户端已集成的的大同sdk能够对原生组件、Activity等做检测上报,自然也可以对hippy的组件做检测上报。重点处理上报id绑定到组件的逻辑就可以。 | ||
|
||
### 接入指引 | ||
|
||
[Hippy Android 曝光上报指引](https://iwiki.woa.com/p/956352478) | ||
|
||
[Hippy iOS 曝光上报指引](https://iwiki.woa.com/p/589637144) | ||
|
||
有疑问可以咨询企业微信 TDF小助手 | ||
|
||
|
||
## 5. 启动时, Hippy 如何从终端获取参数 | ||
|
||
React 通过根节点的 props 获取启动参数 | ||
|
||
Vue 通过 Vue.$start 回调获取启动参数 | ||
|
||
## 6. Hippy 页面支持 width: auto 吗 | ||
|
||
不支持的,可以用imageloader加载读图片尺寸,https://hippyjs.org/#/hippy-vue/vue-native?id=imageloader | ||
|
||
## 7. Hippy 背景透明是否支持毛玻璃效果呢 | ||
|
||
腾讯业务可参考[社区组件](https://raftx.woa.com/hippy/detail/578) | ||
|
||
## 8. Hippy 如何实现暗黑模式 | ||
|
||
有两种方案: | ||
|
||
方案一:设置2套css属性,然后切换时整体切换,性能较差 | ||
|
||
方案二:初始化节点时,把两套属性都带下去,然后终端渲染时切换 | ||
|
||
## 9. Hippy 有提供类似 IntersectionObserver 方法吗 | ||
|
||
react 还不支持,vue有封装了一个,可以参考封装下 [hippy-vue-intersection-observer](https://www.npmjs.com/package/hippy-vue-intersection-observer) 不过这个库是基于hippy的Measure API实现的,对bridge通信性能会有一定性能影响,使用时注意评估下 | ||
|
||
## 10. Hippy 有 Clipboard 的复制剪切功能吗 | ||
|
||
剪切板相关的能力应该是在3.2移出的,其他版本可以参考文档:https://github.com/Tencent/Hippy/blob/v2.15.x/docs/hippy-react/modules.md#clipboard | ||
|
||
## 11. 我们现在前端用的是React技术栈,我们想一部分业务用Vue,一部分业务用React,Hippy支持这种用法吗 | ||
|
||
支持的,但是react 和 vue得是不同的hippy引擎实例 | ||
|
||
## 12. Hippy 如何判断横屏 | ||
|
||
进入app后,横屏切换会触发 onSizeChanged 事件 | ||
|
||
进入app前已经横屏,这个可以读 Vue.Native.Dimensions ,获取当前窗口长宽来计算,可以参考这个帖子 https://mk.woa.com/q/293192?ADTAG=search | ||
|
||
## 13. Hippy 图片必须要设定宽高吗?希望宽度和父级view一样,高度自适应怎么写呢 | ||
|
||
可以用 ImageLoaderModule.getSize 这个接口先获取图片大小 https://hippyjs.org/#/hippy-react/modules?id=imageloadermodule | ||
|
||
## 14. 执行报错 startBatch is not a function, 可能是什么原因 | ||
|
||
startBatch是 Hippy2 才有的版本,如果前端使用 Hippy2 终端使用 Hippy3 会不兼容,检查下@hippy/hippy-vue 的版本,确保和终端版本一致 | ||
|
||
## 15. Hippy 是否支持动态加载 | ||
|
||
支持,参考 https://doc.openhippy.com/#/feature/feature2.0/dynamic-import | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
# Hippy-React 常见反馈 | ||
|
||
## 1. 如何开始一个hippy react 项目 | ||
|
||
可以先参考我们的文档 和 demo | ||
|
||
https://hippyjs.org/#/hippy-react/introduction | ||
|
||
https://github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo | ||
|
||
## 2. Hippy 是否支持 React 函数式写法 | ||
|
||
目前 Hippy 已适配 React 17,已支持函数式写法,未来会持续 React 18、9 | ||
|
||
## 3. Hippy-React支持class吗,就向下面这样传统react开发一样 | ||
|
||
Hippy-React 不支持 classname, 只能通过内联 Style | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
# Hippy-Vue 常见反馈 | ||
|
||
## 1. 如何开始一个hippy vue 项目 | ||
|
||
可以先参考我们的文档 和 demo | ||
|
||
https://hippyjs.org/#/hippy-vue/introduction | ||
https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo | ||
|
||
## 2. Hippy Vue中span的换行符会被 trim | ||
|
||
3.x hippy-vue的版本,Hippy默认开启了 Vue.config.trimWhitespace 这个参数。而 hippy-vue 2.x的版本是不开的, 这个也是为了和未来 vue3 版本的规划对齐 | ||
https://github.com/vuejs/core/pull/1600 | ||
|
||
方案建议: | ||
a. 在 hippy.js 文件加一句 Vue.config.trimWhitespace = false,这样配置就和安卓版本完全对齐了。这个参数会对产物有一些影响,也可以让你们前端同事再重新评估一下。 | ||
|
||
b. 因为现在 hippy 没有提供换行组件 br标签 或者 white-space 的 css,如果需要换行,则不适用span,而是重新创建一个 text文本组件 | ||
|
||
## 3. hippy-vue-next-style-parser,这个包的作用 | ||
|
||
这个包用于处理 vue-next 的 css parse 和 match 逻辑 | ||
|
||
## 4. Hippy 是否支持 Vite 构建 | ||
|
||
已支持,目前只有腾讯内部版,腾讯业务可联系 TDF小助手 | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.