小程序页面为空白怎么解决

小程序页面为空白怎样解决

小程序页面为空白，可以设计一个“临时加载页”来解决，方法以下：

1.在app.json中，创建一个新的page，命名为welcome，代码："pages/welcome/welcome"（注意该page要放置在进入小程序的第一个页面）

2.在welcome.js中，将具体要求操作写入到onload中，代码：

//pages/welcome/welcome.js
Page({
data:{},
onLoad:function(options){
//页面初始化options为页面跳转所带来的参数
varthat=getApp()
try{
//首先检查缓存中是否是有我们需要要求的数据，如果没有，我们再跟服务器连接，获得数据
//首次登陆肯定是没有的
that.globalData.userInfo=wx.getStorageSync('userInfo')
if(wx.getStorageSync('userInfo')!=''){
//如果缓存不为空，即已存在数据，我们不用再跟服务器交互了，那末直接跳转到首页
wx.switchTab({
url:'../index/index',
})
}
if(value){
//Dosomethingwithreturnvalue
console.log(that.globalData.userInfo)
}
}catch(e){
//Dosomethingwhencatcherror
//当try中的缓存数据不存在时，将跳到这步，这步中，我们将与服务器进行连接，并获得数据
if(that.globalData.userInfo==''){
wx.login({
success:function(res){
//获得用户code，转发到我们的服务器，再在我们服务器与微信交互，获得openid
varcode=res.code
wx.getUserInfo({
success:function(userInfo){
varencryptedData=userInfo.encryptedData
variv=userInfo.iv
//我们服务器要求地址
varurl=that.apiHost+'index/login'
varuserinfo=userInfo.userInfo
varusername=userinfo.nickName
varuseravatar=userinfo.avatarUrl
varusersex=userinfo.gender
wx.request({
url:url,
method:'POST',
data:{
'code':code,
'username':username,
'useravatar':useravatar,
'usersex':usersex
},
header:{
"Content-Type":"application/x-www-form-urlencoded"
},
success:function(response){
//数据交互成功后，我们将服务器返回的数据写入全局变量与缓存中
console.log(response.data)
//写入全局变量
that.globalData.userInfo=response.data
wx.hideToast()
//写入缓存
wx.setStorage({
key:'userInfo',
data:that.globalData.userInfo,
success:function(res){
console.log("insertsuccess")
},
fail:function(){
//fail
},
complete:function(){
//complete
}
})
//写入后，我们将跳转到主页
wx.switchTab({
url:'../index/index',
})
},
failure:function(error){
console.log(error)
},
})
}
})
}
})}
}
},
onReady:function(){
//页面渲染完成
},
onShow:function(){
//页面显示
},
onHide:function(){
//页面隐藏
},
onUnload:function(){
//页面关闭
},
redirect:function(){
wx.switchTab({
url:'../index/index',
})
}
})

3.写好发布后，首次登陆时，将进入我们的欢迎界面，当用户确认公然信息后，页面将自动跳转到首页，首页数据就会正常显示。

本文来源：https://www.yuntue.com/post/79676.html | 云服务器网，转载请注明出处！