DEV Community: 阿酱

taro-hooks v1.4.7

阿酱 — Thu, 07 Oct 2021 14:38:08 +0000

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)

更多更新日志请查看

`taro-hooks`案例

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

taro-todolist weapp

taro-todolist h5

Taro Hooks V1.3.0

阿酱 — Sun, 12 Sep 2021 13:32:35 +0000

距离taro-hooksv1.0.0发布已经过去将近一个月的时间。期间taro-hooks又发布了 6 个版本(其中包含三个修复补丁和 3 个小版本). taro-hooks基本保持着每周发布一个版本的频率在维护更新. 目前taro-hooks已经拥有 37+hooks可供使用。覆盖了将近 60%的官方api.

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

概要

此次更新主要以小程序专属hook为主, 增加了常用hook如:

useScanCode: 扫码相关
useAuthorize: 授权、设置授权相关
useLogin: 登录相关
useUserInfo: 获取以及展示用户信息相关

其他

增加脚手架模板增加了taro init初始化创建模板. 具体使用方式如下:

// 确保node版本在12+
$ node -v
$ v12.22.1
$ npx @tarojs/cli init taro-hooks-demo
// 框架选择React
$ ? 请选择框架 React
// 模板源选择: github (确保可拉取到 taro-hooks 模板)
$ ? 请选择模板源
$   Gitee（最快）
$ ❯ Github（最新）
// 后面提示选择模板时: 选择 taro-hooks 模板
$ ? 请选择模板
$   mobx
$   react-native
$   redux
$ ❯ taro-hooks（使用 taro-hooks 的模板）
$   taro-ui（使用 taro-ui 的模板）
// 后面等待安装成功, 运行对应端命令即可查看模板示例
$ cd taro-hooks-demo
$ yarn dev:weapp
$ yarn dev:h5

tree shaking 关于tree shaking是大家比较关心的一个问题. taro-hooks 的 js 代码默认支持基于 ES modules 的 tree shaking . 但你依然可以显式的使用babel-plugin-import去设置按需加载, 设置方式如下:

// babel.config.js
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'taro-hooks',
        camel2DashComponentName: false,
      },
      'taro-hooks',
    ],
  ],
};

更新日志

Bugfix & Improvment

update useSystemInfo and useLaunchOptions (6c08d96)
update useStorage to sync (18f96f4)
fix useBattery ios level async problem (5c3d937)
fix useVibrate interval to auto close (8e4808e)
improve useUpdateManager behavior and app index check update (411684c)

Feature

update taro version to 3.3.6(latest) (547080a)
add useAccountInfo hook (cd8aa61)
add useAuthorize hook (c0ec57c)
add useLogin, useUserInfo hooks (fa74d86)
add useScanCode hook (1a55a65)

更多更新日志请查看

Taro-hooks V1.0 🎉

阿酱 — Mon, 16 Aug 2021 12:49:28 +0000

Taro-hooks V1.0 🎉

taro-hooks 是一个将taro api以hooks的形式改写的工具库。仅可在React中使用。

在v1.0版本中, 主要实现了35个hook。

部分api被合并, 故覆盖率还是很高的。其中还整合了ahooks中的useRequest, 使其更加适配taro。

以及api的Promise化。并且部分h5不支持的api也做了一定的补齐。大家详情可以查看taro-hooks官网

作用

可以称之为: 为什么要写taro-hooks?

其实原因有两个:

更佳便捷、直观、函数化的调用
与其说是加工, 不如说是简化大部分的api使用了初始配置。以及引用抛出的做法。比如类似audio、record诸如此类的全局唯一管理实例, 在使用对应hook的同时就相应的实例化了对应的全局实例。当然这并不是强制性的, 同时还提供了手动创建的方法。此外比如反馈型的Toast、Modal等。初始配置可以贯穿整个内部使用的过程, 很大程度减少了部分代码量的冗余。还方便了参数的传递。

快速体验

项目文档使用了dumi进行开发。这当中直接使用taro3.3.1进行了文档demo的书写。故侧面生成了两个使用taro-hooks的示例。大家可参考对应的项目来体验taro-hooks。也欢迎大家来github多多pr和issue。

Taro-hooks weapp

Taro-hooks h5

截图展示

交流

issue
discussions
欢迎大家进入taro-hooks 交流群

DEV Community: 阿酱

taro-hooks v1.4.7

概要

其他

在taro 2.x中使用taro-hooks

更新日志

Bugfix & Improvment

Feature

taro-hooks案例

推荐

Taro Hooks V1.3.0

概要

其他

更新日志

Bugfix & Improvment

Feature

推荐

Taro-hooks V1.0 🎉

Taro-hooks V1.0 🎉

作用

分类

快速体验

截图展示

交流

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

`taro-hooks`案例