• home > webfront > AppDev > taro >

    taro 全局变量四种方法

    Author:zhoulujun Date:

    taro全局变量使用上,无非设置taro实体上(类似windows或者window app = new Vue()),第二就是页面url参数上(但是taro的小程序并没有r

    taro全局变量使用上,无非设置taro实体上(类似windows或者window.app = new Vue()),第二就是页面url参数上(但是taro的小程序并没有router 像 react或者vue router方便,第三个就是设置在redux  store 里面。

    使用getApp()方法

    在taro中,使用Taro.getApp(),能获取到App的实例,可以通过这种办法,把全局变量写入App实例中。要在构造函数中创建,或者在函数外定义,如果在componentDidMount()函数中定义无效。

    // app.jsx   定义
    class App extends Component {
      constructor() {
        super();
        // 构造函数内定义一个a
        this.a = "is a";
      }
        // 函数外定义一个b
        b="is b";
          ...
    }
    //  index.jsx 获取
    const app = Taro.getApp();
    console.log(app.a)      // is a
    console.log(app.b)      // is b


    使用config下的env

    配置完,如果是开监听模式,请关闭监听,重新监听并编译,否则无效

    在config目录下编辑。在文件中dev.js,配置env。在这里,官方给出的NODE_ENV值为 '"development"',使用单引号,再使用双引号。但是自己在如上所述的环境下,直接使用单引号或者双引号可以直接访问。

    // dev.js 定义
    ...
    env: {
        NODE_ENV: '"development"',
        AAA: "is AAA"        // 定义一个AAA
      },
    ...
    // index.jxs 获取使用
    ...
    console.log(process.env.AAA)    // is AAA
    ...

    在config文件下的三个文件中均能配置env,下面的 defineConstants 也一样。

    使用config下的defineConstants

    这个配置下的定义可以直接使用,所以一定要避免重复定义变量,要起作用,也要重启编译。

    // dev.js 定义
    defineConstants:{
            HOST: "https://demo.cn/"
    }
    // index.jsx 获取并使用
    ...
    // 直接使用变量名
    console.log(HOST)   // https://demo.cn/
    ...


    使用引入的方式import Golbal from path/golbal

    这种方法就是基础常规的方法,网上有很多关于此类的写法及其作用。

    1. 为了好管理,将全局变量写在一个文件中,统一管理。即在 src 目录下创建一个任意名字文件夹,例如 config 文件夹

    2. 在 config 文件夹下创建一个任意的名字的文件,例如golbal.jsx

    3. 将数据变量 exports 出来。

    4. 使用的时候,使用 import 就可以了


    使用redux

    import Taro, { FC, useState, useEffect } from '@tarojs/taro'
    const Page: FC = () => {
      const [ userList, setUserList ] = useState<userList>([])
      const [ hasMore, setHasMore ] = useState<boolean>(true)
      useEffect(() => {
        getFollowedList()
      }, [])
      
    }
    function mapStateToProps(state) {
      const {user} = state
      return {user}
    }
    @connect(mapStateToProps)
    class Index extends Component<IProps, PageState> {}

    这个也是一个好办法



    转载本站文章《taro 全局变量四种方法》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/AppDev/taro/8709.html