微信小程序页面onLoad获取app.js的onLaunch数据（异步获取用户信息）

微信小程序声明周期

小程序的生命周期，简单来说：就是app.js里的onLaunch和页面里的page.js的onLoad异步执行。

通过回调函数架构起联系，便于获取app.js内的全局数据

代码

app.js

//app.js
App({onLaunch: async function () {let openid = null;if (!wx.cloud) {console.error('[app.js] [onLaunch] 请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({// env 参数说明：//   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源//   此处请填入环境 ID, 环境 ID 可打开云控制台查看//   如不填则使用默认环境（第一个创建的环境）env: 'test-simorel',traceUser: true,});try {// 这个是云函数获取用户openid，你也可以用wx.login获取code，再从后台换取openidlet { result } = await wx.cloud.callFunction({name: 'user',data: {$url: 'getOpenid'}});console.info('[app.js] [onLaunch] get openid success', result);openid = result;// 由于这里是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.openidCallback) {this.openidCallback(result);}} catch (err) {console.error('[app.js] [onLaunch] get openid fail', err);}}this.globalData = {/** 用户openid */openid}}
})

page.js

const appInstance = getApp();Page({/*** 页面的初始数据*/data: {/** 用户openid */openid: null},/*** 生命周期函数--监听页面加载*/onLoad: async function (options) {console.log('[onLoad] appInstance.globalData', appInstance.globalData);if (appInstance.globalData && appInstance.globalData.hasOwnProperty('openid') && appInstance.globalData.openid) {console.info('[onLoad] appInstance.globalData.openid', appInstance.globalData.openid);this.setData({openid: appInstance.globalData.openid});} else {appInstance.openidCallback = openid => {console.info('[onLoad] [openidCallback] openid', openid);if (openid) {this.setData({openid});}};}}
}

控制台

从控制台打印的信息可以明显看出，先执行的页面的onload，后异步执行的onLaunch。但是因为回调函数的存在，我们依然成功拿到了openid。

参考文献

[1] Ning 微信小程序onLaunch异步，首页onLoad先执行？

微信小程序页面onLoad获取app.js的onLaunch数据（异步获取用户信息）相关推荐

微信小程序开发(五) - 全局(app.js)逻辑 - js 文件
微信小程序中使用的逻辑文件 ,本质上还是.js 文件,脚本中的很多东西进行了二次封装,本质上可以在外部调试中,查看逻辑层(App Service) 小程序开发框架的逻辑层由 JavaScript 编 ...
【微信小程序】—— 如何在app.js 和其他页面中更改globalData的值
在其他页面page中,修改globalData的方法是: var app = getApp(); app.globalData.isLogin = true; 而在app.js中需要注意的是,应当在小 ...
微信小程序页面跳转与返回并回传数据
2019独角兽企业重金招聘Python工程师标准>>> A页面: .wxml文件 <view class="flex-wrp"><text st ...
微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
微信小程序——页面之间传递值
微信小程序--页面之间传递值小程序页面传值的方式: 1.正向传值:上一页面 --> 下一页面 url传值本地储存全局的app对象 2.反向传值:下一页面 --> 上一页面本地储 ...
【毕业设计之微信小程序系列】基于APP的微信点餐小程序的设计与实现
基于APP的微信点餐小程序的设计与实现摘要本文介绍了一种基于APP的微信点餐小程序的设计与实现方法.该系统利用微信公众号作为用户入口,用户可以通过微信扫码进入点餐系统,选择菜品.下单.支付等操作 ...
微信小程序——页面传值
微信小程序--页面传值 1.页面正向传值主要用于从页面A直接跳转到页面B时的传值. 通过url参数传值: //pageA wx.navigateTo({url: '/pages/pageB?page ...
微信小程序-页面间如何进行传递数据(通信)
前言在小程序中组件与组件之间的通信是通过在引用组件处,在自定义组件上添加自定义属性实现的,子组件内部通过properties进行接收更多关于组件与组件之间的通信可参考小程序-实现自定义组件以及自定 ...
微信小程序开发日志——面向对象的JS编程
微信小程序开发日志--面向对象的JS编程前言不知道有多少小伙伴和之前的我一样,微信小程序的js部分都是用面向过程的方式写的,最后的结果就是代码非常长,其实刚刚写完还好,自己也都清楚哪些部分是做什么 ...

微信小程序页面onLoad获取app.js的onLaunch数据（异步获取用户信息）

微信小程序声明周期

代码

app.js

page.js

控制台

参考文献

微信小程序页面onLoad获取app.js的onLaunch数据（异步获取用户信息）相关推荐

最新文章

热门文章