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

所述问题:

前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过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()
{
//需要用到用户编号换取商品信息的接口

}
})

总结:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序onLaunch异步,首页onLoad先执行?

    本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了. //app.js App({ onLaunch: function () { console.log('onLaunch'); wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { }, success: function(res) {

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

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

  • 微信小程序本作用域下调用全局JS详解及实例

    微信小程序本作用域下调用全局JS详解 本地wxml文件 <view> app版本:{{version}} </view> 本地js文件 var app; Page({ data:{ }, onLoad:function() { app = getApp(); this.setData({version:app.globalData.appName}); } }) 全局js文件 //app.js App({ globalData:{ appName:"hcoder"

  • Thinkphp5微信小程序获取用户信息接口的实例详解

    Thinkphp5微信小程序获取用户信息接口的实例详解 首先在官网下载示例代码, 选php的, 这里有个坑 官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le

  • 微信小程序图片自适应支持多图实例详解

    微信小程序图片自适应支持多图实例详解 微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名 类型 默认值 说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

  • 微信小程序 开发MAP(地图)实例详解

    微信小程序 开发MAP(地图)实例详解 在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名 第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo

  • 微信小程序视图template模板引用的实例详解

    微信小程序视图template模板引用的实例详解 WXML 提供两种文件引用方式import和include. include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置 temlate.wxml <template name="tmp_data" > <view class="content"> <!-- 头像 --> <view class="author-date"> &

  • 微信小程序 页面跳转及数据传递详解

    微信小程序 页面跳转及数据传递详解 类似 Android 的 Intent 传值,微信小程序也一样可以传值: 例如:wxml 中写了一个函数跳转: <view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任务</view> <view class="containVertical

  • 微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

  • 微信小程序蓝牙连接小票打印机实例代码详解

    1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapter({ success: function(res) { wx.getBluetoothAdapterState({ success: function(res) { if (res.available) { if (res.discovering) { wx.stopBluetoothDevic

  • 微信小程序激励式视频广告组件使用详解

    微信小程序搜索:短视频去水印解析 目前微信小程序针对个人来说广告是最好的变现方式,广告主要分为: 1. Banner 2. 激励式视频 3. 插屏 Banner广告很简单,插入代码就可以显示 这里介绍下激励式视频广告实现(观看完整广告奖励积分): //视频广告 let videoAd = null; //视频广告拉取状态 let videoAdPushStatus = false; Page({ data: { //积分总数 creditsAmountSum: 100 }, onLoad(opt

随机推荐