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 (
// ...
)
}
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
导出自自产的工具函数、Hooks 目录
自产的工具函数、Hooks 列表
getCurrentPageUrl
获取当前页面的绝对路径,包含查询参数。
const currentPageUrl = getCurrentPageUrl()
// => /pages/Product/Detail?id=10
useAccountInfo
获取当前帐号信息。
const accountInfo = useAccountInfo()
// {
// miniProgram: {
// appId: '小程序 appid'
// },
// plugin: {
// appId: '插件 appid',
// version: '插件版本号'
// }
// }
useCurrentPageUrl
获取当前页面的绝对路径,包含查询参数。
const currentPageUrl = useCurrentPageUrl()
if (currentPageUrl) {
// => /pages/Product/Detail?id=10
}
useLaunchOptions
获取小程序启动时的参数。
const launchOptions = useLaunchOptions()
// { path: '启动小程序的路径', ... }
useLoading
使用加载提示。
const getDetail = useAsync(async () => {
return getDetailApi()
})
useLoading(getDetail.loading, '获取数据中...')
useMenuButtonBoundingClientRect
获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
const rect = useMenuButtonBoundingClientRect()
// { width: 333, ... }
useNavigationBarLoading
控制导航条加载动画的显示、隐藏。
// 加载列表数据时显示导航条加载动画
const [loading, setLoading] = useState(true)
useNavigationBarLoading(loading)
useEffect(() => {
setLoading(true)
getListApi().then(() => {
setLoading(false)
})
}, [])
useNavigationBarTitle
动态设置当前页面的标题。
// 以产品名称作为页面标题
const [product, setProduct] = useState({})
useNavigationBarTitle(product.name || '')
useEffect(() => {
getProductDetail().then(setProduct)
}, [])
useQuery
获取页面的查询参数,会将类型为数值的参数值转为数字。
const query = useQuery<{ id: number }>()
useEffect(() => {
if (query.id != null) {
console.log(typeof query.id, query.id)
// 假设页面的查询参数为 id=100,则输出为:'number', 100
}
}, [query.id])
useScope
获取小程序原生作用域。同类组件中的 this.$scope
。
const scope = useScope()
useEffect(() => {
if (scope) {
const ctx = Taro.createCanvasContext('canvas', scope)
// ...
}
}, [scope])
useScrollLoadMore
滚动数据加载。
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
获取系统信息。
const systemInfo = useSystemInfo()
// { screenWidth: 750, ... }
许可
MIT