Skip to content

Commit

Permalink
chore(doc): add react vue performance doc
Browse files Browse the repository at this point in the history
  • Loading branch information
zealotchen0 committed Nov 7, 2024
1 parent d6aa6b3 commit 334af24
Show file tree
Hide file tree
Showing 16 changed files with 969 additions and 27 deletions.
4 changes: 4 additions & 0 deletions docs/api/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
* [手势系统](api/hippy-react/gesture.md)
* [自定义组件和模块](api/hippy-react/customize.md)
* [转 Web](api/hippy-react/web.md)
* [React 常见反馈](api/hippy-react/feedback.md)
* hippy-vue
* [介绍](api/hippy-vue/introduction.md)
* [核心组件](api/hippy-vue/components.md)
Expand All @@ -19,12 +20,15 @@
* [路由](api/hippy-vue/router.md)
* [转 Web](api/hippy-vue/web.md)
* [Vue 3.x](api/hippy-vue/vue3.md)
* [Vue 常见反馈](api/hippy-vue/feedback.md)
* 样式
* [布局](api/style/layout.md)
* [外观](api/style/appearance.md)
* [颜色](api/style/color.md)
* [变形](api/style/transform.md)
* [更改终端属性](api/style/setNativeProps.md)
* [样式常见反馈](api/style/feedback.md)
* [网络请求](api/network-request.md)
* [性能监控](api/performance.md)
* [定时器](api/timer.md)
* [常见反馈](api/feedback.md)
92 changes: 92 additions & 0 deletions docs/api/feedback.md
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


