@vtils/taro

vtils 在 Taro 中的应用。

Usage no npm install needed!

<script type="module">
  import vtilsTaro from 'https://cdn.skypack.dev/@vtils/taro';
</script>

README

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

导出自 react-use 的 Hooks

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

自产的工具函数、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