Tencent · zealotchen0 · Nov 7, 2024 · Nov 7, 2024
@@ -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)
@@ -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)
@@ -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
+
+
@@ -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)
@@ -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)
@@ -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"

@@ -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
+
@@ -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` 不支持。

@@ -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)
@@ -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)
@@ -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';
 

@@ -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小助手
+
+
@@ -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

@@ -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 或者其他第三方框架，都可以实现兼容，可参考。
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 或者其他第三方框架，都可以实现兼容，可参考。