4 changes: 4 additions & 0 deletions docs/api/hippy-react/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
* [手势系统](api/hippy-react/gesture.md)
* [自定义组件和模块](api/hippy-react/customize.md)
* [转 Web](api/hippy-react/web.md)
* [React 常见反馈](api/hippy-react/feedback.md)
* hippy-vue
* [介绍](api/hippy-vue/introduction.md)
* [核心组件](api/hippy-vue/components.md)
Expand All @@ -19,12 +20,15 @@
* [路由](api/hippy-vue/router.md)
* [转 Web](api/hippy-vue/web.md)
* [Vue 3.x](api/hippy-vue/vue3.md)
* [Vue 常见反馈](api/hippy-vue/feedback.md)
* 样式
* [布局](api/style/layout.md)
* [外观](api/style/appearance.md)
* [颜色](api/style/color.md)
* [变形](api/style/transform.md)
* [更改终端属性](api/style/setNativeProps.md)
* [样式常见反馈](api/style/feedback.md)
* [网络请求](api/network-request.md)
* [性能监控](api/performance.md)
* [定时器](api/timer.md)
* [常见反馈](api/feedback.md)
10 changes: 8 additions & 2 deletions docs/api/hippy-react/customize.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,20 @@ export class MyView extends React.Component {

# 自定义模块

> 该范例仅可以在 Android 下运行。
前端扩展模块分为三步:

1. 第一步导入 callNative 或者 callNativeWithPromise 接口
2. 封装调用接口
3. 导出模块

注: callNative 代表前端调用客户端接口,无需返回
callNativeWithPromise 代表前端调用客户端接口,需要返回,返回一个 Promise 对象

callNtive/callNativeWithPromise 参数含义:
moduleName: 代表和终端约定的模块名字,为 string 类型
functionName: 代表和终端约定的模块函数名字,为 string 类型
params: 实际携带参数, 为 Object 类型

```javascript
// TestModule.js
import { callNative, callNativeWithPromise } from "@hippy/react"
Expand Down
18 changes: 18 additions & 0 deletions docs/api/hippy-react/feedback.md
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

4 changes: 4 additions & 0 deletions docs/api/hippy-react/modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -433,6 +433,10 @@ AsyncStorage 是一个简单的、异步的、持久化的 Key-Value 存储系
> - method:方法名称,如 ListView 的 `scrollToIndex`
> - options: 需传递的数据,如 ListView 的 `[xIndex, yIndex, animated]`,空时显式写 `[]`
注: 也可以传入 callback 参数,这个是 Hippy 内部 API, 不推荐使用,源码可参考:

[callUIFunction接口实现源码](https://github.com/Tencent/Hippy/blob/main/driver/js/packages/hippy-react/src/modules/ui-manager-module.ts)

### UIManagerModule.getElementFromFiberRef

获取元素 Ref 对应的 Element(类似DOM)。`hippy-react-web` 不支持。
Expand Down
3 changes: 3 additions & 0 deletions docs/api/hippy-vue/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
* [手势系统](api/hippy-react/gesture.md)
* [自定义组件和模块](api/hippy-react/customize.md)
* [转 Web](api/hippy-react/web.md)
* [常见反馈](api/hippy-react/feedback.md)
* hippy-vue
* [介绍](api/hippy-vue/introduction.md)
* [核心组件](api/hippy-vue/components.md)
Expand All @@ -19,12 +20,14 @@
* [路由](api/hippy-vue/router.md)
* [转 Web](api/hippy-vue/web.md)
* [Vue 3.x](api/hippy-vue/vue3.md)
* [常见反馈](api/hippy-vue/feedback.md)
* 样式
* [布局](api/style/layout.md)
* [外观](api/style/appearance.md)
* [颜色](api/style/color.md)
* [变形](api/style/transform.md)
* [更改终端属性](api/style/setNativeProps.md)
* [常见反馈](api/style/feedback.md)
* [网络请求](api/network-request.md)
* [性能监控](api/performance.md)
* [定时器](api/timer.md)
10 changes: 8 additions & 2 deletions docs/api/hippy-vue/customize.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,16 @@ component: {

# 自定义模块

> 该范例仅可以在 Android 下运行。
hippy-vue 的模块其实只是一个 `Vue.Native.callNative` 调用,写个 `function` 即可。

注: callNative 代表前端调用客户端接口,无需返回
callNativeWithPromise 代表前端调用客户端接口,需要返回,返回一个 Promise 对象

callNtive/callNativeWithPromise 参数含义:
moduleName: 代表和终端约定的模块名字,为 string 类型
functionName: 代表和终端约定的模块函数名字,为 string 类型
params: 实际携带参数, 为 Object 类型

```js
import Vue from 'vue';

Expand Down
28 changes: 28 additions & 0 deletions docs/api/hippy-vue/feedback.md
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小助手


4 changes: 4 additions & 0 deletions docs/api/hippy-vue/vue-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,10 @@ Vue.Native.AsyncStorage.getItem('itemKey');
> * method:方法名称,如 ListView 的 `scrollToIndex`
> * options: 需传递的数据,如 ListView 的 `[xIndex, yIndex, animated]`
注: 也可以传入 callback 参数,这个是 Hippy 内部 API, 不推荐使用,源码可参考:

[callUIFunction接口实现源码](https://github.com/Tencent/Hippy/blob/main/driver/js/packages/hippy-vue/src/runtime/native.ts)

---

# Clipboard
Expand Down
2 changes: 1 addition & 1 deletion docs/api/hippy-vue/web.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

## WebRenderer 方案

Hippy 全新 [`WebRenderer`](web/integration.md) 方案,增加基于公共通信协议的转换层,业务开发者可以使用同一套 Hippy 语法开发的业务代码,映射成 JS 实现的组件和模块,上层无论使用 React,Vue 或者其他第三方框架,都可以实现兼容,可参考。
Hippy 全新 [`WebRenderer`](development/web-integration-guidelines.md) 方案,增加基于公共通信协议的转换层,业务开发者可以使用同一套 Hippy 语法开发的业务代码,映射成 JS 实现的组件和模块,上层无论使用 React,Vue 或者其他第三方框架,都可以实现兼容,可参考。
Loading

0 comments on commit 334af24

Please sign in to comment.