解决微信小程序中在其他页面无法使用app.js中获取的userInfo或openid的问题

最新推荐文章于 2025-10-04 19:52:47 发布
原创 最新推荐文章于 2025-10-04 19:52:47 发布 · 2.3w 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信 #小程序

本文介绍了一个在微信小程序中获取并正确使用用户信息的方法。通过改进全局变量的设置和使用回调函数来解决异步获取用户信息时的问题。

问题

最近写小程序中，在app.js里获取用户的openid和userinfo，并存储为全局变量：

getUserInfo: function () {
    var that = this
    wx.getUserInfo({
        success: function (res) {
            console.log('用户信息', res.userInfo)
                that.globalData.userInfo = res.userInfo
            }
        })
    },

然而当在index中调用getApp().globalData.userOpenid时却返回为空值。

原因

因为wx.getUserInfo为异步获取的信息。

解决方式

将getuserInfo改为回调函数：

getUserInfo: function (cb) {
        var that = this
        if (this.globalData.userInfo) {
            typeof cb == "function" && cb(this.globalData.userInfo)
        } else {
            wx.getUserInfo({
                success: function (res) {
                    console.log('用户信息', res.userInfo)
                    that.globalData.userInfo = res.userInfo
                    typeof cb == "function" && cb(that.globalData.userInfo)
                }
            })
        }
    },

在其他需要使用userinfo的页面中通过getApp().getUserInfo(function(userinfo){console.log(userinfo);})这种方式调用。

或者在onload函数中：

    onLoad: function (options) {
        var that = this
        getApp().getUserOpenid(function (openid) {
            that.setData({
                userName: getApp().globalData.userInfo.nickName,
                userOpenid: openid
            })
            console.log('用户openid', that.data.userOpenid)
        })

    },
