From 5d527a27174cedea7047df2bb266a31d93236201 Mon Sep 17 00:00:00 2001 From: zoomchan-cxj Date: Tue, 16 Aug 2022 19:00:24 +0800 Subject: [PATCH] docs(homepage): fix syntax error --- docs/en-us/android/custom-component.md | 2 +- docs/en-us/android/custom-module.md | 2 +- docs/en-us/web/custom-component.md | 25 ++++++++++++------------- docs/web/custom-component.md | 10 +++++----- 4 files changed, 19 insertions(+), 20 deletions(-) diff --git a/docs/en-us/android/custom-component.md b/docs/en-us/android/custom-component.md index 61336f489..f844b8088 100755 --- a/docs/en-us/android/custom-component.md +++ b/docs/en-us/android/custom-component.md @@ -2,7 +2,7 @@ App development may use a large number of UI components, Hippy SDK has included the commonly used parts, such as `View`, `Text`, `Image`, etc., but it is highly likely that they can not meet your needs, which requires to extend and encapsulate UI components. -# Component Extensions +# Component Extension We will take `MyView` as an example and introduce how to extend components from scratch. diff --git a/docs/en-us/android/custom-module.md b/docs/en-us/android/custom-module.md index db01b3da0..1ba40c9a2 100755 --- a/docs/en-us/android/custom-module.md +++ b/docs/en-us/android/custom-module.md @@ -2,7 +2,7 @@ Sometimes JS need to access some capabilities of the corresponding native modules, such as databases, downloads, network requests, etc., it is necessary to use Module to expose the interface to JS. Hippy SDK implemented some default modules, but it is very likely that they can not meet your needs, which requires you to extend the Module package. -# Module Extensions +# Module Extension We will use TestModule as an example to extend a Module from scratch, this Module will show how the front-end call native capabilities, and return the results to the front-end. diff --git a/docs/en-us/web/custom-component.md b/docs/en-us/web/custom-component.md index 5ea754b3a..5b3a14e93 100644 --- a/docs/en-us/web/custom-component.md +++ b/docs/en-us/web/custom-component.md @@ -2,7 +2,7 @@ In the development of using Hippy, it is possible that the builtin components won't meet the need of certain circumstances. In this case, you can augment the UI components by encapsulation or importing some third-party functionalities inside the components. -# Components Extension +# Component Extension Component extension mainly including: @@ -25,10 +25,10 @@ The HippyView class implements some interfaces and properties of HippyBaseView's ## Example -In the following example, we create a custom componet, called `CustomView`, to display a video. +In the following example, we create a custom component, called `CustomView`, to display a video. * First, initialize the component: - + ```javascript import { HippyView, HippyWebEngine, HippyWebModule } from '@hippy/web-renderer'; @@ -36,8 +36,8 @@ import { HippyView, HippyWebEngine, HippyWebModule } from '@hippy/web-renderer'; // Extends from HippyView class CustomView extends HippyView { // Implement the class constuctor method - constructor(context,id,pId) { - super(context,id,pId); + constructor(context, id, pId) { + super(context, id, pId); // Set the tagName as 'CustomView' // Such that the JS application can set `nativeName="CustomView"` to create a mapping from application to this component. this.tagName = 'CustomView'; @@ -45,16 +45,15 @@ class CustomView extends HippyView { this.dom = document.createElement('video'); } } - ``` * Second, implement the API and related properties for the custom component: -We implement the getter and setter for property `src`. When JS application modifies the property `src`, the setter `set src()` will be triggered and retrive the new `src` value. + We implement the getter and setter for property `src`. When JS application modifies the property `src`, the setter `set src()` will be triggered and retrieve the new `src` value. -We also implement `play` and `pause` class methods. When JS application uses `callUIFunction(this.instance, 'play'/'pause', []);`, these two methods will be called respectively. + We also implement `play` and `pause` class methods. When JS application uses `callUIFunction(this.instance, 'play'/'pause', []);`, these two methods will be called respectively. -In the `pasue()` method, we use `sendUiEvent` to emit a `onPause` event to JS application, those callbacks that subcribe to `onPause` event will be triggered. + In the `pasue()` method, we use `sendUiEvent` to emit a `onPause` event to JS application, those callbacks that subscribe to `onPause` event will be triggered. ```javascript @@ -116,10 +115,10 @@ Node.removeChild(child: T): T; ```javascript class CustomView extends HippyView{ insertChild (child: HippyBaseView, childPosition: number) { - ... + // ... } - removeChild (child: HippyBaseView){ - ... + removeChild (child: HippyBaseView) { + // ... } } ``` @@ -133,7 +132,7 @@ class CustomView extends HippyView{ class CustomView extends HippyView{ updateProps (data: UIProps, defaultProcess: (component: HippyBaseView, data: UIProps) => void) { - ... + // ... } } ``` diff --git a/docs/web/custom-component.md b/docs/web/custom-component.md index 23d131945..db46a5ce9 100755 --- a/docs/web/custom-component.md +++ b/docs/web/custom-component.md @@ -34,8 +34,8 @@ import { HippyView, HippyWebEngine, HippyWebModule } from '@hippy/web-renderer'; // 继承自 `HippyView` class CustomView extends HippyView { // 实现构造方法 - constructor(context,id,pId) { - super(context,id,pId); + constructor(context, id, pId) { + super(context, id, pId); // 设置自定义组件的 `tagName` 为 `CustomView`， // 这样 JS 业务使用的时候就可以设置 `nativeName="CustomView"` 进行关联。 this.tagName = 'CustomView'; @@ -111,10 +111,10 @@ Node.removeChild(child: T): T; ```javascript class CustomView extends HippyView{ insertChild (child: HippyBaseView, childPosition: number) { - ... + // ... } removeChild (child: HippyBaseView){ - ... + // ... } } ``` @@ -127,7 +127,7 @@ class CustomView extends HippyView{ class CustomView extends HippyView{ updateProps (data: UIProps, defaultProcess: (component: HippyBaseView, data: UIProps) => void) { - ... + // ... } } ```