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为:

• 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. 下面简单阐述部分配置:

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解析。故部分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"),
              },
            },
          },
        });
      },
    }
    // ...
  }
  

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开发

taro-todolist weapp

taro-todolist h5

推荐

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 ?