diff --git a/docs/hooks.md b/docs/hooks.md index 5a29aa23a981..678299061321 100644 --- a/docs/hooks.md +++ b/docs/hooks.md @@ -478,7 +478,7 @@ useTabItemTap(item => { const router = useRouter() // { path: '', params: { ... } } ``` -`useRouter` 是 Taro 专有的 Hook，等同于页面为类时的 `Current.router` +`useRouter` 是 Taro 专有的 Hook，等同于页面为类时的 `getCurrentInstance().router` ### `useReady` diff --git a/docs/migration.md b/docs/migration.md index 4a29b4cd5d19..4ca186bacc9b 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -183,21 +183,24 @@ function Excited () { ## 路由 -在旧版本中可以通过 `this.$router` 访问当前组件/页面路由的详情。在 Taro Next 对应的 API 是在 `@tarojs/taro` 中的 `Current.router`，两者的属性一模一样。 +在旧版本中可以通过 `this.$router` 访问当前组件/页面路由的详情。在 Taro Next 对应的 API 是在 `@tarojs/taro` 中的 `getCurrentInstance().router`，两者的属性一模一样。 ```jsx -import { Current } from '@tarojs/taro' +import { getCurrentInstance } from '@tarojs/taro' class C extends Component { + current = getCurrentInstance() + componentWillMount () { - // Current.router 和 this.$router 和属性一样 - console.log(Current.router) + // getCurrentInstance().router 和 this.$router 和属性一样 + console.log(this.current.router) } } // 函数式组件 +import { getCurrentInstance } from '@tarojs/taro' function C () { - const router = Current.router - // Current.router 和 useRouter 返回的内容也一样 + const { router } = getCurrentInstance() + // getCurrentInstance().router 和 useRouter 返回的内容也一样 // const router = useRouter() } ``` @@ -216,7 +219,7 @@ class App extends Component { } ``` -> 聪明的读者已经猜到了，`Current.router` 其实是访问小程序当前页面 `onLoad` 生命周期参数的快捷方式。 +> 聪明的读者已经猜到了，`getCurrentInstance().router` 其实是访问小程序当前页面 `onLoad` 生命周期参数的快捷方式。 ## 样式 @@ -320,4 +323,4 @@ import { useState, useEffect } from 'react' // 框架 Hooks （基础 Hooks） ## $scope 和 $componentType -由于 Taro Next 没有自定义组件，所以也没有了 `this.$scope` 和 `this.$componentType` 的概念。`Current.page` 可以返回当前小程序页面的实例。 +由于 Taro Next 没有自定义组件，所以也没有了 `this.$scope` 和 `this.$componentType` 的概念。`getCurrentInstance().page` 可以返回当前小程序页面的实例。 diff --git a/docs/prerender.md b/docs/prerender.md index c029d45a5ff7..23f74faac6c5 100644 --- a/docs/prerender.md +++ b/docs/prerender.md @@ -52,7 +52,7 @@ module.exports = config // PageConfig 是开发者在 prerender.includes 配置的页面参数 interface PageConfig { path: string // 页面路径 - params: Record // 页面的路由参数，对应 `Current.router.params` + params: Record // 页面的路由参数，对应 `getCurrentInstance().router.params` } // DOM 树数据，Taro 通过遍历它动态渲染数据 diff --git a/docs/react.md b/docs/react.md index f629f8fdc156..32fed72308bc 100644 --- a/docs/react.md +++ b/docs/react.md @@ -67,7 +67,7 @@ export default { > 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 `onLaunch` -在此生命周期中通过 `Current.router.params`，可以访问到程序初始化参数。 +在此生命周期中通过 `getCurrentInstance().router.params`，可以访问到程序初始化参数。 #### componentWillMount() @@ -96,7 +96,7 @@ export default { #### componentDidMount() -页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。此生命周期可以无法访问 `Current.router`。此生命周期可以访问 Taro DOM 并且更改 DOM 或添加事件，但无法通过 `Taro.createSelectorQuery` 查找小程序 DOM。 +页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。此生命周期可以无法访问 `getCurrentInstance().router`。此生命周期可以访问 Taro DOM 并且更改 DOM 或添加事件，但无法通过 `Taro.createSelectorQuery` 查找小程序 DOM。 #### componentDidShow(options) @@ -104,7 +104,7 @@ export default { 程序启动，或从后台进入前台显示时触发，微信小程序中也可以使用 `Taro.onAppShow` 绑定监听 -在此生命周期中通过 `Current.router.params`，可以访问到程序初始化参数。 +在此生命周期中通过 `getCurrentInstance().router.params`，可以访问到程序初始化参数。 参数与 `componentWillMount` 中获取的基本一致，但**百度小程序**中补充两个参数如下 @@ -206,10 +206,10 @@ export default { 在可以非页面组件中，可以使用 Taro 内置的 [消息机制](./apis/about/events) 访问页面组件的 `onReady()` 生命周期： ```jsx -import { eventCenter, Current } from '@tarojs/taro' +import { eventCenter, getCurrentInstance } from '@tarojs/taro' class Test extends React.Component { componentDidMount () { - eventCenter.once(Current.router.onReady, () => { + eventCenter.once(getCurrentInstance().router.onReady, () => { const query = Taro.createSelectorQuery() query.select('#only').boundingClientRect() query.exec(res => { @@ -230,7 +230,7 @@ class Test extends React.Component { #### onLoad(options) -页面创建时执行，此生命周期在小程序端对应小程序页面的 `onLoad` 生命周期。此生命周期可以访问 `Current.router`。 +页面创建时执行，此生命周期在小程序端对应小程序页面的 `onLoad` 生命周期。此生命周期可以访问 `getCurrentInstance().router`。 #### componentWillMount() @@ -238,7 +238,7 @@ class Test extends React.Component { #### componentDidMount() -页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。此生命周期可以访问 `Current.router`。此生命周期可以访问 Taro DOM 并且更改 DOM 或添加事件，但无法通过 `Taro.createSelectorQuery` 查找小程序 DOM。 +页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。此生命周期可以访问 `getCurrentInstance().router`。此生命周期可以访问 Taro DOM 并且更改 DOM 或添加事件，但无法通过 `Taro.createSelectorQuery` 查找小程序 DOM。 #### shouldComponentUpdate(nextProps, nextState) @@ -264,7 +264,7 @@ class Test extends React.Component { 页面隐藏/切入后台时触发， 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等 -**在以上所有的生命周期方法中，都可以通过 `Current.router.params` 获取打开当前页面路径中的参数**。 +**在以上所有的生命周期方法中，都可以通过 `getCurrentInstance().router.params` 获取打开当前页面路径中的参数**。 ### 页面事件处理函数 diff --git a/docs/router.md b/docs/router.md index f5a3d7df9875..1af8eb7dd247 100644 --- a/docs/router.md +++ b/docs/router.md @@ -34,14 +34,14 @@ Taro.navigateTo({ ``` -这样的话，在跳转成功的目标页的**生命周期**方法里就能通过 `Current.router.params` 获取到传入的参数，例如上述跳转，在目标页的 `componentWillMount`（或 Vue 的 `created`） 生命周期里获取入参: +这样的话，在跳转成功的目标页的**生命周期**方法里就能通过 `getCurrentInstance().router.params` 获取到传入的参数，例如上述跳转，在目标页的 `componentWillMount`（或 Vue 的 `created`） 生命周期里获取入参: ```jsx -import { Current } from '@tarojs/taro' +import { getCurrentInstance } from '@tarojs/taro' class C extends Taro.Component { - componentWillMount () { - console.log(Current.router.params) // 输出 { id: 2, type: 'test' } + onReady () { + console.log(getCurrentInstance().router.params) // 输出 { id: 2, type: 'test' } } } ``` diff --git a/docs/vue.md b/docs/vue.md index 45bcb9aabd2d..4475d1231c12 100644 --- a/docs/vue.md +++ b/docs/vue.md @@ -52,7 +52,7 @@ export default { 监听程序初始化，初始化完成时触发（全局只触发一次） -在此生命周期中通过 `Current.router.params`，可以访问到程序初始化参数 +在此生命周期中通过 `getCurrentInstance().router.params`，可以访问到程序初始化参数 参数格式如下 @@ -177,11 +177,11 @@ export default {