diff --git a/packages/shared/src/template.ts b/packages/shared/src/template.ts
index 2302178dfc90..8908b3feed0c 100644
--- a/packages/shared/src/template.ts
+++ b/packages/shared/src/template.ts
@@ -227,6 +227,8 @@ export class BaseTemplate {
         return str + `bind${value}="eh" `
       } else if (attr === 'class') {
         return str + `class="{{i.${Shortcuts.Class}}}" `
+      } else if (attr === 'style') {
+        return str + `style="{{i.${Shortcuts.Style}}}" `
       }
 
       return str + `${attr}="{{i.${toCamelCase(attr)}}}" `
diff --git a/packages/taro-components-rn/src/components/Input/PropsType.tsx b/packages/taro-components-rn/src/components/Input/PropsType.tsx
index b0d5f96f1c15..f43757f28501 100644
--- a/packages/taro-components-rn/src/components/Input/PropsType.tsx
+++ b/packages/taro-components-rn/src/components/Input/PropsType.tsx
@@ -34,6 +34,8 @@ export interface InputProps extends FormItemProps{
   cursor?: number;
   selectionStart: number;
   selectionEnd: number;
+  placeholderStyle?: string;
+  placeholderTextColor?: string;
   onInput?: (evt: Event) => void;
   onChange?: (evt: Event) => void;
   onFocus?: (evt: Event) => void;
diff --git a/packages/taro-components-rn/src/components/Input/index.tsx b/packages/taro-components-rn/src/components/Input/index.tsx
index bfe099985c65..81c97bee01c8 100644
--- a/packages/taro-components-rn/src/components/Input/index.tsx
+++ b/packages/taro-components-rn/src/components/Input/index.tsx
@@ -33,7 +33,7 @@ import {
   TextInputContentSizeChangeEventData,
   KeyboardTypeOptions
 } from 'react-native'
-import { noop, omit } from '../../utils'
+import { noop, omit, parseStyles } from '../../utils'
 import { InputProps, InputState } from './PropsType'
 
 const keyboardTypeMap: { [key: string]: string } = {
@@ -193,8 +193,8 @@ class _Input extends React.Component<InputProps, InputState> {
       _autoHeight,
       autoFocus,
       focus,
+      placeholderStyle,
     } = this.props
-
     const keyboardType: KeyboardTypeOptions = keyboardTypeMap[type] as KeyboardTypeOptions
 
     const selection = (() => {
@@ -210,30 +210,36 @@ class _Input extends React.Component<InputProps, InputState> {
     // fix: https://reactnative.dev/docs/textinput#multiline
     const textAlignVertical = _multiline ? 'top' : 'auto'
 
+    const placeholderTextColor = this.props.placeholderTextColor || parseStyles(placeholderStyle)?.color
+
+    const props = omit(this.props, [
+      'style',
+      'value',
+      'type',
+      'password',
+      'placeholder',
+      'disabled',
+      'maxlength',
+      'confirmType',
+      'confirmHold',
+      'cursor',
+      'selectionStart',
+      'selectionEnd',
+      'onInput',
+      'onFocus',
+      'onBlur',
+      'onKeyDown',
+      'onConfirm',
+      '_multiline',
+      '_autoHeight',
+      '_onLineChange',
+      'placeholderStyle',
+      'placeholderTextColor',
+    ])
+
     return (
       <TextInput
-        {...omit(this.props, [
-          'style',
-          'value',
-          'type',
-          'password',
-          'placeholder',
-          'disabled',
-          'maxlength',
-          'confirmType',
-          'confirmHold',
-          'cursor',
-          'selectionStart',
-          'selectionEnd',
-          'onInput',
-          'onFocus',
-          'onBlur',
-          'onKeyDown',
-          'onConfirm',
-          '_multiline',
-          '_autoHeight',
-          '_onLineChange'
-        ])}
+        {...props}
         defaultValue={value}
         keyboardType={keyboardType}
         secureTextEntry={!!password}
@@ -255,9 +261,14 @@ class _Input extends React.Component<InputProps, InputState> {
         textAlignVertical={textAlignVertical}
         onContentSizeChange={this.onContentSizeChange}
         underlineColorAndroid="rgba(0,0,0,0)"
-        style={[{
-          padding: 0,
-        }, style, _multiline && _autoHeight && { height: Math.max(35, this.state.height) }]}
+        placeholderTextColor={placeholderTextColor}
+        style={[
+          {
+            padding: 0
+          },
+          style,
+          _multiline && _autoHeight && { height: Math.max(35, this.state.height) }
+        ]}
       />
     )
   }
diff --git a/packages/taro-components/types/Button.d.ts b/packages/taro-components/types/Button.d.ts
index 4ac9af8b2b71..59e13da41863 100644
--- a/packages/taro-components/types/Button.d.ts
+++ b/packages/taro-components/types/Button.d.ts
@@ -168,19 +168,13 @@ interface ButtonProps extends StandardProps {
    */
   onGetPhoneNumber?: CommonEventFunction<ButtonProps.onGetPhoneNumberEventDetail>
 
-  /** 获取头像信息
-   *
-   * 生效时机：`open-type="chooseavatar"`
-   * @supported weapp
-   */
-  onChooseAvatar?: CommonEventFunction<ButtonProps.onChooseAvatarEventDetail>
-
   /** 获取用户实名
    *
    * 生效时机：`open-type="getRealnameAuthInfo"`
+   * @deprecated
    * @supported weapp
    */
-  onGetRealnameAuthInfo?: CommonEventFunction
+  onGetRealNameAuthInfo?: CommonEventFunction
 
   /** 当使用开放能力时，发生错误的回调
    *
@@ -201,7 +195,14 @@ interface ButtonProps extends StandardProps {
    * 生效时机：`open-type="launchApp"`
    * @supported weapp
    */
-  onLaunchapp?: CommonEventFunction
+  onLaunchApp?: CommonEventFunction
+
+  /** 获取用户头像回调
+   *
+   * 生效时机：`open-type="chooseAvatar"`
+   * @supported weapp
+   */
+  onChooseAvatar?: CommonEventFunction
 }
 
 declare namespace ButtonProps {
@@ -233,7 +234,7 @@ declare namespace ButtonProps {
   /** open-type 的合法值 */
   interface openTypeKeys {
     weapp: {
-      /** 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
+      /** 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从回调中获得具体信息
        * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
        */
       contact
@@ -241,19 +242,17 @@ declare namespace ButtonProps {
        * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
        */
       share
-      /** 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息
+      /** 获取用户手机号，可以从回调中获取到用户信息
        * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
        */
       getPhoneNumber
-      /** 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息
-       * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html
-       */
-      chooseAvatar
-      /** 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 */
+      /** 获取用户信息，可以从回调中获取到用户信息 */
       getUserInfo
-      /** 用户实名信息授权，已经弃用 */
-      getRealnameAuthInfo
-      /** 打开APP，可以通过app-parameter属性设定向APP传的参数
+      /** 用户实名信息授权
+       * @deprecated
+       */
+      getRealNameAuthInfo
+      /** 打开APP，可以通过 app-parameter 属性设定向APP传的参数
        * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html
        */
       launchApp
@@ -261,6 +260,8 @@ declare namespace ButtonProps {
       openSetting
       /** 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 */
       feedback
+      /** 获取用户头像，可以从回调中获得具体信息 */
+      chooseAvatar
     }
     /** 支付宝小程序专属的 open-type 合法值
      * @see https://opendocs.alipay.com/mini/component/button
@@ -372,13 +373,10 @@ declare namespace ButtonProps {
     encryptedData: string
     /** 加密算法的初始向量 */
     iv: string
-    /** 动态令牌。可通过动态令牌换取用户手机号。使用方法详情 [phonenumber.getPhoneNumber](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/phonenumber/phonenumber.getPhoneNumber.html) 接口 */
-    code:string
-  }
-
-  interface onChooseAvatarEventDetail {
-    /* 获取用户头像的临时链接 */
-    avatarUrl: string
+    /** 动态令牌。可通过动态令牌换取用户手机号。
+     * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
+     */
+    code?: string
   }
 
   interface onOpenSettingEventDetail {
diff --git a/packages/taro-components/types/Input.d.ts b/packages/taro-components/types/Input.d.ts
index 176996e96e28..53018bd511be 100644
--- a/packages/taro-components/types/Input.d.ts
+++ b/packages/taro-components/types/Input.d.ts
@@ -35,6 +35,10 @@ interface InputProps extends StandardProps, FormItemProps {
    */
   placeholderClass?: string
 
+  /** 指定 placeholder 文字的颜色
+   * @supported rn
+   */
+  placeholderTextColor?: string
   /** 是否禁用
    * @supported weapp, h5, rn
    */
@@ -233,25 +237,24 @@ declare namespace InputProps {
  * @example_react
  * ```tsx
  * class App extends Component {
- *
  *   render () {
  *     return (
- *         <View className='example-body'>
- *           <Text>可以自动聚焦的 input</Text>
- *             <Input type='text' placeholder='将会获取焦点' focus/>
- *             <Text>控制最大输入长度的 input</Text>
- *             <Input type='text' placeholder='最大输入长度为 10' maxlength='10'/>
- *             <Text>数字输入的 input</Text>
- *             <Input type='number' placeholder='这是一个数字输入框'/>
- *             <Text>密码输入的 input</Text>
- *             <Input type='password' password placeholder='这是一个密码输入框'/>
- *             <Text>带小数点的 input</Text>
- *             <Input type='digit' placeholder='带小数点的数字键盘'/>
- *             <Text>身份证输入的 input</Text>
- *             <Input type='idcard' placeholder='身份证输入键盘'/>
- *             <Text>控制占位符颜色的 input</Text>
- *             <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
- *         </View>
+ *       <View className='example-body'>
+ *         <Text>可以自动聚焦的 input</Text>
+ *           <Input type='text' placeholder='将会获取焦点' focus/>
+ *           <Text>控制最大输入长度的 input</Text>
+ *           <Input type='text' placeholder='最大输入长度为 10' maxlength='10'/>
+ *           <Text>数字输入的 input</Text>
+ *           <Input type='number' placeholder='这是一个数字输入框'/>
+ *           <Text>密码输入的 input</Text>
+ *           <Input type='password' password placeholder='这是一个密码输入框'/>
+ *           <Text>带小数点的 input</Text>
+ *           <Input type='digit' placeholder='带小数点的数字键盘'/>
+ *           <Text>身份证输入的 input</Text>
+ *           <Input type='idcard' placeholder='身份证输入键盘'/>
+ *           <Text>控制占位符颜色的 input</Text>
+ *           <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
+ *       </View>
  *     )
  *   }
  * }
diff --git a/packages/taro-components/types/KeyboardAccessory.d.ts b/packages/taro-components/types/KeyboardAccessory.d.ts
index 00d4f99b3f26..4ca0747296d8 100644
--- a/packages/taro-components/types/KeyboardAccessory.d.ts
+++ b/packages/taro-components/types/KeyboardAccessory.d.ts
@@ -4,21 +4,33 @@ import { StandardProps } from './common'
 /** @ignore */
 type KeyboardAccessoryProps = StandardProps
 
-/** 设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
+/** 设置 Input / Textarea 聚焦时键盘上方 CoverView / CoverImage 工具栏视图。需要配置 Taro 插件 `@tarojs/plugin-platform-weapp` 的 `enablekeyboardAccessory` 参数为 `true` 后才能使用，请参考：[#9548](https://github.com/NervJS/taro/issues/9548#issuecomment-891682216)。
  *
  * @classification forms
  * @supported weapp
  * @example
+ * ```js
+ * // config/index.js
+ * {
+ *   // ...
+ *   plugins: [
+ *     ['@tarojs/plugin-platform-weapp', {
+ *       enablekeyboardAccessory: true
+ *     }]
+ *   ]
+ * }
+ * ```
+ *
  * ```tsx
  * class App extends Component {
  *   render () {
  *     return (
- *         <Textarea holdKeyboard="{{true}}">
- *           <KeyboardAccessory className="container" style={{ height: 50 }} >
- *             <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'green' }}>1</CoverView>
- *             <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'red' }}>2</CoverView>
- *           </KeyboardAccessory>
- *         </Textarea>
+ *       <Textarea holdKeyboard="{{true}}">
+ *         <KeyboardAccessory className="container" style={{ height: 50 }} >
+ *           <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'green' }}>1</CoverView>
+ *           <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'red' }}>2</CoverView>
+ *         </KeyboardAccessory>
+ *       </Textarea>
  *     )
  *   }
  * }
diff --git a/packages/taro-components/types/Picker.d.ts b/packages/taro-components/types/Picker.d.ts
index 771d159fb393..640b51717c1a 100644
--- a/packages/taro-components/types/Picker.d.ts
+++ b/packages/taro-components/types/Picker.d.ts
@@ -350,7 +350,7 @@ declare namespace PickerRegionProps {
  *     </view>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  *   export default {
  *     data() {
@@ -365,11 +365,11 @@ declare namespace PickerRegionProps {
  *       onChange: function(e) {
  *         this.selectorChecked = this.selector[e.detail.value]
  *       },
- * 
+ *
  *       onTimeChange: function(e) {
  *         this.timeSel = e.detail.value
  *       },
- * 
+ *
  *       onDateChange: function(e) {
  *         this.dateSel = e.detail.value
  *       }
diff --git a/packages/taro-components/types/ShareElement.d.ts b/packages/taro-components/types/ShareElement.d.ts
index 85d6d280bfb7..9bf3b8004246 100644
--- a/packages/taro-components/types/ShareElement.d.ts
+++ b/packages/taro-components/types/ShareElement.d.ts
@@ -32,6 +32,199 @@ interface ShareElementProps extends StandardProps {
  * 使用时需在当前页放置 `ShareElement` 组件，同时在 `PageContainer` 容器中放置对应的 `ShareElement` 组件，对应关系通过属性值 key 映射。当设置 `PageContainer` `显示时，transform` 属性为 `true` 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。
  * @classification viewContainer
  * @supported weapp
+ * @example_react
+ * ```tsx
+ * // index.js
+ * import { useState, useCallback } from 'react'
+ * import { View, Button, PageContainer, ShareElement } from '@tarojs/components'
+ *
+ * import './index.scss'
+ *
+ * const contacts = [
+ *   { id: 1, name: 'Frank', img: 'frank.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 2, name: 'Susan', img: 'susan.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 3, name: 'Emma', img: 'emma.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 4, name: 'Scott', img: 'scott.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 5, name: 'Bob', img: 'bob.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 6, name: 'Olivia', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 7, name: 'Anne', img: 'anne.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 8, name: 'sunny', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }
+ * ]
+ *
+ * export default function () {
+ *   const [show, setShow] = useState(false)
+ *   const [contact, setContact] = useState(contacts[0])
+ *   const [transformIdx, setTransformIdx] = useState(0)
+ *
+ *   const onBeforeEnter = useCallback((res) => {
+ *     console.log('onBeforeEnter: ', res)
+ *   }, [])
+ *   const onEnter = useCallback((res) => {
+ *     console.log('onEnter: ', res)
+ *   }, [])
+ *   const onAfterEnter = useCallback((res) => {
+ *     console.log('onAfterEnter: ', res)
+ *   }, [])
+ *   const onBeforeLeave = useCallback((res) => {
+ *     console.log('onBeforeLeave: ', res)
+ *   }, [])
+ *   const onLeave = useCallback((res) => {
+ *     console.log('onLeave: ', res)
+ *   }, [])
+ *   const onAfterLeave = useCallback((res) => {
+ *     console.log('onAfterLeave: ', res)
+ *   }, [])
+ *
+ *   const showNext = (e, index) => {
+ *     setShow(true)
+ *     setContact(contacts[index])
+ *     setTransformIdx(index)
+ *   }
+ *
+ *   const showPrev = useCallback(() => {
+ *     setShow(false)
+ *   }, [])
+ *
+ *   return (
+ *     <View>
+ *       <View className="screen screen1">
+ *         {
+ *           contacts.map((item, index) => (
+ *             <View key={item.id} className="contact" onClick={e => showNext(e, index)}>
+ *               <ShareElement duration={300} className="name" mapkey="name" transform={transformIdx === index}>
+ *                 {item.name}
+ *               </ShareElement>
+ *               <View className="list">
+ *                 <View>Phone: {item.phone}</View>
+ *                 <View>Mobile: {item.mobile}</View>
+ *                 <View>Email: {item.email}</View>
+ *               </View>
+ *             </View>
+ *           ))
+ *         }
+ *       </View>
+ *       <PageContainer
+ *         show={show}
+ *         overlay={false}
+ *         closeOnSlideDown
+ *         duration={300}
+ *         position='center'
+ *         onBeforeEnter={onBeforeEnter}
+ *         onEnter={onEnter}
+ *         onAfterEnter={onAfterEnter}
+ *         onBeforeLeave={onBeforeLeave}
+ *         onLeave={onLeave}
+ *         onAfterLeave={onAfterLeave}
+ *       >
+ *         <View className="screen screen2">
+ *           <View className="contact">
+ *             <ShareElement className="name" mapkey="name" duration={300} transform>
+ *               {contact.name}
+ *             </ShareElement>
+ *             <View className={`paragraph ${show ? 'enter' : ''}`}>
+ *               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl enim, sodales non augue efficitur, sagittis
+ *               varius neque. Fusce dolor turpis, maximus eu volutpat quis, pellentesque et ligula. Ut vehicula metus in nibh
+ *               mollis ornare. Etiam aliquam lacinia malesuada. Vestibulum dignissim mollis quam a tristique. Maecenas neque
+ *               mauris, malesuada vitae magna eu, congue consectetur risus. Etiam vitae pulvinar ex. Maecenas suscipit mi ac
+ *               imperdiet pretium. Aliquam velit mauris, euismod quis elementum sed, malesuada non dui. Nunc rutrum sagittis
+ *               ligula in dapibus. Cras suscipit ut augue eget mollis. Donec auctor feugiat ipsum id viverra. Vestibulum eu nisi
+ *               risus. Vestibulum eleifend dignissim.
+ *
+ *             </View>
+ *             <Button className="screen2-button" onClick={showPrev} hidden={!show} hoverClass="none">Click Me</Button>
+ *           </View>
+ *         </View>
+ *       </PageContainer>
+ *     </View>
+ *   )
+ * }
+ * ```
+ * ```scss
+ * \/** index.scss *\/
+ * page {
+ *   color: #333;
+ *   background-color: #ddd;
+ *   overflow: hidden;
+ * }
+ *
+ * button {
+ *   border: 0 solid #0010ae;
+ *   background-color: #1f2afe;
+ *   color: #fff;
+ *   font-size: 120%;
+ *   padding: 8px 16px;
+ *   outline-width: 0;
+ *   -webkit-appearance: none;
+ *   box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
+ * }
+ *
+ * .screen {
+ *   position: absolute;
+ *   top: 0;
+ *   bottom: 0;
+ *   left: 0;
+ *   right: 0;
+ *   padding: 16px;
+ *   -webkit-overflow-scrolling: touch;
+ * }
+ *
+ * .contact {
+ *   position: relative;
+ *   padding: 16px;
+ *   background-color: #fff;
+ *   width: 100%;
+ *   height: 100%;
+ *   box-sizing: border-box;
+ * }
+ *
+ * .avatar {
+ *   position: absolute;
+ *   top: 16px;
+ *   left: 16px;
+ *   font-size: 0;
+ * }
+ *
+ * .name {
+ *   height: 65px;
+ *   font-size: 2em;
+ *   font-weight: bold;
+ *   text-align: center;
+ *   margin: 10px 0;
+ * }
+ *
+ * .list {
+ *   padding-top: 8px;
+ *   padding-left: 32px;
+ * }
+ *
+ * .screen1 {
+ *   overflow-y: scroll;
+ *   padding: 0;
+ * }
+ *
+ * .screen1 .contact {
+ *   margin: 16px;
+ *   height: auto;
+ *   width: auto;
+ *   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
+ * }
+ *
+ * .screen2-button {
+ *   display: block;
+ *   margin: 24px auto;
+ * }
+ *
+ * .paragraph {
+ *   -webkit-transition: transform ease-in-out 300ms;
+ *   transition: transform ease-in-out 300ms;
+ *   -webkit-transform: scale(0.6);
+ *   transform: scale(0.6);
+ * }
+ *
+ * .enter.paragraph {
+ *   transform: none;
+ * }
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html
  */
 declare const ShareElement: ComponentType<ShareElementProps>
diff --git a/packages/taro-components/types/common.d.ts b/packages/taro-components/types/common.d.ts
index b649f2e38c1c..4ef665d687f8 100644
--- a/packages/taro-components/types/common.d.ts
+++ b/packages/taro-components/types/common.d.ts
@@ -19,7 +19,7 @@ export interface StandardProps<T = any, TouchEvent extends BaseTouchEvent<any> =
   ref?: LegacyRef<T>
   /**
    * 渲染 HTML
-   * @see https://taro-docs.jd.com/taro/docs/html
+   * @see /docs/html
    */
   dangerouslySetInnerHTML?: {
     __html: string
diff --git a/packages/taro-components/virtual-list/react/createListComponent.js b/packages/taro-components/virtual-list/react/createListComponent.js
index 19b3c73eccc1..98f43ddcc245 100644
--- a/packages/taro-components/virtual-list/react/createListComponent.js
+++ b/packages/taro-components/virtual-list/react/createListComponent.js
@@ -2,7 +2,7 @@
 /* eslint-disable no-case-declarations */
 /* eslint-disable no-void */
 /* eslint-disable no-return-assign */
-import Taro from '@tarojs/taro'
+import { createSelectorQuery } from '@tarojs/taro'
 import { getRTLOffsetType } from '../domHelpers'
 import { memoizeOne } from '../memoize'
 import { createElement, PureComponent } from 'react'
@@ -22,7 +22,7 @@ export function isRtlFunc ({ direction }) {
   return direction === 'rtl'
 }
 export function getRectSize (id, success = () => {}, fail = () => {}) {
-  const query = Taro.createSelectorQuery()
+  const query = createSelectorQuery()
   query.select(id).boundingClientRect((res) => {
     if (res) {
       success(res)
diff --git a/packages/taro-h5/src/api/media/image/getImageInfo.ts b/packages/taro-h5/src/api/media/image/getImageInfo.ts
index 20d85c66f8c5..5b1d722d47c2 100644
--- a/packages/taro-h5/src/api/media/image/getImageInfo.ts
+++ b/packages/taro-h5/src/api/media/image/getImageInfo.ts
@@ -15,14 +15,29 @@ export const getImageInfo: typeof Taro.getImageInfo = (options) => {
     return Promise.reject(res)
   }
 
+  const getBase64Image = (image: HTMLImageElement) => {
+    try {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.width
+      canvas.height = image.height
+      const ctx = canvas.getContext('2d')
+      ctx?.drawImage(image, 0, 0, image.width, image.height)
+      return canvas.toDataURL('image/png')
+    } catch (e) {
+      console.error('getImageInfo:get base64 fail', e)
+    }
+  }
+
   const { src, success, fail, complete } = options
   const handle = new MethodHandler({ name: 'getImageInfo', success, fail, complete })
   return new Promise((resolve, reject) => {
     const image = new Image()
+    image.crossOrigin = ''
     image.onload = () => {
       handle.success({
         width: image.naturalWidth,
-        height: image.naturalHeight
+        height: image.naturalHeight,
+        path: getBase64Image(image) || src
       }, resolve)
     }
     image.onerror = (e: any) => {
diff --git a/packages/taro/types/api/ad/index.d.ts b/packages/taro/types/api/ad/index.d.ts
index d06bee379770..085c08137403 100644
--- a/packages/taro/types/api/ad/index.d.ts
+++ b/packages/taro/types/api/ad/index.d.ts
@@ -97,7 +97,7 @@ declare module '../../index' {
     type OnLoadCallback = (res: TaroGeneral.CallbackResult) => void
     interface OnErrorCallbackResult extends TaroGeneral.CallbackResult {
       /** 错误码
-       * @see https://nervjs.github.io/taro/docs/apis/General#AdErrCode
+       * @see /docs/apis/General#aderrcode
        */
       errCode: keyof TaroGeneral.AdErrCode
       /** 错误信息 */
@@ -160,7 +160,7 @@ declare module '../../index' {
   namespace RewardedVideoAd {
     interface OnErrorCallbackResult extends TaroGeneral.CallbackResult {
       /** 错误码
-       * @see https://nervjs.github.io/taro/docs/apis/General#AdErrCode
+       * @see /docs/apis/General#aderrcode
        */
       errCode: keyof TaroGeneral.AdErrCode
       /** 错误信息 */
diff --git a/packages/taro/types/api/canvas/index.d.ts b/packages/taro/types/api/canvas/index.d.ts
index 088c2e6b0ef4..f9dee08e8570 100644
--- a/packages/taro/types/api/canvas/index.d.ts
+++ b/packages/taro/types/api/canvas/index.d.ts
@@ -3,9 +3,9 @@ import Taro from '../../index'
 declare module '../../index' {
   namespace canvasToTempFilePath {
     interface Option {
-      /** 画布标识，传入 [canvas](/docs/components/canvas/canvas) 组件实例 （canvas type="2d" 时使用该属性）。 */
+      /** 画布标识，传入 [canvas](/docs/components/canvas) 组件实例 （canvas type="2d" 时使用该属性）。 */
       canvas?: CanvasProps
-      /** 画布标识，传入 [canvas](/docs/components/canvas/canvas) 组件的 canvas-id */
+      /** 画布标识，传入 [canvas](/docs/components/canvas) 组件的 canvas-id */
       canvasId?: string
       /** 图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。 */
       quality?: number
@@ -75,7 +75,7 @@ declare module '../../index' {
   }
   namespace canvasPutImageData {
     interface Option {
-      /** 画布标识，传入 [canvas](/docs/components/canvas/canvas) 组件的 canvas-id 属性。 */
+      /** 画布标识，传入 [canvas](/docs/components/canvas) 组件的 canvas-id 属性。 */
       canvasId: string
       /** 图像像素点数据，一维数组，每四项表示一个像素点的 rgba */
       data: Uint8ClampedArray
@@ -97,7 +97,7 @@ declare module '../../index' {
   }
   namespace canvasGetImageData {
     interface Option {
-      /** 画布标识，传入 [canvas](/docs/components/canvas/canvas) 组件的 `canvas-id` 属性。 */
+      /** 画布标识，传入 [canvas](/docs/components/canvas) 组件的 `canvas-id` 属性。 */
       canvasId: string
       /** 将要被提取的图像数据矩形区域的高度 */
       height: number
@@ -1736,9 +1736,9 @@ declare module '../../index' {
      * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html
      */
     createCanvasContext(
-      /** 要获取上下文的 [canvas](/docs/components/canvas/canvas) 组件 canvas-id 属性 */
+      /** 要获取上下文的 [canvas](/docs/components/canvas) 组件 canvas-id 属性 */
       canvasId: string,
-      /** 在自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 [canvas](/docs/components/canvas/canvas) ，如果省略则不在任何自定义组件内查找 */
+      /** 在自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 [canvas](/docs/components/canvas) ，如果省略则不在任何自定义组件内查找 */
       component?: TaroGeneral.IAnyObject,
     ): CanvasContext
 
@@ -1767,7 +1767,7 @@ declare module '../../index' {
      */
     canvasToTempFilePath(
       option: canvasToTempFilePath.Option,
-      /** 在自定义组件下，当前组件实例的this，以操作组件内 [canvas](/docs/components/canvas/canvas) 组件 */
+      /** 在自定义组件下，当前组件实例的this，以操作组件内 [canvas](/docs/components/canvas) 组件 */
       component?: TaroGeneral.IAnyObject,
     ): Promise<canvasToTempFilePath.SuccessCallbackResult>
 
@@ -1789,7 +1789,7 @@ declare module '../../index' {
      */
     canvasPutImageData(
       option: canvasPutImageData.Option,
-      /** 在自定义组件下，当前组件实例的this，以操作组件内 [canvas](/docs/components/canvas/canvas) 组件 */
+      /** 在自定义组件下，当前组件实例的this，以操作组件内 [canvas](/docs/components/canvas) 组件 */
       component?: TaroGeneral.IAnyObject,
     ): Promise<TaroGeneral.CallbackResult>
 
@@ -1815,7 +1815,7 @@ declare module '../../index' {
      */
     canvasGetImageData(
       option: canvasGetImageData.Option,
-      /** 在自定义组件下，当前组件实例的this，以操作组件内 [canvas](/docs/components/canvas/canvas) 组件 */
+      /** 在自定义组件下，当前组件实例的this，以操作组件内 [canvas](/docs/components/canvas) 组件 */
       component?: TaroGeneral.IAnyObject,
     ): Promise<canvasGetImageData.SuccessCallbackResult>
   }
diff --git a/packages/taro/types/api/device/network.d.ts b/packages/taro/types/api/device/network.d.ts
index cad4add95268..b0c31b6d5bbf 100644
--- a/packages/taro/types/api/device/network.d.ts
+++ b/packages/taro/types/api/device/network.d.ts
@@ -139,7 +139,7 @@ declare module '../../index' {
      * @example
      * ```tsx
      * Taro.getNetworkType({
-     *   success: function (res)) {
+     *   success: function (res) {
      *     // 返回网络类型, 有效值：
      *     // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
      *     var networkType = res.networkType
diff --git a/packages/taro/types/api/network/request.d.ts b/packages/taro/types/api/network/request.d.ts
index 631c531a2208..c82d4db18451 100644
--- a/packages/taro/types/api/network/request.d.ts
+++ b/packages/taro/types/api/network/request.d.ts
@@ -367,7 +367,7 @@ declare module '../../index' {
      * ```
      * @see https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
      */
-    request<T = any, U = any>(option: request.Option<T,U>): RequestTask<T>
+    request<T = any, U = any>(option: request.Option<T, U>): RequestTask<T>
 
     /** 可以使用拦截器在请求发出前或发出后做一些额外操作。
      *
diff --git a/packages/taro/types/api/open-api/authorize.d.ts b/packages/taro/types/api/open-api/authorize.d.ts
index 2d8d6af98049..34c1849a1fa7 100644
--- a/packages/taro/types/api/open-api/authorize.d.ts
+++ b/packages/taro/types/api/open-api/authorize.d.ts
@@ -37,7 +37,7 @@ declare module '../../index' {
   }
 
   interface TaroStatic {
-    /** **仅小程序插件中能调用该接口**，用法同 [Taro.authorize](./authorize)。目前仅支持三种 scope
+    /** **仅小程序插件中能调用该接口**，用法同 [Taro.authorize](../authorize)。目前仅支持三种 scope
      * @supported weapp
      * @example
      * ```tsx
diff --git a/packages/taro/types/api/ui/animation.d.ts b/packages/taro/types/api/ui/animation.d.ts
index 58b5f6a2f78c..6f827f84688a 100644
--- a/packages/taro/types/api/ui/animation.d.ts
+++ b/packages/taro/types/api/ui/animation.d.ts
@@ -473,7 +473,7 @@ declare module '../../index' {
   }
 
   interface TaroStatic {
-    /** 创建一个动画实例 [animation](./Animation)。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
+    /** 创建一个动画实例 [animation](../Animation)。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
      * @supported weapp, h5
      * @example
      * ```tsx
diff --git a/packages/taro/types/api/worker/index.d.ts b/packages/taro/types/api/worker/index.d.ts
index aec55183e13a..188b0ac54217 100644
--- a/packages/taro/types/api/worker/index.d.ts
+++ b/packages/taro/types/api/worker/index.d.ts
@@ -60,7 +60,7 @@ declare module '../../index' {
   }
 
   interface TaroStatic {
-    /** 创建一个 Worker 线程。目前限制最多只能创建一个 Worker，创建下一个 Worker 前请先调用 [Worker.terminate](/docs/apis/worker/Worker#terminate)
+    /** 创建一个 Worker 线程。目前限制最多只能创建一个 Worker，创建下一个 Worker 前请先调用 [Worker.terminate](/docs/apis/worker/#terminate)
      * @supported weapp
      * @example
      * ```tsx
diff --git a/packages/taro/types/api/wxml/index.d.ts b/packages/taro/types/api/wxml/index.d.ts
index c8e2d35f4627..4fc5875d74c7 100644
--- a/packages/taro/types/api/wxml/index.d.ts
+++ b/packages/taro/types/api/wxml/index.d.ts
@@ -268,7 +268,7 @@ declare module '../../index' {
       /** 回调函数 */
       callback?: NodesRef.FieldsCallback,
     ): SelectorQuery
-    /** 获取 Node 节点实例。目前支持 [Canvas](/docs/components/canvas/canvas) 的获取。
+    /** 获取 Node 节点实例。目前支持 [Canvas](/docs/components/canvas) 的获取。
      * @supported weapp, h5
      * @example
      * ```tsx
diff --git a/packages/taro/types/taro.extend.d.ts b/packages/taro/types/taro.extend.d.ts
index cfa87373931c..2ebf043f2f5d 100644
--- a/packages/taro/types/taro.extend.d.ts
+++ b/packages/taro/types/taro.extend.d.ts
@@ -9,7 +9,7 @@ declare module './index' {
     duration?: number
   }
 
-  interface RequestParams<T> extends request.Option<T,any> {
+  interface RequestParams<T> extends request.Option<T, any> {
     [propName: string]: any
   }