微信小程序中 设置全局变量、使用、修改设置

1、全局变量的设置

在miniprogram > app.js 文件中设置,globalData对象就是存储全局变量的。

App({
    globalData: {
      hasLogin: false,
    },
    onLaunch: function () {
      
    }
})

2、全局变量的使用

在app.js文件中,直接使用,如:

this.globalData.hasLogin

在其他非app.js文件中使用,需要先申明app变量,如:

var app = getApp()

app.globalData.hasLogin

3、全局变量的修改

在app.js文件中:

this.globalData.hasLogin = true

在其他非app.js文件中修改:

var app = getApp()

app.globalData.hasLogin = true

转自:https://www.cnblogs.com/yuanyiming/p/11575935.html

### 微信小程序全局变量使用微信小程序中,可以通过多种方式来设置使用全局变量。以下是几种常见的实现方法及其具体示例。 #### 方法一:通过 `App` 对象定义全局变量 这是最常见的方式之一,在 `app.js` 文件中定义全局变量并通过 `getApp()` 获取实例对象访问这些变量。 ##### 定义全局变量 在项目的根目录下的 `app.js` 中初始化全局变量: ```javascript // app.js App({ globalData: { userInfo: null, urlList: ['https://example.com/api', 'https://test.example.com'] } }); ``` ##### 访问全局变量 在任意页面或组件中获取并使用全局变量: ```javascript // page.js 或 component.js Page({ onLoad() { const app = getApp(); console.log(app.globalData.urlList); // 输出全局变量中的url列表[^1] } }); ``` --- #### 方法二:通过独立 `.js` 文件定义全局变量 如果希望将全局变量集中存储在一个单独文件中,则可以选择这种方式。 ##### 创建全局变量文件 创建一个新的 JavaScript 文件(如 `globalVar.js`),用于保存所有的全局变量: ```javascript // globalVar.js const globalVariables = { apiUrl: 'https://api.example.com', appName: 'My Mini Program' }; module.exports = globalVariables; ``` ##### 导入并使用全局变量 在需要使用的页面或组件中导入此文件即可: ```javascript // page.js 或 component.js const globalVars = require('../../utils/globalVar.js'); Page({ data: { apiEndpoint: globalVars.apiUrl }, onLoad() { console.log(globalVars.appName); // 输出应用名称[^3] } }); ``` --- #### 方法三:使用 Redux 进行全局状态管理 对于复杂的小程序项目,推荐采用 Redux 来统一管理全局状态。这不仅能够提升代码可维护性,还能更方便地处理跨模块的数据共享需求。 ##### 配置 Redux Store 安装必要的依赖包后配置 store 并将其集成到小程序框架中: ```javascript // store.js import { createStore } from 'redux'; const initialState = { userLoggedIn: false, token: '' }; function reducer(state = initialState, action) { switch (action.type) { case 'SET_USER_LOGGED_IN': return { ...state, userLoggedIn: true }; default: return state; } } export default createStore(reducer); ``` ##### 调用 Redux State 和 Actions 在页面逻辑中连接 Redux 的 state 和 actions 实现动态更新功能: ```javascript // page.js import React from 'react'; import { connect } from 'react-redux'; class MyComponent extends React.Component { handleLoginClick = () => { this.props.dispatch({ type: 'SET_USER_LOGGED_IN' }); }; render() { return ( <button onClick={this.handleLoginClick}> 登录 </button> ); } } export default connect()(MyComponent); ``` > **注意**:Redux 是一种较为复杂的解决方案,适用于大型项目场景;小型项目建议优先考虑前两种简单方案。 --- #### 总结 以上介绍了三种主要的微信小程序全局变量管理方式——基于 App 对象、外部 JS 文件以及 Redux 库。开发者应根据实际业务规模和技术栈特点选择最适合自己的策略[^4]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值