(:з」∠) art designer ---- ajiang
topic of me!
- ⌨️ I'm a art designer, also make some code!
- 😎 recently, learn rust, command tools and so on...
- ✨ some hobbies like: sleep & game
- 📫 How to reach me: leave message
- 🔈 Pronouns: ajiang
Hooks Library for Taro
Home Page: https://next-taro-hooks.pages.dev
License: MIT License
(:з」∠) art designer ---- ajiang
const [query, { getBoundingClientRect }] = useSelectorQuery();
点击某个元素获取 对应id的节点的信息
这个hooks 真机调试起来非常卡
欢迎使用了 taro-hooks 的朋友们留言 ✨
在下面的复现repo的src/app.tsx里面引入taro-hooks, 控制台就可以看到报错信息。注释掉的话就没问题
可以在app.ts[x]里面正常使用taro-hooks
https://github.com/thundersdata-frontend/taro-style/tree/master/demo
预览工具:微信开发者工具 Stable 1.06.2210310
调试基础库:2.27.2
试用框架:React
$ npx @tarojs/cli init taro-hooks-app
? 请输入项目介绍 Introduce
? 请选择框架 React
? 是否需要使用 TypeScript ? No
? 请选择 CSS 预处理器(Sass/Less/Stylus) Sass
? 请选择编译工具 Webpack5
? 请选择包管理工具 yarn
? 请选择模板源 Github(最新)
√ 拉取远程模板仓库成功!
? 请选择模板 taro-hooks@canary(使用 taro-hooks canary 版本的模板)
$ cd taro-hooks-app && yarn run dev:weapp
# 打开微信开发者工具导入对应项目,等待编译控制台出现error提醒
微信开发者工具正常预览小程序
微信开发者工具预览界面白屏,控制台提示error,hook函数执行报错
👽 Taro v3.5.7
Taro CLI 3.5.7 environment info:
System:
OS: Windows 10
Binaries:
Node: 16.15.1
Yarn: 1.22.19
npm: 8.11.0
系统版本:MacOS 13.0
预览工具:微信开发者工具 Stable 1.06.2210310
调试基础库:2.28.0
试用框架:React
...
"dependencies": {
"@babel/runtime": "^7.7.7",
"@nutui/nutui-react-taro": "^1.3.4",
"@taro-hooks/plugin-react": "2.0.0-beta-serro.5",
"@tarojs/components": "3.5.8",
"@tarojs/helper": "3.5.8",
"@tarojs/plugin-framework-react": "3.5.8",
"@tarojs/plugin-html": "3.5.8",
"@tarojs/plugin-platform-alipay": "3.5.8",
"@tarojs/plugin-platform-jd": "3.5.8",
"@tarojs/plugin-platform-qq": "3.5.8",
"@tarojs/plugin-platform-swan": "3.5.8",
"@tarojs/plugin-platform-tt": "3.5.8",
"@tarojs/plugin-platform-weapp": "3.5.8",
"@tarojs/react": "3.5.8",
"@tarojs/router": "3.5.8",
"@tarojs/runtime": "3.5.8",
"@tarojs/shared": "3.5.8",
"@tarojs/taro": "3.5.8",
"@tarojs/taro-h5": "3.5.8",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-refresh": "^0.11.0",
"taro-hooks": "2.0.0-beta-serro.5"
},
...
...
plugins: ["@tarojs/plugin-html", "@taro-hooks/plugin-react"],
...
framework: "react",
compiler: {
type: "webpack5",
prebundle: {
enable: false,
},
},
...
微信开发者工具正常预览小程序
包管理使用的 pnpm,config/index.js => plugins 中添加 @taro-hooks/shared 启动即报错
正常启动
启动后报错:
(node:81484) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
const systemInfo = useSystemInfo()
能正确获取到SystemInfo
SystemInfo为空对象
浏览器Console 输出错误: 🎮[taro-hooks]---[createUseInfoHook]: fn is not a function. undefined
看源码,是taro_1["default"].getSystemInfoSync为 undefined导致
const systemInfo = useSystemInfo()
console.log(JSON.stringify((systemInfo)))
getUserProfile 点击取消
可以catch
无法catch,控制台异常。
npx @tarojs/[email protected] init taro-hooks-app
选择taro-hooks模版,添加@taro-hooks/plugin-react依赖。
index.tsx文件改成这样,
useRequest提供参数refreshOnWindowFocus后初次渲染仅请求一次。
小程序
返回: accept 或 拒绝。
result 返回 undefined
先查询全部列表,下滑请求到第二页数据A,此时再更改查询条件B,这时候发现第二页的数据A没有被清空(这个数据A不是查询条件B应该获得的)
更改查询条件B以后,应该要把原来请求参数的后面页数数据全部清空
上次查询结果的后面页数的数据残留
理论上来说TARO_ENV 在运行的时候就已经确定了环境,但是看useEnv源码的setter却是在useEffect中触发,是否有什么特殊的case要处理,需要这么做?
如果确定是不可变的,那么用useRef来存性能会更好,一些情况下可以少触发一次render。
function useEnv(): ENV {
return useRef(getEnv()).current
}
微信小程 编译不过 (taro react 环境)
版本:2.0.0-beta-serro.3
./node_modules/@taro-hooks/shared/dist/shared.esm.js 12:20
Module parse failed: Unexpected token (12:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| ENV_TYPE["JD"] = "JD";
| })(ENV_TYPE || (ENV_TYPE = {}));
const ENV = process?.env?.TARO_ENV;
| const ISWEAPP = ENV === ENV_TYPE.WEAPP;
| const ISWEB = ENV === ENV_TYPE.WEB;
原原生taro方法一致
被当做json串处理了。
Labeled Tuple Elements 是 TypeScript 4.0 才引入的新特性,老版本没法用,建议少用。
建议少用 Labeled Tuple Elements,改用 Const Assertions,既方便,兼容性又好。
问题: 小程序中使用,打开页面直接报错。
定位:在useImage 中应用了BLOB属性。
不报错。
报错。
假如遍历fetchKey去执行mutate,会自动还原数据
示例代码:codesandbox
npm install
project.alipay.json
设置developOptions.hotReload
为true
npm run dev:alipay
获取到app中的globalData
例如ahooks useRequest 的 retryCount
taro-hooks
依赖了 @taro-hooks/core
,但是没有将其添加为依赖:
相关 issues:NervJS/taro#14181
命令行:
taro init taro_hooks
? 请输入项目介绍 taro
? 请选择框架 React
? 是否需要使用 TypeScript ? Yes
? 请选择 CSS 预处理器(Sass/Less/Stylus) Less
? 请选择编译工具 Webpack5
? 请选择包管理工具 npm
? 请选择模板源 Github(最新)
✔ 拉取远程模板仓库成功!
? 请选择模板 taro-hooks(使用 taro-hooks 的模板)
taro-hooks 模板正常运行
taro-hooks 模板运行失败
直接用vscode打开项目,在pages/index/index.tsx文件里有一个import from '@taro-hooks/core'的地方,可以看到这里提示说找不到这个模块。但是功能是正常的,只是TS在报错。
我已经检查过,在types/global.d.ts里面已经按照文档引入了对应的类型文件
TS不报错
TS提示找不到@taro-hooks/core
这个模块
https://github.com/thundersdata-frontend/taro-style/tree/master/demo
我看了包内的源码,好像并未封装preloadData,无论是useRouter内的preloadData还是usePreload,usePreload直接使用的是useRouter的方法,而preloadData没有进行任何操作。无论是route.preloadData还是const [preloadData] = usePreload();preloadData都为空
ScrollView
触发 onScrollToLower
时再执行
见以下最小复现demo
https://github.com/ChenLiheng/useRequestDemo
在使用useRequest,并且使用了debounceInterval,会报上述错误
查看源代码 是 p.Date.now 报错,应该是 ahook的问题,我单独使用ahook里的防抖和节流函数也会报这个错误
taro-hooks 下载下来后发现里面并没有usePullDownRefresh这个包,然后我把taro更新到最新的3.4.x重新下载了taro-hooks发现的lib里面
还是没usePullDownRefresh这个包 是bug还是说我的问题
yarn dev:h5
正常启动
报错
https://github.com/guwan/taro-hooks-bug-report.git
按 https://github.com/innocces/taro-hooks/tree/next#-quick-start 改了两处。
yarn add @taro-hooks/plugin-react
plugins: ['@taro-hooks/plugin-react']
没啥用。
在TypeScript的环境下,useEvent的返回类型有问题,会报 TS2339: Property 'emitEvent' does not exist on type 'IState | { dispatch: Dispatch ; setListener: (eventName: string, ...handlers: eventHandler[]) => void; setListenerOnce: (eventName: string, handler: eventHandler) => void; removeListener: (eventName?: string | undefined, handler?: eventHandler | undefined) => void; emitEvent: (eventName: string, ...params: a...'.
应当像useState一样返回一个typed list如[IState, ICallback]
源码中应在返回这个list后加 as const
现在支持unplugin-auto-import吗, 支持以后页面应该除了组件库基本上可以不需要额外的引入
plugin-react
的实现,里面没用对preact的判断,导致无法与preact一起使用,能否加上preact的兼容
兼容preact
有没有办法实现类似 axios 的 interceptors ? 实现统一在请求前进行参数的修改或者请求后的错误处理?
yarn dev:weapp
运行成功
运行失败
h5端可以正常运行
resolve 'react' in 'D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\dist'
Parsed request is a module
using description file: D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\package.json (relative path: ./dist)
aliased with mapping 'react': 'cjs/react.production.min.js' to 'cjs/react.production.min.js'
Parsed request is a module
using description file: D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\package.json (relative path: ./dist)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\dist\node_modules doesn't exist or is not a directory
looking for modules in D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\node_modules
D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\node_modules\cjs doesn't exist
D:\workplace\taro\hooks-demo\node_modules@taro-hooks\node_modules doesn't exist or is not a directory
D:\workplace\taro\hooks-demo\node_modules\node_modules doesn't exist or is not a directory
looking for modules in D:\workplace\taro\hooks-demo\node_modules
D:\workplace\taro\hooks-demo\node_modules\cjs doesn't exist
D:\workplace\taro\node_modules doesn't exist or is not a directory
D:\workplace\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory→ Watching... [2023/7/27 12:05:19]
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Array]".] {
code: 'ERR_UNHANDLED_REJECTION'
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.