@vtils/taro
Options
All
  • Public
  • Public/Protected
  • All
Menu

logo

NPM Version Build Status Coverage Status License

vtils 在 Taro 中的应用，且对 react-use、@vtils/react 中部分常用的工具函数、Hooks 进行了重新导出以适配 Taro。

https://fjc0k.github.io/vtils/taro

安装

 
# yarn
yarn add vtils @vtils/taro

# or, npm
npm i vtils @vtils/taro --save

使用

 
import { useToggle } from '@vtils/taro'

export default function Edit() {
  const [showMore, toggleShowMore] = useToggle(false)
  return (
    // ...
  )
}

Index

Functions

Functions

getCurrentPageUrl

  • getCurrentPageUrl(): string

  • 获取当前页面的绝对路径，包含查询参数。

    example
    const currentPageUrl = getCurrentPageUrl()
// => /pages/Product/Detail?id=10

    Returns string

useAccountInfo

  • useAccountInfo(): Return

  • 获取当前帐号信息。

    example
    const accountInfo = useAccountInfo()
// {
//   miniProgram: {
//     appId: '小程序 appid'
//   },
//   plugin: {
//     appId: '插件 appid',
//     version: '插件版本号'
//   }
// }

    Returns Return

useCurrentPageUrl

  • useCurrentPageUrl(): string | null

  • 获取当前页面的绝对路径，包含查询参数。

    example
    const currentPageUrl = useCurrentPageUrl()

if (currentPageUrl) {
  // => /pages/Product/Detail?id=10
}

    Returns string | null

useLaunchOptions

  • useLaunchOptions(): Return

  • 获取小程序启动时的参数。

    example
    const launchOptions = useLaunchOptions()
// { path: '启动小程序的路径', ... }

    Returns Return

useLoading

  • useLoading(visible: boolean, message?: string): void

  • 使用加载提示。

    example
    const getDetail = useAsync(async () => {
  return getDetailApi()
})
useLoading(getDetail.loading, '获取数据中...')

    Parameters

    • visible: boolean

      是否显示加载提示

    • Default value message: string = "加载中..."

      提示内容，默认为：加载中...

    Returns void

useMenuButtonBoundingClientRect

  • useMenuButtonBoundingClientRect(): object

  • 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

    example
    const rect = useMenuButtonBoundingClientRect()
// { width: 333, ... }

    Returns object

useNavigationBarLoading

  • useNavigationBarLoading(visible: boolean): void

  • 控制导航条加载动画的显示、隐藏。

    example
    // 加载列表数据时显示导航条加载动画
const [loading, setLoading] = useState(true)
useNavigationBarLoading(loading)
useEffect(() => {
  setLoading(true)
  getListApi().then(() => {
    setLoading(false)
  })
}, [])

    Parameters

    • visible: boolean

      是否显示导航条加载动画

    Returns void

useNavigationBarTitle

  • useNavigationBarTitle(title: string): void

  • 动态设置当前页面的标题。

    example
    // 以产品名称作为页面标题
const [product, setProduct] = useState({})
useNavigationBarTitle(product.name || '')
useEffect(() => {
  getProductDetail().then(setProduct)
}, [])

    Parameters

    • title: string

      标题

    Returns void

useQuery

  • useQuery<TQuery>(): Partial<TQuery>

  • 获取页面的查询参数，会将类型为数值的参数值转为数字。

    example
    const query = useQuery<{ id: number }>()
useEffect(() => {
  if (query.id != null) {
    console.log(typeof query.id, query.id)
    // 假设页面的查询参数为 id=100，则输出为：'number', 100
  }
}, [query.id])

    Type parameters

    • TQuery: Record<string, any>

    Returns Partial<TQuery>

useScope

  • useScope(): any

  • 获取小程序原生作用域。同类组件中的 this.$scope。

    deprecated

    Taro 自版本 1.3.20 后已内置 useScope

    example
    const scope = useScope()
useEffect(() => {
  if (scope) {
    const ctx = Taro.createCanvasContext('canvas', scope)
    // ...
  }
}, [scope])

    Returns any

useScrollLoadMore

  • useScrollLoadMore<TItem>(service: UseLoadMoreService<TItem>, deps: DependencyList): UseLoadMoreReturn<TItem>

  • 滚动数据加载。

    example
    const [catId, setCatId] = useState(1)

const loader = useScrollLoadMore(
  // 在这里加载数据
  payload => {
    return getListByCatId({
      id: catId,
      pageNumber: payload.pageNumber
    }).then(res => {
      // 返回的数据结构必须为一个对象或数组，对象的结构如下，
      // 若返回数组，当数组为空时即视为加载完成
      return {
        data: res.data,
        total: res.total
      }
    })
  },
  // 依赖若发生变化则从首页重新加载数据
  [catId]
)

const handleCatChange = useCallback((catId: number) => {
  setCatId(catId)
}, [])

console.log(loader.loading) // 是否正在加载中
console.log(loader.initialLoading) // 是否初次加载中，重新加载也视为初次加载
console.log(loader.incrementalLoading) // 是否增量加载中
console.log(loader.noMore) // 数据是否已加载完成
console.log(loader.pageNumber) // 已经加载到多少页
console.log(loader.total) // 数据总量

    Type parameters

    • TItem

    Parameters

    • service: UseLoadMoreService<TItem>

      数据加载服务

    • deps: DependencyList

      依赖，依赖若发生变化则从首页重新加载数据

    Returns UseLoadMoreReturn<TItem>

    返回结果

useSystemInfo

  • useSystemInfo(): object

  • 获取系统信息。

    example
    const systemInfo = useSystemInfo()
// { screenWidth: 750, ... }

    Returns object

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc