fix: 修复 taro h5 有些 api 未导出导致报错 (#637)

src/packages/audio/audio.taro.tsx

@@ -5,7 +5,7 @@ import React, {
   FunctionComponent,
 } from 'react'
 
-import Taro from '@tarojs/taro'
+import { createInnerAudioContext, InnerAudioContext } from '@tarojs/taro'
 import Icon from '@/packages/icon/index.taro'
 import Range from '@/packages/range/index.taro'
 import Button from '@/packages/button/index.taro'
@@ -23,12 +23,12 @@ export interface AudioProps extends BasicComponent {
   autoplay?: boolean
   loop?: boolean
   type: string
-  onFastBack?: (ctx: Taro.InnerAudioContext) => void
-  onForward?: (ctx: Taro.InnerAudioContext) => void
+  onFastBack?: (ctx: InnerAudioContext) => void
+  onForward?: (ctx: InnerAudioContext) => void
   onPause?: any
   onPlay?: any
-  onPlayEnd?: (ctx: Taro.InnerAudioContext) => void
-  onCanPlay?: (ctx: Taro.InnerAudioContext) => void
+  onPlayEnd?: (ctx: InnerAudioContext) => void
+  onCanPlay?: (ctx: InnerAudioContext) => void
 }
 const defaultProps = {
   ...ComponentDefaults,
@@ -38,16 +38,16 @@ const defaultProps = {
   autoplay: false,
   loop: false,
   type: 'progress',
-  onFastBack: (ctx: Taro.InnerAudioContext) => {}, // type 为 progress时生效
-  onForward: (ctx: Taro.InnerAudioContext) => {}, // type 为 progress时生效
-  onPause: (ctx: Taro.InnerAudioContext) => {},
-  onPlay: (ctx: Taro.InnerAudioContext) => {},
-  onPlayEnd: (ctx: Taro.InnerAudioContext) => {},
-  onCanPlay: (ctx: Taro.InnerAudioContext) => {},
+  onFastBack: (ctx: InnerAudioContext) => {}, // type 为 progress时生效
+  onForward: (ctx: InnerAudioContext) => {}, // type 为 progress时生效
+  onPause: (ctx: InnerAudioContext) => {},
+  onPlay: (ctx: InnerAudioContext) => {},
+  onPlayEnd: (ctx: InnerAudioContext) => {},
+  onCanPlay: (ctx: InnerAudioContext) => {},
 } as AudioProps
 export const Audio: FunctionComponent<
   Partial<AudioProps> &
-    (React.HTMLAttributes<HTMLDivElement> | Taro.InnerAudioContext)
+    (React.HTMLAttributes<HTMLDivElement> | InnerAudioContext)
 > = (props) => {
   const { locale } = useConfig()
   const {
@@ -84,7 +84,7 @@ export const Audio: FunctionComponent<
     percent: 0,
   })
 
-  const audioRef = useRef(Taro.createInnerAudioContext())
+  const audioRef = useRef(createInnerAudioContext())
   const audioCtx = audioRef.current
   audioCtx.src = url
   audioCtx.autoplay = autoplay || false

src/packages/backtop/backtop.taro.tsx

 import React, { FunctionComponent, useState } from 'react'
 
-import Taro, { usePageScroll } from '@tarojs/taro'
+import { usePageScroll, pageScrollTo } from '@tarojs/taro'
 import Icon from '@/packages/icon/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
@@ -63,7 +63,7 @@ export const BackTop: FunctionComponent<
   // 返回顶部点击事件
   const goTop = (e: any) => {
     onClick && onClick(e)
-    Taro.pageScrollTo({
+    pageScrollTo({
       scrollTop: 0,
       duration: isAnimation && duration > 0 ? duration : 0,
     })

src/packages/barrage/barrage.taro.tsx

@@ -4,7 +4,7 @@ import React, {
   useRef,
   useImperativeHandle,
 } from 'react'
-import Taro from '@tarojs/taro'
+import { createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
 import bem from '@/utils/bem'
 
@@ -80,7 +80,7 @@ const InternalBarrage: ForwardRefRenderFunction<
     el.classList.add('barrage-item')
     ;(barrageContainer.current as HTMLDivElement).appendChild(el)
 
-    Taro.createSelectorQuery()
+    createSelectorQuery()
       .select('.barrage-item')
       .boundingClientRect((res) => {
         console.log('res', res)

src/packages/cell/cell.taro.tsx

 import React, { FunctionComponent, ReactNode } from 'react'
-import Taro from '@tarojs/taro'
+import { redirectTo, navigateTo } from '@tarojs/taro'
 import bem from '@/utils/bem'
 import Icon from '@/packages/icon/index.taro'
 
@@ -77,7 +77,7 @@ export const Cell: FunctionComponent<
     onClick(event)
     const link = to || url
     if (link) {
-      replace ? Taro.redirectTo({ url: link }) : Taro.navigateTo({ url: link })
+      replace ? redirectTo({ url: link }) : navigateTo({ url: link })
     }
   }
 

src/packages/drag/drag.taro.tsx

 import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
-import Taro from '@tarojs/taro'
+import { getSystemInfoSync, createSelectorQuery } from '@tarojs/taro'
 import bem from '@/utils/bem'
-// import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro'
 
 export interface DragProps {
   attract: boolean
@@ -51,9 +50,9 @@ export const Drag: FunctionComponent<
     const el = myDrag.current
     if (el) {
       const { top, left, bottom, right } = boundary
-      const { screenWidth, windowHeight } = Taro.getSystemInfoSync()
+      const { screenWidth, windowHeight } = getSystemInfoSync()
 
-      Taro.createSelectorQuery()
+      createSelectorQuery()
         .select(`.${className}`)
         .boundingClientRect((rec: any) => {
           setBoundaryState({

src/packages/elevator/elevator.taro.tsx

@@ -5,7 +5,7 @@ import React, {
   useState,
   createContext,
 } from 'react'
-import Taro from '@tarojs/taro'
+import { nextTick, createSelectorQuery } from '@tarojs/taro'
 
 import { ScrollView } from '@tarojs/components'
 import bem from '@/utils/bem'
@@ -103,7 +103,7 @@ export const Elevator: FunctionComponent<
 
     state.current.listHeight.push(height)
     for (let i = 0; i < state.current.listGroup.length; i++) {
-      const query = Taro.createSelectorQuery()
+      const query = createSelectorQuery()
       query
         .selectAll(`.${className} .elevator__item__${i}`)
         .boundingClientRect()
@@ -178,7 +178,7 @@ export const Elevator: FunctionComponent<
 
   const setListGroup = () => {
     if (listview.current) {
-      Taro.createSelectorQuery()
+      createSelectorQuery()
         .selectAll(`.${className} .nut-elevator__list__item`)
         .node((el) => {
           state.current.listGroup = [...Object.keys(el)]
@@ -212,7 +212,7 @@ export const Elevator: FunctionComponent<
 
   useEffect(() => {
     if (listview.current) {
-      Taro.nextTick(() => {
+      nextTick(() => {
         setListGroup()
       })
     }

src/packages/searchbar/searchbar.taro.tsx

 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
-import Taro from '@tarojs/taro'
+import { getEnv } from '@tarojs/taro'
 import bem from '@/utils/bem'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import Icon from '@/packages/icon/index.taro'
@@ -303,7 +303,7 @@ export const SearchBar: FunctionComponent<
   }
 
   const envClass = () => {
-    return Taro.getEnv() === 'WEB' ? 'nut-searchbar-taro' : ''
+    return getEnv() === 'WEB' ? 'nut-searchbar-taro' : ''
   }
 
   return (

src/packages/uploader/uploader.taro.tsx

@@ -6,14 +6,16 @@ import React, {
   useEffect,
 } from 'react'
 import classNames from 'classnames'
+import Taro, { chooseImage, uploadFile, getEnv } from '@tarojs/taro'
 import Icon from '@/packages/icon/index.taro'
 import Button from '@/packages/button/index.taro'
 import Progress from '@/packages/progress/index.taro'
-import Taro from '@tarojs/taro'
 import { Upload, UploadOptions } from './upload'
 import bem from '@/utils/bem'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+
 export type FileType<T> = { [key: string]: T }
 
 export type FileItemStatus =
@@ -43,8 +45,6 @@ interface sourceType {
   environment: string
 }
 
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-
 export interface UploaderProps extends BasicComponent {
   url: string
   maximum: string | number
@@ -121,7 +121,7 @@ const defaultProps = {
 export class FileItem {
   status: FileItemStatus = 'ready'
 
-  message: string = '准备中..'
+  message = '准备中..'
 
   uid: string = new Date().getTime().toString()
 
@@ -194,7 +194,7 @@ const InternalUploader: ForwardRefRenderFunction<
   useImperativeHandle(ref, () => ({
     submit: () => {
       Promise.all(uploadQueue).then((res) => {
-        res.forEach((i) => i.uploadTaro(Taro.uploadFile, Taro.getEnv()))
+        res.forEach((i) => i.uploadTaro(uploadFile, getEnv()))
       })
     },
   }))
@@ -208,16 +208,16 @@ const InternalUploader: ForwardRefRenderFunction<
     }
   }
 
-  const chooseImage = () => {
+  const _chooseImage = () => {
     if (disabled) {
       return
     }
-    Taro.chooseImage({
+    chooseImage({
       // 选择数量
       count: (maximum as number) * 1 - fileList.length,
       // 可以指定是原图还是压缩图，默认二者都有
-      sizeType: sizeType,
-      sourceType: sourceType,
+      sizeType,
+      sourceType,
       success: onChangeFn,
     })
   }
@@ -306,7 +306,7 @@ const InternalUploader: ForwardRefRenderFunction<
 
     const task = new Upload(uploadOption)
     if (props.autoUpload) {
-      task.uploadTaro(Taro.uploadFile, Taro.getEnv())
+      task.uploadTaro(uploadFile, getEnv())
     } else {
       uploadQueue.push(
         new Promise((resolve, reject) => {
@@ -332,7 +332,7 @@ const InternalUploader: ForwardRefRenderFunction<
       fileItem.message = locale.uploader.readyUpload
       fileItem.type = fileType
 
-      if (Taro.getEnv() == 'WEB') {
+      if (getEnv() === 'WEB') {
         const formData = new FormData()
         for (const [key, value] of Object.entries(data)) {
           formData.append(key, value)
@@ -369,7 +369,7 @@ const InternalUploader: ForwardRefRenderFunction<
       onOversize && onOversize(files)
     }
 
-    let currentFileLength = filterFile.length + fileList.length
+    const currentFileLength = filterFile.length + fileList.length
     if (currentFileLength > maximum) {
       filterFile.splice(filterFile.length - (currentFileLength - maximum))
     }
@@ -414,7 +414,7 @@ const InternalUploader: ForwardRefRenderFunction<
           <>
             {children}
             {maximum > fileList.length && (
-              <Button className="nut-uploader__input" onClick={chooseImage} />
+              <Button className="nut-uploader__input" onClick={_chooseImage} />
             )}
           </>
         </div>
@@ -424,7 +424,7 @@ const InternalUploader: ForwardRefRenderFunction<
         fileList.map((item: any, index: number) => {
           return (
             <div className={`nut-uploader__preview ${listType}`} key={item.uid}>
-              {listType == 'picture' && !children && (
+              {listType === 'picture' && !children && (
                 <div className="nut-uploader__preview-img">
                   {item.status === 'ready' ? (
                     <div className="nut-uploader__preview__progress">
@@ -440,7 +440,7 @@ const InternalUploader: ForwardRefRenderFunction<
                           fontClassName={props.iconFontClassName}
                           color="#fff"
                           name={`${
-                            item.status == 'error' ? 'failure' : 'loading'
+                            item.status === 'error' ? 'failure' : 'loading'
                           }`}
                         />
                         <div className="nut-uploader__preview__progress__msg">
@@ -467,6 +467,7 @@ const InternalUploader: ForwardRefRenderFunction<
                         <img
                           className="nut-uploader__preview-img__c"
                           src={item.url}
+                          alt=""
                           onClick={() => handleItemClick(item)}
                         />
                       )}
@@ -477,6 +478,7 @@ const InternalUploader: ForwardRefRenderFunction<
                         <img
                           className="nut-uploader__preview-img__c"
                           src={defaultImg}
+                          alt=""
                           onClick={() => handleItemClick(item)}
                         />
                       ) : (
@@ -548,7 +550,7 @@ const InternalUploader: ForwardRefRenderFunction<
             color="#808080"
             name={uploadIcon}
           />
-          <Button className="nut-uploader__input" onClick={chooseImage} />
+          <Button className="nut-uploader__input" onClick={_chooseImage} />
         </div>
       )}
     </div>

src/packages/virtuallist/virtuallist.taro.tsx

 import React, {
   FunctionComponent,
+  useCallback,
   useEffect,
   useRef,
   useState,
-  useCallback,
 } from 'react'
 import { ScrollView } from '@tarojs/components'
-import Taro from '@tarojs/taro'
+import { getSystemInfoSync } from '@tarojs/taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
-import { VirtualListState, PositionType } from './type'
-import { initPositinoCache, binarySearch, updateItemSize } from './utils'
+import { PositionType, VirtualListState } from './type'
+import { binarySearch, initPositinoCache, updateItemSize } from './utils'
 
 export type VirtualListProps = {
   className?: string | any
@@ -31,8 +31,8 @@ const defaultProps = {
   overscan: 2,
 } as VirtualListProps
 
-const clientHeight = Taro.getSystemInfoSync().windowHeight - 5 || 667
-const clientWidth = Taro.getSystemInfoSync().windowWidth || 375
+const clientHeight = getSystemInfoSync().windowHeight - 5 || 667
+const clientWidth = getSystemInfoSync().windowWidth || 375
 
 export const VirtualList: FunctionComponent<
   VirtualListProps & React.HTMLAttributes<HTMLDivElement>
@@ -111,15 +111,12 @@ export const VirtualList: FunctionComponent<
 
   // 可视区域总高度
   const getContainerHeight = () => {
-    //初始首页列表高度
+    // 初始首页列表高度
     const initH = itemSize * sourceData.length
-    //未设置containerSize高度，判断首页高度小于设备高度时，滚动容器高度为首页数据高度，减5为分页触发的偏移量
-    let containerH =
-      initH < clientHeight
-        ? initH + overscan * itemSize - 5
-        : Math.min(containerSize, clientHeight)
-
-    return containerH // Math.min(containerSize, clientHeight)
+    // 未设置containerSize高度，判断首页高度小于设备高度时，滚动容器高度为首页数据高度，减5为分页触发的偏移量
+    return initH < clientHeight
+      ? initH + overscan * itemSize - 5
+      : Math.min(containerSize, clientHeight) // Math.min(containerSize, clientHeight)
   }
   // 可视区域条数
   const visibleCount = () => {