From ba60e2b83bd101616eac8efc14d6c1fcbf527cb3 Mon Sep 17 00:00:00 2001 From: zoomchan-cxj Date: Fri, 16 Apr 2021 16:48:07 +0800 Subject: [PATCH] chore(docs): perf document --- README.md | 28 ++++++++------- README.zh_CN.md | 36 +++++++++---------- docs/guide/debug.md | 10 +++--- docs/hippy-react/components.md | 8 ++--- docs/hippy-vue/components.md | 8 ++--- .../src/components/pull-header.tsx | 5 +-- packages/hippy-vue-css-loader/src/index.js | 3 +- .../src/animation.js | 4 +-- .../hippy-vue-native-components/src/pulls.js | 2 ++ 9 files changed, 54 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 0cc3078ec1a..3c253051ae1 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,8 @@ Hippy │   ├── hippy-vue # Vue binding for Hippy. │   ├── hippy-vue-css-loader # Webpack loader for convert CSS text to JS AST. │   ├── hippy-vue-native-components # Native components extensions for hippy-vue. -│   └── hippy-vue-router # Vue router for hippy-vue. +│   ├── hippy-vue-router # Vue router for hippy-vue. +│   └── types # Global type definition. ├── ios │   └── sdk # iOS SDK ├── android @@ -44,7 +45,6 @@ Hippy ├── core # JS modules implemented by C++, binding to JS engine. ├── layout # Hippy layout engine. ├── scripts # Project build script. -└── types # Global type definition. ``` ## Getting started @@ -72,14 +72,15 @@ For Windows developers: For iOS we recommend to use iOS simulator when first try, however, you may change the Xcode configuration to install the app to iPhone if you are an iOS expert. -1. Install the dependencies with `npm install`. -2. Install dependencies of each npm package with `lerna bootstrap`. +1. Install the dependencies at root directory with `npm install`. +2. Install dependencies of each npm package at root directory with `lerna bootstrap`. + （Hippy uses [Lerna](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.） 3. Build the front-end sdk packages at root directory with `npm run build`. -4. Choose a demo to build with `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`. +4. Choose a demo to build with `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]` at root directory. 5. Start the Xcode and build the iOS app with `open examples/ios-demo/HippyDemo.xcodeproj`. -6. `cd` to `examples` hippy-react-demo or hippy-vue-demo, run `npm run hippy:dev` and `npm run hippy:debug` respectively to start the live debug mode +6. `cd` to `examples` hippy-react-demo or hippy-vue-demo, run `npm install` to install demo js dependencies, then run `npm run hippy:dev` and `npm run hippy:debug` respectively to start the live debug mode -On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `packages` > `[different package]` >`dist`, so if you have changed package source code and make it take effect in examples, please call `npm run build` at root directory again. +On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `packages` > `[different package]` >`dist`, so if you have changed package source code and want to make it take effect in examples, please call `npm run build` at root directory again. ### Start the android app with hippy-react or hippy-vue demo @@ -87,16 +88,17 @@ For Android we recommend to use the real cellphone for better experience, becaus Before build the android app, please make sure the SDK and NDK is installed, And *DO NOT* update the build toolchain. -1. Install the dependencies with `npm install`. -2. Install dependencies of each npm package with `lerna bootstrap`. +1. Install the dependencies at root directory with `npm install`. +2. Install dependencies of each npm package at root directory with `lerna bootstrap`. + （Hippy uses [Lerna](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.） 3. Build the front-end sdk packages at root directory with `npm run build`. -4. Open a terminal, then build the hippy-react demo with `npm run buildexample -- hippy-react-demo`, or build the hippy-vue demo with `npm run buildexample -- hippy-vue-demo` . +4. Choose a demo to build with `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]` at root directory. 5. Open the `examples/android-demo` with Android Studio. -6. Connect android phone with USB cable and make sure USB debugging mode and USB installation are enabled. +6. Connect Android phone with USB cable and make sure USB debugging mode and USB installation are enabled. 7. Open the project with Android Studio, run and install the apk. -8. `cd` to hippy-react-demo or hippy-vue-demo, run `npm run hippy:dev` and `npm run hippy:debug` respectively to start the live debug mode. +8. `cd` to `examples` hippy-react-demo or hippy-vue-demo, run `npm install` to install demo js dependencies, then run `npm run hippy:dev` and `npm run hippy:debug` respectively to start the live debug mode. -On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `packages` > `[different package]` >`dist`, so if you have changed package source code and make it take effect in examples, please call `npm run build` at root directory again. +On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `packages` > `[different package]` >`dist`, so if you have changed package source code and want to make it take effect in examples, please call `npm run build` at root directory again. > If you encounter the issue of `No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android`, here is the [solution](https://github.com/google/filament/issues/15#issuecomment-415423557). diff --git a/README.zh_CN.md b/README.zh_CN.md index 82534cf7aff..c798d103c3b 100644 --- a/README.zh_CN.md +++ b/README.zh_CN.md @@ -6,9 +6,9 @@ ## 介绍 -Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写一套代码就直接运行于三个平台（iOS、Android 和 Web）。Hippy 的设计是面向传统 Web 开发者的，特别是之前有过 React Native 和 Vue 的开发者用起来会更为顺手，Hippy 致力于让前端开发跨端 App 更加容易。 +Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写一套代码就直接运行于三个平台（iOS、Android 和 Web）。Hippy 的设计是面向传统 Web 开发者的，特别是之前有过 React Native 和 Weex 开发经验的开发者用起来会更为顺手，Hippy 致力于让前端开发跨端 App 更加容易。 -到目前为止，[腾讯](http://www.tencent.com/)内已经有了27款流行 App 在使用 Hippy 框架，包括手机QQ、手机QQ浏览器、腾讯视频App，QQ音乐App等，每日触达数亿用户。 +到目前为止，[腾讯](http://www.tencent.com/)内已经有 27 款主流 App 在使用 Hippy 框架，包括手机QQ、手机QQ浏览器、腾讯视频App，QQ音乐App等，每日触达数亿用户。 ## 特征 @@ -19,7 +19,7 @@ Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写 * 皆可平滑迁移到 Web 浏览器。 * 完整支持 Flex 的[布局引擎](./layout)。 -## Project structure +## 项目结构 ```text Hippy @@ -35,7 +35,8 @@ Hippy │   ├── hippy-vue # Hippy 的 Vue 语法绑定。 │   ├── hippy-vue-css-loader # 用来将 CSS 文本转换为 JS 语法树以供解析的 Webpack loader。 │   ├── hippy-vue-native-components # hippy-vue 中浏览器中所没有的，额外的，终端定制组件。 -│   └── hippy-vue-router # 在 hippy-vue 中运行的 vue-router。 +│   ├── hippy-vue-router # 在 hippy-vue 中运行的 vue-router。 +│   └── types # 全局 Typescript 类型 ├── ios │   └── sdk # iOS SDK。 ├── android @@ -44,7 +45,6 @@ Hippy ├── core # C++ 实现的 JS 模块，通过 Binding 方式运行在 JS 引擎中。 ├── layout # Hippy 布局引擎。 ├── scripts # 项目编译脚本。 -└── types # 全局 Typescript 类型定义。 ``` ## 开始 @@ -72,14 +72,14 @@ Windows 用户需要以下软件: 我们推荐 iOS 开发者使用模拟器来进行开发和调试工作，当然如果你是一个 iOS 开发高手，也可以通过修改配置将 Hippy app 安装到手机上。 -1. 安装前端依赖，根目录运行命令：`npm install`。 -2. 通过 lerna 安装前端每一个package依赖: `lerna bootstrap`。 -3. 编译前端 SDK 包，根目录运行命令： `npm run build`。 -4. 选择一个前端范例项目来进行编译：`npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。 +1. 项目根目录运行命令 `npm install` 安装前端依赖。 +2. 项目根目录运行命令 `lerna bootstrap` 安装前端每一个 package 依赖。（Hippy 采用 [Lerna](https://lerna.js.org/) 管理多JS仓库，如果出现 `lerna command is not found`, 先执行 `npm install lerna -g`） +3. 项目根目录运行命令 `npm run build` 编译前端 SDK 包。 +4. 选择一个前端范例项目来进行编译，项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。 5. 启动 Xcode 并且开始编译终端 App：`open examples/ios-demo/HippyDemo.xcodeproj`。 -6. cd 到 hippy-react-demo 或者 hippy-vue-demo 目录，分别执行 `npm run hippy:dev` 和 `npm run hippy:debug`, 即开启实时 Debug 模式。 +6. `cd` 到 `examples` hippy-react-demo 或者 hippy-vue-demo 目录，先执行 `npm install` 安装 demo 的依赖包，再分别执行 `npm run hippy:dev` 和 `npm run hippy:debug`, 即开启实时 Debug 模式。 -在 example 调试模式下，@hippy/react、@hippy/vue等的npm模块会直接链接到 `packages` > `[different package]` >`dist` 下面，所以如果你修改了package下的源代码并且想让其在example中生效，请重新在根目录执行 `npm run build`。 +在 example 调试模式下，@hippy/react、@hippy/vue 等 npm 模块会直接链接到 `packages` > `[different package]` > `dist` 目录下面的js文件，所以如果你修改了 packages 下的源代码并且想让其在 example 中生效，请重新在根目录执行 `npm run build`。 ### 启动 Android App 来测试 hippy-react 或者 hippy-vue 范例 @@ -87,16 +87,16 @@ Windows 用户需要以下软件: 在开始前请确认好 SDK 和 NDK 都安装了范例的指定版本，并且**请勿**更新编译工具链。 -1. 安装前端依赖，运行命令：`npm install`。 -2. 通过 lerna 安装前端每一个 package 依赖: `lerna bootstrap`。 -3. 编译前端 SDK 包，根目录运行命令： `npm run build`。 -4. 打开一个命令行程序，并选择 hippy-react 范例项目进行编译：`npm run buildexample hippy-react-demo`，或者编译 hippy-vue 范例项目 `npm run buildexample hippy-vue-demo`。 +1. 项目根目录运行命令 `npm install` 安装前端依赖。 +2. 项目根目录运行命令 `lerna bootstrap` 安装前端每一个 package 依赖。（Hippy 采用 [Lerna](https://lerna.js.org/) 管理多JS仓库，如果出现 `lerna command is not found`, 先执行 `npm install lerna -g`） +3. 项目根目录运行命令 `npm run build` 编译前端 SDK 包。 +4. 选择一个前端范例项目来进行编译，项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。 5. 用 Android Studio 来打开终端范例工程 `examples/android-demo`。 6. 用 USB 数据线插上你的 Android 手机，需要确认手机打开 USB 调试模式和 USB 安装。 -7. 运行工程，并安装 apk。 -8. cd 到 hippy-react-demo 或者 hippy-vue-demo 目录，分别执行 `npm run hippy:dev` 和 `npm run hippy:debug`, 即开启实时 Debug 模式。 +7. 运行工程，并安装 APK。 +8. `cd` 到 `examples` hippy-react-demo 或者 hippy-vue-demo 目录，先执行 `npm install` 安装 demo 的依赖包，再分别执行 `npm run hippy:dev` 和 `npm run hippy:debug`, 即开启实时 Debug 模式。 -在 example 调试模式下，@hippy/react、@hippy/vue等的npm模块会直接链接到 `packages` > `[different package]` >`dist` 下面，所以如果你修改了package下的源代码并且想让其在example中生效，请重新在根目录执行 `npm run build`。 +在 example 调试模式下，@hippy/react、@hippy/vue 等 npm 模块会直接链接到 `packages` > `[different package]` > `dist` 目录下面的js文件，所以如果你修改了 packages 下的源代码并且想让其在 example 中生效，请重新在根目录执行 `npm run build`。 > 如果 Android Studio 报了这个错误 `No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android`，这里有[解决办法](https://github.com/google/filament/issues/15#issuecomment-415423557)。 diff --git a/docs/guide/debug.md b/docs/guide/debug.md index 1ce894d1c00..cdceb9dde01 100644 --- a/docs/guide/debug.md +++ b/docs/guide/debug.md @@ -10,10 +10,10 @@ Hippy中运行的JS代码可以来源于本地文件(local file)，或者远程 # 项目初始化 -1. 安装前端依赖，根目录运行命令：`npm install`。 -2. 通过 lerna 安装前端每一个package依赖: `lerna bootstrap`。 -3. 编译前端 SDK 包，根目录运行命令： `npm run build`。 -4. 选择一个前端范例项目来进行编译：`npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。 +1. 项目根目录运行命令 `npm install` 安装前端依赖。 +2. 项目根目录运行命令 `lerna bootstrap` 安装前端每一个 package 依赖。（Hippy 采用 [Lerna](https://lerna.js.org/) 管理多JS仓库，如果出现 `lerna command is not found`, 先执行 `npm install lerna -g`） +3. 项目根目录运行命令 `npm run build` 编译前端 SDK 包。 +4. 选择一个前端范例项目来进行编译，项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。 # 终端环境准备 @@ -37,7 +37,7 @@ Hippy中运行的JS代码可以来源于本地文件(local file)，或者远程 1. 点击 [Xcode on Mac AppStore](//apps.apple.com/cn/app/xcode/id497799835?l=en&mt=12) 下载安装 Xcode。 2. 使用 Xcode 打开[Hippy iOS 范例工程](//github.com/Tencent/Hippy/tree/master/examples/ios-demo) 中的 `HippyDemo.xcodeproj` 工程文件，并点击运行，正常情况下应该可以启动模拟器，并运行之前内置的 Hippy 前端代码。 -3. 打开前端范例工程 [hippy-react-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo) 或者 [hippy-vue-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)，通过 `npm i` 安装完依赖之后，使用 `npm run hippy:dev` 启动编译，并另开一个终端窗口，运行 `npm run hippy:debug` 启动调试服务。 +3. 打开 `examples` 下的前端范例工程 [hippy-react-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo) 或者 [hippy-vue-demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)，通过 `npm i` 安装完依赖之后，使用 `npm run hippy:dev` 启动编译，并另开一个终端窗口，运行 `npm run hippy:debug` 启动调试服务。 4. 回到模拟器，点击前端工程中的调试按钮，即可进入调试状态。hippy-react 有一个单独的页面，hippy-vue 在右上角。以 hippy-react 为例： ![iOS 模拟器](//puui.qpic.cn/vupload/0/1577796352672_tmjp70r3bma.png/0) diff --git a/docs/hippy-react/components.md b/docs/hippy-react/components.md index 8e806b28488..1388275dba7 100644 --- a/docs/hippy-react/components.md +++ b/docs/hippy-react/components.md @@ -407,13 +407,13 @@ import icon from './qb_icon_new.png'; | opacity | 配置 `View` 的透明度，同时会影响子节点的透明度。 | `number` | `ALL` | | onLayout | 当元素挂载或者布局改变的时候调用，参数为： `{ nativeEvent: { layout: { x, y, width, height } } }`。 | `Function` | `ALL` | | onClick | 当文本被点击以后调用此回调函数。 例如， `onClick={() => console.log('onClick') }` | `Function` | `ALL` | -| ellipsizeMode* | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以，在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。 | `enum`(head, middle, tail, clip)| `ALL` | +| ellipsizeMode* | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。 | `enum`(head, middle, tail, clip)| `Android 仅支持 tail 属性，iOS 全支持` | * ellipsizeMode 的参数含义： - * `head` - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 `Text` 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”； - * `middle` - "文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz” + * `clip` - 超过指定行数的文字会被直接截断，不显示“...”；（仅iOS支持） + * `head` - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 `Text` 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”；（仅iOS支持） + * `middle` - "文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz”；（仅iOS支持） * `tail` - 文字将会从最后开始截断，保证字符串的最前的文字可以正常显示在 Text 组件的最前，而从最后给截断的文字，将以 “...” 代替，例如 “abcd...”； - * `clip` - 超过指定行数的文字会被直接截断，不显示“...”， # View diff --git a/docs/hippy-vue/components.md b/docs/hippy-vue/components.md index 078330b522b..48b54dec735 100644 --- a/docs/hippy-vue/components.md +++ b/docs/hippy-vue/components.md @@ -296,13 +296,13 @@ ul 的子节点，终端层节点回收和复用的最小颗粒度。 | numberOfLines | 用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。 | `number` | `ALL` | | opacity | 配置 `View` 的透明度，同时会影响子节点的透明度。 | `number` | `ALL` | | onClick | 当文本被点击以后调用此回调函数。 例如， `onClick={() => console.log('onClick') }` | `Function` | `ALL` | -| ellipsizeMode* | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以，在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。 | `enum`(head, middle, tail, clip)| `ALL` | +| ellipsizeMode* | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。 | `enum`(head, middle, tail, clip)| `Android 仅支持 tail 属性，iOS 全支持` | * ellipsizeMode 的参数含义： - * `head` - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 `Text` 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”； - * `middle` - "文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz” + * `clip` - 超过指定行数的文字会被直接截断，不显示“...”；（仅iOS支持） + * `head` - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 `Text` 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”；（仅iOS支持） + * `middle` - "文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz”；（仅iOS支持） * `tail` - 文字将会从最后开始截断，保证字符串的最前的文字可以正常显示在 Text 组件的最前，而从最后给截断的文字，将以 “...” 代替，例如 “abcd...”； - * `clip` - 超过指定行数的文字会被直接截断，不显示“...”， # span diff --git a/packages/hippy-react/src/components/pull-header.tsx b/packages/hippy-react/src/components/pull-header.tsx index f1bf379ad20..6a092003501 100644 --- a/packages/hippy-react/src/components/pull-header.tsx +++ b/packages/hippy-react/src/components/pull-header.tsx @@ -6,7 +6,7 @@ import { callUIFunction } from '../modules/ui-manager-module'; import { Device } from '../native'; interface CollapsePullHeaderOptions { - // time left when PullHeader collapses, unit is ms + // time left to hide pullHeader after collapsePullHeader() is called, unit is ms time?: number, } @@ -37,12 +37,13 @@ class PullHeader extends React.Component { /** * Collapse the PullView and hide the content - * @param options + * @param {CollapsePullHeaderOptions} [options] - additional config for pull header */ collapsePullHeader(options: CollapsePullHeaderOptions) { if (Device.platform.OS === 'android') { callUIFunction(this.instance as Fiber, 'collapsePullHeader', [options]); } else { + // iOS is not supported if param invalid, so create a new function name for compatibility if (typeof options !== 'undefined') { callUIFunction(this.instance as Fiber, 'collapsePullHeaderWithOptions', [options]); } else { diff --git a/packages/hippy-vue-css-loader/src/index.js b/packages/hippy-vue-css-loader/src/index.js index e6746841b18..798ad7f6dfd 100644 --- a/packages/hippy-vue-css-loader/src/index.js +++ b/packages/hippy-vue-css-loader/src/index.js @@ -15,7 +15,7 @@ function hippyVueCSSLoader(source) { const parsed = parseCSS(source, { source: sourceId }); sourceId += 1; const rulesAst = parsed.stylesheet.rules.filter(n => n.type === 'rule').map((n) => { - const rule = { + return { selectors: n.selectors, declarations: n.declarations.map((dec) => { let { value } = dec; @@ -30,7 +30,6 @@ function hippyVueCSSLoader(source) { }; }), }; - return rule; }); const code = `(function() { if (!global['${GLOBAL_STYLE_NAME}']) { diff --git a/packages/hippy-vue-native-components/src/animation.js b/packages/hippy-vue-native-components/src/animation.js index 8c61fc8844f..9e003592e2b 100644 --- a/packages/hippy-vue-native-components/src/animation.js +++ b/packages/hippy-vue-native-components/src/animation.js @@ -17,8 +17,8 @@ function registerAnimation(Vue) { /** * parse value of special value type - * @param valueType - * @param originalValue + * @param {string} valueType + * @param {*} originalValue */ function parseValue(valueType, originalValue) { if (valueType === 'color' && ['number', 'string'].indexOf(typeof originalValue) >= 0) { diff --git a/packages/hippy-vue-native-components/src/pulls.js b/packages/hippy-vue-native-components/src/pulls.js index 5279c59c433..c937200a7e3 100644 --- a/packages/hippy-vue-native-components/src/pulls.js +++ b/packages/hippy-vue-native-components/src/pulls.js @@ -46,6 +46,8 @@ function registerPull(Vue) { }, /** * Collapse the PullView and hide the content + * @param {Object} [options] additional config for pull header + * @param {number} [options.time] time left to hide pullHeader after collapsePullHeader() called, unit is ms */ [`collapsePull${capitalCase}`](options) { if (capitalCase === 'Header') {