【BUG】微信小程序扫码获取不到scene参数的bug修复
iamzchi
12-10 4684
扫码后获取不到scene，必须点击“重新进入小程序”才可以。
微信小程序授权登录写在app.js获取数据
hellow_tommer的博客
09-30 2442
小程序授权登录就不多说了，官方文档上都有， 那么大家获取数据时，都会怎么存储数据呢? 也许是使用 App({ onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, globalData: { useri
小程序异步获取的openid在其他组件加载中无法获取
俗人
12-26 523
1.最近遇到了个问题，就是我想把openid作为全局变量，然后在其他组件的onLoad中使用，但是请求是异步的，经常是组件的onLoad已经执行了，openid还没有请求到，看下我的解决方法
微信小程序中 index.js文件
最新发布
weixin_73503631的博客
10-04 561
摘要：微信小程序的index.js是页面逻辑控制核心，通过Page()构造器管理数据、生命周期、交互事件和网络请求。它负责数据绑定（需用setData()更新）、处理页面生命周期钩子（如onLoad/onShow）、响应用户操作（按钮点击/输入等）、发起网络请求（wx.request）及调用微信API（如弹窗/跳转）。与同目录下的wxml（结构）、wxss（样式）、json（配置）共同构成完整页面，其中与wxml通过数据绑定实现动态渲染。
小程序App.js数据给其他页面公用
weixin_41937579的博客
06-18 890
解决app.js异步数据问题。很多时候会发生app.js里onLaunch请求到的数据 在其他页面的onload执行之后，这样导致我们onload里不能成功拿到app.js里的数据
小程序中app.js异步获取数据，首页无法获取到数据的问题
qq_31594665的博客
11-02 485
页面【index.js】应用【app.js】
关于微信小程序在app.js修改后的全局变量值在其他页面异步获取的问题
weixin_44519496的博客
10-16 957
前言 虽然app.js先于index.js。但是修改app.js中的全局变量是异步请求，如果你想在index.js里获取app.js修改后的值，那么需要使用promise来实现异步。 //app.js App({ globalData: { userInfo: null }, // 检测授权 getauthor: function () { return new Promise((resolve, reject) => { wx.getSett
微信小程序开发：解决“app.json未找到”错误的原因与解决方法
热门推荐
CccCY_U的博客
02-01 1万+
微信小程序开发：解决“app.json未找到”错误的原因与解决方法
微信小程序如何获取openid及用户信息
11-27
- **2.2 实例化全局方法**：在其他需要获取用户信息的页面或组件中，可以通过调用`app.getUserInfo()`来获取并更新数据。例如： ```javascript var that = this; // 调用应用实例的方法获取全局数据 app....
uni-app微信小程序登录授权的实现
10-15
本文将深入探讨如何在uni-app中实现微信小程序的登录授权，并提供详细的步骤和示例代码。 首先，我们需要在小程序界面设置一个授权按钮。这个按钮通常包含在模板中，它的`open-type`属性应设置为`getUserInfo`，...
精选资源
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
01-03
微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: ogtVM5RWdfadfasdfadfadV5s ...
微信小程序开发一键登录 获取session_key和openid实例
09-01
然后，在小程序的全局配置文件`app.js`或相关页面中引入该库，并进行初始化，填写从LeanCloud获取的`appId`和`appKey`。 ```javascript const AV = require('../../utils/av-weapp.js'); AV.init({ appId: 'EJx0...
微信小程序app.js中保存值的方式，获取openid过程中踩的坑
qq_35608652的博客
06-05 3599
最近在做微信小程序的项目，刚刚上手踩了不少坑，此处记录一下获取openid的时候遇到的一个小问题。 获取openid的时候一切正常，但是在app.js中要把取得的openid放入缓存的时候一直报错 这是我第一次处理返回值的代码，我用了setData的方式： 返回的错误信息： 解决方法： 微信小程序的的全局存储wx.setStorage ...
微信小程序 app.js 操作 页面js方法
weixin_38984353的博客
10-15 6328
由于在全局app.js监听蓝牙返回数据，所以在app.js页面调用当前页面方法来改变页面显示状态；
uniapp调用微信小程序wx.getFuzzylocation没反应
m0_61629497的博客
02-15 1825
uniapp调用wx.getFuzzyLocation时可能出现的bug？
微信小程序getApp()和App()方法详解
weixin_47518648的博客
08-30 1万+
一、App() App(）是注册一个小程序，小程序的入口方法，写在app.js文件里。 开发时我们主要是把一些全局变量，全局方法放在App()里面，比如用户名，请求数据时的URL等。 // app.js App({ onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs)
js 获取上个页面的地址_微信小程序在app.js修改后的全局变量值在其他页面异步获取的问题
weixin_39665507的博客
11-24 267
虽然app.js先于index.js。但是修改app.js中的全局变量是异步请求，如果你想在index.js里获取app.js修改后的值，那么需要使用promise来实现异步。小程序默认项目自带了一种获取授权头像的信息了promise实现异步操作同步显示流程app.jsApp({ //获取授权的头像信息 检测授权 getUserInfo() { return new Promis...
微信小程序getApp().globalData.user无法获取值
TedLau的博客
01-11 3476
getApp().globalData获取具体值
小程序：解决真机无法调用getLoation/chooseLocation的问题，还是权限问题。
m0_37543276的博客
10-18 2153
解决小程序地理位置权限的一个问题。
微信小程序app.js与index.js
07-13
<think>首先，用户的问题是想理解微信小程序中app.js和index.js的作用及区别。我需要基于提供的引用内容来构建回答。 回顾引用内容： - 引用[1]：讨论了在index.js中获取openid时处理app.js数据同步的问题，使用了回调函数。 - 引用[2]：提到app.js是微信小程序的入口文件，涉及session_key和openid的获取。 - 引用[3]：讨论了在index.js中获取app.js的异步数据（如userInfo）的问题，避免不必要的网络请求。 - 引用[4]：详细描述了index.js中的事件处理，包括绑定事件和获取用户信息。 关键点： - app.js 是小程序的全局入口文件，用于定义全局变量和函数，如 globalData。 - index.js 是特定页面的逻辑文件，如首页的逻辑。 作用和区别： - app.js：全局作用，管理小程序的生命周期事件（如 onLaunch, onShow），存储全局数据（如 openid, userInfo），处理全局逻辑。 - index.js：页面作用，处理特定页面的生命周期事件（如 onLoad, onShow），定义页面数据和方法，处理用户交互。 我需要结构化回答： 1. **介绍 app.js 的作用**： - 小程序入口文件。 - 定义全局数据（globalData）。 - 处理小程序启动时的逻辑（如登录、获取 openid）。 - 基于引用[1][2][3]，app.js 处理异步数据获取，如 openid 和 userInfo。 2. **介绍 index.js 的作用**： - 页面逻辑文件。 - 处理页面加载、显示等事件。 - 定义页面数据和方法。 - 基于引用[1][4]，index.js 可能访问 app.js 的全局数据，如获取 openid 或 userInfo。 3. **区别**： - 作用域：app.js 全局，index.js 页面级。 - 数据共享：index.js 可以通过 getApp() 访问 app.js 的 globalData。 - 生命周期：app.js 处理小程序整体生命周期，index.js 处理页面生命周期。 - 异步处理：引用[1][3] 强调数据同步问题，如确保在 index.js 中获取到 app.js 的异步数据。 4. **示例**： - 从引用[1]：index.js 中定义回调函数来处理 app.js 数据未准备好的情况。 - 从引用[4]：index.js 中定义 getUserInfo 方法。 5. **生成相关问题**： - 基于主题，生成 2-3 个相关问题。 - 例如：如何在小程序页面间共享数据？如何处理 app.js 的异步数据在页面中使用？ 6. **格式要求**： - 使用中文回答。 - 行内数学表达式用 $...$，但这里可能不涉及数学，所以忽略。 - 独立公式用 $$...$$，同样可能不适用。 - 引用末尾添加引用标识，如 [^1]。 - 回答结构清晰，逐步解决问题。 7. **引用处理**： - 在回答中引用相关部分时，添加引用标识。例如，提到数据同步时引用 [^1]。 结构化回答： - **开头**：简要介绍 app.js 和 index.js。 - **app.js 作用**：详细说明。 - **index.js 作用**：详细说明。 - **区别总结**：列表或对比。 - **示例**：简要代码或描述。 - **相关问题**：结尾生成相关问题。 确保回答真实可靠，基于引用内容。</think>### 微信小程序中 app.js 与 index.js 的作用及区别 在微信小程序开发中，`app.js` 和 `index.js` 是两个核心文件，分别负责全局逻辑和页面逻辑。理解它们的作用及区别，有助于高效开发小程序。以下基于微信小程序官方文档和实际开发实践进行说明，我将逐步解析。 #### 1. **app.js 的作用** `app.js` 是小程序的全局入口文件，它在小程序启动时首先执行，负责管理整个应用的全局状态和生命周期事件。主要作用包括： - **定义全局数据**：通过 `globalData` 对象存储共享数据（如用户 openid、session_key、用户信息等），这些数据可在所有页面访问。例如，在 `app.js` 中获取 openid 后，其他页面可直接使用，避免重复请求[^1][^2]。 - **处理小程序生命周期事件**：如 `onLaunch`（小程序初始化时触发）、`onShow`（小程序显示时触发）等。这些事件用于执行全局逻辑，如登录、权限检查或异步数据初始化[^3][^4]。 - **提供全局方法**：可定义公共函数（如网络请求封装），供所有页面调用。 - **数据同步机制**：`app.js` 常处理异步操作（如云函数调用），并通过回调或 Promise 确保数据在页面中可用。例如，在 `onLaunch` 中获取 openid，并通过 `globalData` 共享[^1][^3]。 示例代码（简化自引用[1][3]）： ```javascript // app.js App({ globalData: { openid: null, userInfo: null }, onLaunch: function() { // 异步获取 openid（模拟） wx.cloud.callFunction({ name: 'getOpenid' }).then(res => { this.globalData.openid = res.result.openid; }); } }); ``` #### 2. **index.js 的作用** `index.js` 是特定页面的逻辑文件（如首页），它只作用于当前页面，负责处理页面级逻辑和用户交互。主要作用包括： - **定义页面数据和方法**：通过 `Page` 函数设置页面数据（`data` 对象）和事件处理函数（如按钮点击）。例如，在首页中定义 `userInfo` 数据和 `getUserInfo` 方法[^4]。 - **处理页面生命周期事件**：如 `onLoad`（页面加载时触发）、`onShow`（页面显示时触发）等。这些事件用于初始化页面数据或绑定事件。 - **访问全局数据**：通过 `getApp()` 获取 `app.js` 的实例，从而读取或修改 `globalData`。例如，在 `onLoad` 中检查 `app.globalData.openid` 是否就绪[^1][^4]。 - **处理用户交互**：如绑定事件（`bindTap`）和导航（`wx.navigateTo`），响应页面内操作[^4]。 示例代码（简化自引用[1][4]）： ```javascript // index.js const app = getApp(); // 获取 app.js 实例 Page({ data: { id: null, userInfo: null }, onLoad: function() { // 访问 app.js 的全局数据 if (app.globalData.openid) { this.setData({ id: app.globalData.openid }); } else { // 定义回调处理数据未就绪的情况 app.indexCallback = (data) => { if (data) this.setData({ id: data }); }; } }, getUserInfo: function(e) { // 处理用户授权信息 console.log(e.detail.userInfo); app.globalData.userInfo = e.detail.userInfo; // 更新全局数据 this.setData({ userInfo: e.detail.userInfo }); } }); ``` #### 3. **app.js 与 index.js 的主要区别** 以下是关键区别的总结表，便于快速理解： | 方面 | app.js | index.js | |------|--------|----------| | **作用域** | 全局（整个小程序） | 页面级（仅当前页面） | | **主要功能** | 管理全局状态、生命周期事件、共享数据 | 处理页面数据、用户交互、页面生命周期 | | **数据存储** | 使用 `globalData` 存储共享数据（如 openid） | 使用 `data` 对象存储页面私有数据 | | **生命周期事件** | `onLaunch`, `onShow`（小程序级别） | `onLoad`, `onShow`（页面级别） | | **数据访问方式** | 通过 `getApp()` 在其他页面访问 | 通过 `this.data` 或 `this.setData` 操作页面数据 | | **异步处理** | 常处理全局异步操作（如登录），并通过回调/Promise 同步到页面[^1][^3] | 依赖 app.js 的数据，需处理同步逻辑（如回调函数）[^1][^4] | | **典型用例** | 初始化 openid、存储用户信息、全局错误处理 | 页面渲染、按钮事件、导航跳转 | 关键区别细节： - **作用域差异**：`app.js` 影响整个小程序，而 `index.js` 只针对单个页面。例如，`app.js` 的 `globalData` 在多个页面（如首页、详情页）共享，而 `index.js` 的 `data` 仅在首页有效。 - **数据同步挑战**：由于 `app.js` 的异步操作（如网络请求），`index.js` 可能无法立即获取数据。开发者需使用回调、事件监听或 Promise 确保同步。引用[1]展示了如何在 `index.js` 中定义 `indexCallback` 函数，等待 `app.js` 数据就绪[^1]。 - **性能优化**：直接在 `index.js` 中重复获取全局数据（如 userInfo）会增加网络开销，因此推荐通过 `app.globalData` 访问[^3][^4]。 #### 4. **实际开发建议** - **优先在 app.js 处理全局逻辑**：如登录和 openid 获取，避免页面重复请求。 - **在 index.js 中优雅处理同步**：使用箭头函数或闭包（如引用[1]的示例）解决 `app.js` 数据延迟问题。 - **避免数据污染**：页面私有数据应放在 `index.js` 的 `data` 中，全局共享数据使用 `app.globalData`。 - **调试技巧**：利用微信开发者工具的 AppData 面板检查 `globalData` 和页面 `data` 的状态。 通过以上解析，您应该能清晰区分两者的角色。如果仍有疑问，可以参考微信小程序官方文档或相关示例。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值