lblblong / tarojs-router-next Goto Github PK
View Code? Open in Web Editor NEWTaro 小程序路由库/自动生成带参数类型提示的路由方法/允许传递任意类型、任意大小的参数数据/同步的路由方法调用/koa体验一致的路由中间件
Home Page: http://lblblib.gitee.io/tarojs-router-next/
License: MIT License
Taro 小程序路由库/自动生成带参数类型提示的路由方法/允许传递任意类型、任意大小的参数数据/同步的路由方法调用/koa体验一致的路由中间件
Home Page: http://lblblib.gitee.io/tarojs-router-next/
License: MIT License
该路由库在微信小程序端是否支持当页面栈达到10个时继续打开页面的功能?
类似转转的跳转库,对页面栈进行了一层维护。
大佬你好,我现在的需求就是:小程序进入首页之前就要进行拦截,并判断用户是否登录且有访问权限。因为首页的几个请求已经涉及到要传token了。但是路由中间件对此无效。看了还是通过http请求后的状态码来进行判断并跳转了。
我在taro-vue3项目中使用, 提示我了一些关于react的报错 1.You might have mismatching versions of React and the renderer (such as React DOM)
版本: 3.1.0
问题描述: Can't resolve 'src/lib/compose'
错误:
ERROR in ./node_modules/tarojs-router-next/dist/middleware/index.js 180:16-42
Module not found: Error: Can't resolve 'src/lib/compose' in 'E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\dist\middleware'
resolve 'src/lib/compose' in 'E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\dist\middleware'
Parsed request is a module
using description file: E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\package.json (relative path: ./dist/middleware)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\dist\middleware\node_modules doesn't exist or is not a directory
E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\dist\node_modules doesn't exist or is not a directory
E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\node_modules doesn't exist or is not a directory
E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\node_modules doesn't exist or is not a directory
looking for modules in E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules
E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\src doesn't exist
E:\workspace_xuct\xuct-calendar\node_modules doesn't exist or is not a directory
E:\workspace_xuct\node_modules doesn't exist or is not a directory
E:\node_modules doesn't exist or is not a directory
@ ./node_modules/tarojs-router-next/dist/index.js 20:19-42
@ ./src/pages/aboutus/index.tsx 20:0-40 100:10-30
@ ./src/app.config.ts 343:15-46
如题。
底部tabBar配置的跳转,不走中间件对吗,使用 Router.toUser方法可以是这样吗
新增 pages对象,根据页面文件树生成该对象:
const source_pages = [
{
name: 'pages',
type: 'folder',
children: [
{
name: 'page_a',
type: 'page',
path: '/pages/page_a',
children: [
{
name: 'page_a_1',
type: 'page',
path: '/pages/page_a'
}
]
},
{
name: 'page_b',
type: 'folder'
},
{
name: 'page_c',
type: 'folder'
}
]
}
]
// 遍历之后转换为
export const pages = {
pages: {
page_a: {
path: '/pages/page_a',
page_a_1: '/pages/page_a'
},
page_b: {},
page_c: {}
}
}
可以直接使用导出的pages对象,就能有提示啦,这样的路由才是完美的,考虑一下哈
通过中间件做页面权限设置时,如果用户取消授权,可否终止此次路由跳转?
route.config.ts
导入其他类型,编译后会变成any?
`
// pages/authCenter/index
Router.back({ a: 'xxxxxx' })
// pages/home/index
const handleToAuthCenter = async (): Promise => {
try {
const data = await Router.toAuthCenter()
console.log('data ==>: ', data)
} catch (error) {
console.warn('error: ', error)
}
}`
跳转至 authCenter 页面,返回时没有带回来数据
https://nervjs.github.io/taro/docs/apis/route/navigateTo
有时候需要子页面选择一些内容后,弹出,然后给父页面传值,这个功能还是需要用的。
Taro.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function (res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
你好,你那个动态的类型是怎么实现的?
使用taro.navigateTo 正常
老哥,感谢开发这么优秀的库,感觉很实用。
import 'tarojs-router-next/register'
在app.tsx中引入后报错
Uncaught ReferenceError: App is not defined
at eval (register.js?fef1:3)
at Object../node_modules/tarojs-router-next/register.js (app.js:4988)
at __webpack_require__ (app.js:64)
at eval (app.tsx:8)
at Module../src/app.tsx (app.js:5148)
at __webpack_require__ (app.js:64)
at eval (app.config.ts?32f2:1)
at Module../src/app.config.ts (app.js:5125)
at __webpack_require__ (app.js:64)
at Object.0 (app.js:7403)
相关依赖
"@tarojs/cli": "3.0.8",
"@tarojs/components": "3.0.8",
"@tarojs/react": "3.0.8",
"@tarojs/runtime": "3.0.8",
"@tarojs/taro": "3.0.8",
最后提一点个人的优化小建议:
基于路由的生成目前是监听pages
目录下的一级目录
app.config.ts
中的路由配置去自动生成对应的代码,这样可能比较更符合使用中的实际情况,未配置的路由也不使用,也没必要生成路由不是吗。你好想请教一下:
目前路由中间件只能拦截使用Router类跳转的场景。
当直接访问需要受拦截的页面,拦截并不生效,这其实是没有真正的拦截页面,有什么方式可以做到真正的拦截路由吗?
我想到的可能的方案:
router_key在一些原本就有参数的跳转场景中,会再在地址后面加"?router_key=xxxx"
如 ”localhost:8080/home?id=1000“ 跳转时有可能发生 ”localhost:8080/home?id=1000?router_key=xxxx“
而不是”localhost:8080/home?id=1000&router_key=xxxx“
而且有可能无限添加”router_key“
请问router_key是否可以提供配置将其隐藏,或者再更新该值的时候检测地址是否携带其他参数或router_key
小程序处于激活状态,在某个页面不做任何操作,手机息屏或者锁屏解锁后,再通过 Router.getParams() 获取不到 之前的参数
如题
{
"name": "testA",
"version": "1.0.0",
"private": true,
"description": "dd",
"templateInfo": {
"name": "taro-ui",
"typescript": true,
"css": "less"
},
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:jd": "taro build --type jd",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
},
"browserslist": [
"last 3 versions",
"Android >= 4.1",
"ios >= 8"
],
"author": "",
"dependencies": {
"@babel/runtime": "^7.7.7",
"@tarojs/cli": "3.2.1",
"@tarojs/components": "3.2.1",
"@tarojs/runtime": "3.2.1",
"@tarojs/taro": "3.2.1",
"lodash": "4.17.15",
"@tarojs/react": "3.2.1",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"taro-ui": "^3.0.0-alpha.3"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@tarojs/mini-runner": "3.2.1",
"@tarojs/webpack-runner": "3.2.1",
"@types/react": "^17.0.2",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^4.15.1",
"@typescript-eslint/parser": "^4.15.1",
"babel-preset-taro": "3.2.1",
"eslint": "^6.8.0",
"eslint-config-taro": "3.2.1",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^4.2.0",
"stylelint": "9.3.0",
"tarojs-router-next": "^1.3.2",
"typescript": "^4.1.0"
}
}
希望新增一个函数走navigate接口的流程,但不希望走最后的跳转middleware,并且可以把后面的 compose(middlewares)结果返回
场景:落地页权限自检
跳转的页面栈越来越多,不知不觉可能就到了十层了 再用navigateTo去跳转就跳不动了
Router.home = {
177 | to: to,
178 | : .DSStore,
| ^
179 | function: function (options) { return Router.navigate({ url: "/subpackages/pages/.DS_Store/index" }, options); },
180 | toHome: function (options) { return Router.navigate({ url: "/subpackages/pages/home/index" }, options);
老板什么时候适配3.5.2?
taro封装的太死了,在h5上的路由切换是没有任何转场动画的,就是屏幕闪了下,但是想实现转场动画,发现根本加不上,你有思路吗?
在Taro v3.0.26正常,但在升级 3.0.27 及3.1.1后报错
TypeError: _tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default.a.navigateTo is not a function
页面通过链接访问的时候不执行中间件,如何解决?
./node_modules/tarojs-router-next/dist/router/index.js
Module not found: Error: Can't resolve 'src/func/isNil' in 'xxx\node_modules\tarojs-router-next\dist\router'
resolve 'src/func/isNil' in 'E:\Projects\Work\MJK\efms_mini_program_taro\node_modules\tarojs-router-next\dist\router'
Parsed request is a module
using description file: xxx\node_modules\tarojs-router-next\package.json (relative path: ./dist/router)
查看代码发现实际导入的应该是 dist 文件夹下 func\isNil 文件,所有路径为 src 的都有这个报错
config/index.js 中我只是按文档引入了 tarojs-router-next-plugin
\tarojs-router-next-plugin\dist\router-code-generator\index.js:113
this.ctx.onBuildStart(function () {
^
TypeError: this.ctx.onBuildStart is not a function
at RouterCodeGenerator.listenBuildStart (E:\workspace_xuct\calendar\xuct-calendar-weapp\node_modules\tarojs-router-next-plugin\src\router-code-generator\index.ts:84:14)
at E:\workspace_xuct\calendar\xuct-calendar-weapp\node_modules\tarojs-router-next-plugin\src\index.ts:5:40
at Kernel.initPlugin (D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:111:16)
at Kernel.resolvePlugins (D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:86:18)
at Kernel.initPresetsAndPlugins (D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:74:14)
at Kernel. (D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:261:18)
at Generator.next ()
at D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:8:71
at new Promise ()
at __awaiter (D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:4:12)
欢迎大家晒出自己的App~
yarn dev:h5 时候报错,找不到vue模块
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.