文档章节

微信小程序之onLaunch与onload异步问题

o
 osc_a22drz29
发布于 2019/03/28 13:37
字数 857
阅读 19
收藏 0

精选30+云产品,助力企业轻松上云!>>>

所述问题:

   前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过wx.login({}) 这个api进行用户登录,获取系统后台的用户基本信息。再此之前,一直以为微信小程序中的App.js 中onLaunch (小程序初始化完成执行该方法)方法比其他页面的的 onload 方法要先执行。那么问题就来了,我每次进入小程序首页的时候有时候会先执行onlaunch方法,有时又会先执行首页的onload的方法,最后经过确定,在微信小程序中这两个方法并没有执行先后的顺序,因为他们都是异步执行的。当然开发过微信小程序的开发者都知道微信请求数据都是异步执行的,如在同一个onload写两个请求数据的方法,它不一定会按照先后顺序去执行,这就是传说中的异步地狱了。

解决方法:

  当然,我既然知道这个执行顺序是由于微信小程序的异步执行请求原因导致的。我们可以使用Promise 来解决异步编程问题啦。我的解决方法是,首先我是在app.js 中定义了一个全局方法,用来登录小程序请求用户信息的接口,每次进入首页的时候先判断我是否已有用户信息缓存,假如不存在那么请求app.js中的全局方法进行数据获取。在这里我就不详细介绍Promise 的基本用法了,因为阮一峰已经将的非常详细了,大家可以点击查看【http://es6.ruanyifeng.com/#docs/promise#Promise-all】。

方法实现:

App.js方法实现:

App({
onLaunch: function() {
console.log('App Launch')
//不在这里默认请求
},
/**
* 定义全局变量
*/
globalData: {
openid: '', //用户openid
userId: '', //用户编号
},
/**
* 用户登录请求封装(解决onlaunch和onload执行顺序问题)
*/
userLogin: function() {
var that = this;
//定义promise方法
return new Promise(function(resolve, reject) {
// 调用登录接口
wx.login({
success: function(res) {
if (res.code) {
console.log("用户登录授权code为:" + res.code);
//调用wx.request请求传递code凭证换取用户openid,并获取后台用户信息
wx.request({
url: 'https://www.xxxx.xxx.api', // 后台请求用户信息方法【注意,此处必须为https数字加密证书】
data: {
code: res.code //code凭证
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
if (res.data.errcode == 0) {
//获取用户信息成功
that.globalData.openid = res.data.openid;
that.globalData.userId = res.data.UserId;
//存入session缓存中
wx.setStorageSync("userId", that.globalData.userId)
console.log(that.globalData.userId);
console.log(that.globalData.openid);
//promise机制放回成功数据
resolve(res.data);
} else {
reject('error');
}
},
fail: function(res) {
reject(res);
wx.showToast({
title: '系统错误'
})
 },
complete: () => {

} //complete接口执行后的回调函数,无论成功失败都会调用
})
} 
else
{ reject(
"error"); } } }) }) }
});

index.js实现:

const app=getApp();//初始化app.js
page({

onLoad: function (option) {
var that = this;
let UserId = wx.getStorageSync("userId");
console.log("进入首页的用户编号为:" + UserId);
if (UserId == '') {
app.userLogin().then(res => {
console.log("promise回调后的数据:");
console.log(res);
if (res.errcode == 0) {
//把首页需要请求的数据接口都提取到一个自定义方法中
that.GetData();
}
})
}
else
{
//用户缓存存在
that.GetData();
}

}
,
GetData()
{
//需要用到用户编号换取商品信息的接口

}
})

总结:

  当然解决异步回调的方法有很多种,不过我在这里只说我认为好用的一种,大家有什么想法也可以一起分享学习。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
微信小程序学习记录(一)

如何定义一个全局变量: 1,在根目录下app.js中添加 App({globalData: { }}) 2,在js中访问我们的全局变量 var app = getApp(); //全局的 函数可以用来获取到小程序实例。 onLoad: function...

osc_6x8y8c2x
2018/07/28
2
0
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法

  前段时间开发了一款微信小程序,运行了也几个月了,在index.js中的onLoad生命周期里获取app.js中onLaunch生命周期中在接口里动态设置的globalData一直没有问题,结果昨天就获取不到动态设...

osc_xopfh3w8
2019/05/09
3
0
解决:小程序app.js 中异步调用 返回全局变量,首页在没有app.js没有返回的时候开始调用自己的接口

 前段时间开发了一款微信小程序,运行了也几个月了,在index.js中的onLoad生命周期里获取app.js中onLaunch生命周期中在接口里动态设置的globalData一直没有问题,结果昨天就获取不到动态设置...

osc_584bgu77
2019/10/21
4
0
微信小程序onLaunch异步,首页onLoad先执行?

本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了。 前端全栈学...

peakedness丶
2018/12/30
215
0
微信小程序onLaunch、onLoad执行生命周期

原文转载自:微信小程序onLaunch、onLoad执行生命周期 1、需求:先执行App的onLaunch添加验证权限等,再执行Page里的onLoad。 2、问题:还没有等onLaunch执行完成,onLoad就已经开始执行了。...

osc_6oerel1o
2019/03/27
4
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux安装redis服务器和部署

Linux安装redis和部署 第一步:下载安装包 wget http://download.redis.io/releases/redis-5.0.5.tar.gz 访问https://redis.io/download 到官网进行下载。这里下载最新的5.0.5版本. 第二步:...

osc_3ytpwpyb
9分钟前
0
0
IF函数,根据条件设定输入内容

if函数通常用于条件判断,根据判断结果执行相应命令。 1.函数解释: IF(logical_test, [value_if_true], [value_if_false]) logical_test 必需。 计算结果为 TRUE 或 FALSE 的任何值或表达式...

osc_sumf8h95
11分钟前
0
0
Pytorch自定义dataloader以及在迭代过程中返回image的name

pytorch官方给的加载数据的方式是已经定义好的dataset以及loader,如何加载自己本地的图片以及label? 形如数据格式为 image1 label1 image2 label2 ... imagen labeln 实验中我采用的数据的...

osc_l8u38961
12分钟前
0
0
灯塔

\[love\ and \ share \] 我怎么感觉变成了好东西推荐呢?算了,本来也差不多 还没写完,想到再更 有好看玩的能不能评论一下,qwq 动漫 大多是些国漫,多在\(b\)站、腾讯视频、盗版小网站能够...

osc_dc6pbw3x
13分钟前
0
0
网易首页 」 网易手机 」 正文 苹果超薄触摸显示技术专利曝光:重新定义轻薄

最近,苹果公司的新屏幕专利技术已经曝光。特别是苹果公司的新型超薄触摸技术,它可以降低显示器的结构水平,消除多余的电路,并使屏幕更薄。该专利表明,这项新技术适用于iPhone,iPad,App...

osc_opzpp18v
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部