DEV Community

Cover image for taro-hooks v1.4.7
阿酱
阿酱

Posted on

taro-hooks v1.4.7

9月, taro-hooks又发布了10个版本(其中包含9个修复补丁和1个小版本). taro-hooks基本保持着每周发布一个版本的频率在维护更新. 目前taro-hooks已经拥有49+hooks可供使用。覆盖了将近70%的官方api.

目前taro-hooks最新版本为v1.4.7.

概要

此次更新了近 10+ hooks, 新增hooks为:

其他

  • 修复部分hook类型定义
  • 增加部分微信小程序api参数定义
  • 增加部分FAQ常见问题.

taro 2.x中使用taro-hooks

原则上不推荐在小于3.xtaro项目中使用taro-hooks. 但若有希望可以使用的, 还是提供了接入方式, 但是并不是完全可用, 部分hook还是受到限制.

具体使用方式可参考taro-hooks-demo-for-taro2.x. 下面简单阐述部分配置:

  1. 由于早版本的taro模式还是nervjs. 故限制了部分hooks需从@tarojs/taro中引入. 在经由taro-cli来进行分发不同的端匹配. taro-hooks初期就是适配3.x来进行使用的, 故源码中直接对react进行了引用. 这里我们需要转换一下模块, 需要用到配置中的alias.

    // config/index.js 需手动指定端的入口
    const env = process.env.TARO_ENV;
    const config = {
      // ...
      alias: {
        react: resolve(
          __dirname,
          "..",
          "node_modules",
          "@tarojs/taro-" + env,
          env === "h5" ? "src/index.cjs.js" : "index.js"
        ),
      },
      // ...
    }
    
  2. 由于taro-hooks内部不会经由taro解析。故部分apih5端不会走对应的default或者cjs的模式, 所以若需要在h5端使用, 还需增加h5webpackChain的模块解析, 这里简单的为大家提供一个loader(实际就是将@tarojs/taro替换为了@tarojs/taro-h5/src/index.cjs.js):

  • taro-hooks-loader

    // config/taro-hooks-loader.js
    export default function taroHooksLoader(source) {
      return source.replace(
        "@tarojs/taro", 
        "@tarojs/taro-h5/src/index.cjs.js"
      );
    }
    
  • config

    // config/index.js
    const config = {
      // ...
      h5: {
        webpackChain(chain) {
          chain.merge({
            module: {
              rule: {
                "taro-hooks-loader": {
                  test: /taro-hooks/,
                  loader: resolve(__dirname, "taro-hooks-loader"),
                },
              },
            },
          });
        },
      }
      // ...
    }
    
  1. 需要手动配置按需加载

    • 需下载babel-plugin-import
    $ npm i babel-plugin-import -D
    
  • 配置

    // config/index.js
    const config = {
      // ...
      plugins: [
        // ...
        [
          "import",
          {
            libraryName: "taro-hooks",
            camel2DashComponentName: false,
          },
          "taro-hooks",
        ],
      ],
      // ...
    }
    

更新日志

Bugfix & Improvment

  • build type: fix build type for namespace error (05a285b)
  • deps of hooks: fix deps to devDeps for hooks force version conflict (fd72923)
  • type: fix type of feedback hooks (4728379)
  • add create inner: useWebAudioImplement option add (9e1254c)
  • useaudio option: add option set root for context (b63567f)
  • useimage: fix useImage choose function params partial (cf7be5f)
  • usemodal: fix useModal callback type (d1e14a7)

Feature

  • usebackground: add useBackground hook (5f43b0c)
  • usechooseaddress: add useChooseAddress hook (7187d95)
  • useinvoice: add useInvoice hooks (c293b1e)
  • usemanualpulldownrefresh: add useManualPullDownRefresh hook (9b1d18b)
  • usemenubuttonboundingclientrect: add useMenuButtonBoundingClientRect hook (5c7cde6)
  • userequestsubscribemessage: add useRequestSubscribeMessage hook & faq for hooks version (ba3ea2f)
  • usetabbar: add useTabBar hook (d46240c)
  • usetopbartext: add useTopBarText hook (cd22332)
  • usewerun: add useWeRun hook (951826f)
  • faq & useapp: add useApp hooks & faq of useSelectorQuery (3e0ebea)
  • usepage: add usePage hook & useSelectorQuery method scope optional (35b8ab7)

更多更新日志请查看

taro-hooks案例

taro-todolist 💯 : 一款待办事项小程序, 使用taro-hooks开发

推荐

  1. general-tools: github 图床

    小工具库更新了利用GitHub + jsdelivr生成图床. 可点击传送门体验.

  2. react-spring
    react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

    实用且扩展性高的React动画库. 且在多个平台皆有实现:

    @react-spring/konva
    @react-spring/native
    @react-spring/three
    @react-spring/web
    @react-spring/zdog
    
  3. typescript-book
    📚 The definitive guide to TypeScript and possibly the best TypeScript book 📖. Free and Open Source 🌹

  4. tauri
    Tauri is a framework for building tiny, blazing fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS for building their user interface. The backend of the application is a rust-sourced binary with an API that the front-end can interact with.

    rust 版的 electron ?

Discussion (0)