安装

# 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 (
    // ...
  )
}

导出自 react-use 的 Hooks

• useToggle
• useBoolean
• useGetSet
• useGetSetState
• usePrevious
• useSetState
• useCounter
• useNumber
• useList
• useMap
• useDebounce
• useThrottle
• useThrottleFn
• useEffectOnce
• useMount
• useUnmount
• useMountedState
• useAsync
• useAsyncFn

导出自 @vtils/react 的工具函数、Hooks

• buildFunctionComponentCreator
• useEasyValidator
• useLiveEasyValidator
• useLoadMore

自产的工具函数、Hooks 目录

👇 | 👇 | 👇 --- | --- | --- getCurrentPageUrl | useAccountInfo | useCurrentPageUrl useLaunchOptions | useLoading | useMenuButtonBoundingClientRect useNavigationBarLoading | useNavigationBarTitle | useQuery useScope | useScrollLoadMore | useSystemInfo

自产的工具函数、Hooks 列表

getCurrentPageUrl

源码 | API | 回目录

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

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

useAccountInfo

源码 | API | 回目录

获取当前帐号信息。

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

useCurrentPageUrl

源码 | API | 回目录

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

const currentPageUrl = useCurrentPageUrl()

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

useLaunchOptions

源码 | API | 回目录

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

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

useLoading

源码 | API | 回目录

使用加载提示。

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

useMenuButtonBoundingClientRect

源码 | API | 回目录

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

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

useNavigationBarLoading

源码 | API | 回目录

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

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

useNavigationBarTitle

源码 | API | 回目录

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

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

useQuery

源码 | API | 回目录

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

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

useScope

源码 | API | 回目录

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

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

useScrollLoadMore

源码 | API | 回目录

滚动数据加载。

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) // 数据总量

useSystemInfo

源码 | API | 回目录

获取系统信息。

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

许可

MIT ©️ Jay Fong