taro-hooks v1.4.7

#react #javascript #webdev #devops

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

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

概要

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

useBackground: 动态设置窗口
useChooseAddress: 获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址
useManualPullDownRefresh: 手动下拉刷新
useMenuButtonBoundingClientRect: 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点
useRequestSubscribeMessage: 请求订阅消息
useTabBar: 操作 Tab
useTopBarText: 动态设置置顶栏文字内容
useWeRun: 获取微信运动数据
useApp: 获取当前程序的唯一实例以及全局数据
usePage: 获取当前页面(栈)

其他

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

在`taro 2.x`中使用`taro-hooks`

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

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

由于早版本的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"
    ),
  },
  // ...
}

由于taro-hooks内部不会经由taro解析。故部分api在h5端不会走对应的default或者cjs的模式, 所以若需要在h5端使用, 还需增加h5端webpackChain的模块解析, 这里简单的为大家提供一个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"),
            },
          },
        },
      });
    },
  }
  // ...
}

需要手动配置按需加载
- 需下载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)