微信小程序首页数据初始化失败的解决方法

一、 问题描述

用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息。当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息。如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空。无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产生的滞后性,我们很难要求程序停下来等我们。那么,我们可以通过其他途径,来达到让程序“停下来”的错觉,下面容我来介绍一下我的解决方法。

图1

二、 解决方法的最基本要求

我们想要的解决方法的最基本要求有如下两点:

1) 当我们进入主页,数据完成了初始化,并正常显示

2) 当用户首次进入程序,只需确认确认公开信息,即可正常进入主页

三、 解决方法

我的解决方法是:通过设计一个“临时加载页”来达到我们想要的效果,这个临时加载页类似于Android的欢迎界面,但当数据加载完成,或者我在第二次进入时,将自动跳转到我们的主页。下面是设计代码部分。

步骤一:首先我们在app.json中,创建一个新的page,命名为welcome

"pages/welcome/welcome"

注意该page要放置在首页,也就是程序进来第一个页面

步骤二:我们在welcome.js中,将具体请求操作写入到onload中

// pages/welcome/welcome.js
Page({
 data:{},
 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 var that = getApp()
  try {
  //首先检查缓存中是否有我们需要请求的数据,如果没有,我们再跟服务器连接,获取数据
  //首次登陆肯定是没有的
  that.globalData.userInfo = wx.getStorageSync('userInfo')
  if(wx.getStorageSync('userInfo')!=''){
  //如果缓存不为空,即已经存在数据,我们不用再跟服务器交互了,那么直接跳转到首页
  wx.switchTab({
  url: '../index/index',
  })
  }
  if (value) {
  // Do something with return value
  console.log(that.globalData.userInfo)
  }
 } catch(e){
  // Do something when catch error
  //当try中的缓存数据不存在时,将跳到这步,这步中,我们将与服务器进行连接,并获取数据
  if(that.globalData.userInfo == ''){
  wx.login({
   success: function(res) {
   //获取用户code,转发到我们的服务器,再在我们服务器与微信交互,获取openid
    var code = res.code
    wx.getUserInfo({
     success: function(userInfo) {
      var encryptedData = userInfo.encryptedData
      var iv = userInfo.iv
      //我们服务器请求地址
      var url = that.apiHost + 'index/login'
      var userinfo = userInfo.userInfo
      var username = userinfo.nickName
      var useravatar =userinfo.avatarUrl
      var usersex=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("insert success")
     },
    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',
 })
 }
})

可看到,我们在首次登陆时,将进入我们的欢迎界面,当用户确认公开信息后,页面将自动跳转到首页,首页数据正常显示

在第二次进入时,跳转在onload中就进行了,界面还没渲染就跳转了,所以速度很快,亲测跳转还算满意,但终究还是绕个弯来做一件事,大家若有更好的方法,也请分享分享,谢谢!

以上所述是小编给大家介绍的微信小程序首页数据初始化失败的解决方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • 微信小程序-详解数据缓存

    每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localStorage 是永久存储的,但是我们不建议将关键信息全部存在 localStorage,以防用户换设备的情况. wx.setStorage(OBJECT) 将数据存储

  • 微信小程序动态的加载数据实例代码

    微信小程序刚出来有很多的东西还在更新,先写些刚开始要做的工作 1.首先要写在js里定义一个全局变量 data: { datalist: [] }, 2.请求数据加载,获得整个数组信息 wx.request({ url: httpUrl, data: {}, success: function (res) { that.setData({ datalist: res.data.courses }) },  3.在.wxml中调用 数组的调用用:wx:for="{{datalist}}"

  • 微信小程序 本地数据存储实例详解

    微信小程序 本地数据存储实例详解 前言 如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor

  • 微信小程序通过api接口将json数据展现到小程序示例

    实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理 首先,先看一下这个请求函数 wx.request({ url: '******',

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

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

  • 微信小程序 解决请求服务器手机预览请求不到数据的方法

    微信小程序 解决请求服务器手机预览请求不到数据的方法 微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat配置好了https.然后用开发者工具测试是否能请求到数据,发现能获取到很开心. 后来是注册了小程序,在小程序后台也进行了设置,见下图 给项目加了APPID,准备进行手机预览的测试 这里说一下,在开发小程序时尽量把图片放到自己的服务器上,因为小程序在上传和预览时都有编译包的限制,没有算过,大概是1M,

  • 微信小程序 数据封装,参数传值等经验分享

    微信小程序开发总结: 一: 参数传值的方法 1: data-id 我们可以给HTML元素添加data-*属性来传递我们需要的值,使用方法说明: (1)设置data-id <view class="block" bindtap="playTap" data-id="{{modle.id}}"> (2): 取值 + 传值 playTap:function(e) { const dataset = e.currentTarget.datas

  • 微信小程序遇到修改数据后页面不渲染的问题解决

    微信小程序遇到修改数据后页面不渲染的问题解决 前言: 去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的亲眼目睹了一个新技术的发展,还是感觉比较荣幸的. 唱衰小程序?我的观点是肯定不可能,因为现在每天提交审核的小程序还在继续增加,而且有些小程序确实很好用,比如摩拜的扫码骑车,还有我上周去KTV,直接用小程序扫屏幕上的二维码,就可以绑定房间,然后通过小程序点歌,切歌,发表情包等方便好玩的事情,所以,

  • 微信小程序首页数据初始化失败的解决方法

    一. 问题描述 用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产

  • 微信小程序 加载 app-service.js 错误解决方法

    微信小程序开发过程中出现错误,经过一番思考解决此问题,这里给大家提醒下! 加载 app-service.js 错误 WAService.js:2 不要在 undefined.js 注册多个Page APP-SERVICE-Engine:Please do not register multiple Page in undefined.js 开始新建一个小程序,结果报这么多错误. 但是我点击到编辑页查看的时候,没有pages,utils呀.. 进入app.js没有注册多个page呀. 感觉很奇怪,

  • 微信小程序textarea层级过高的解决方法

    一.前言 相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了 由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验, 目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制 二.使用场景及解决方案 1.弹窗显示 2.底部fixed定位的按钮,页面滚动时,例如添加购物车,显示价格 针对以上两种业务

  • 微信小程序中网络请求缓存的解决方法

    需求 提交小程序审核时,有一个体验测评,产品让我们根据小程序的体验测评报告去优化小程序. 其中有一项是网络请求的优化,给我们出了很大的难题. 文档中是这样解释的:3分钟以内同一个url请求不出现两次回包大于128KB且一模一样的内容 看到这个问题的时候,首先想到的是在响应头上加上cache-control,经过测试发现小程序并不支持网路请求缓存.搜索发现官方明确答复,小程序不支持网络请求缓存:wx.request不支持http缓存 既然官方不支持网络请求缓存,那只能自己想办法解决这个问题了. 先

  • 微信小程序 用户数据解密详细介绍

    微信小程序 用户数据解密 官方指引图: 引导图一步一步操作 1.获取code onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 let that = this wx.login({ success: function (res) { // success let code = res.code that.setData({ code: code }) wx.getUserInfo({ success: function (res)

  • 微信小程序 首页制作简单实例

    微信小程序 首页制作简单实例 实现效果图: 首先从大的方面来讲,就是设置了window的属性 "navigationBarBackgroundColor": "#AFE2E6",//bar背景颜色 "navigationBarTextStyle": "white",//bar字体颜色 "backgroundColor": "white",//背景颜色 "enablePullDo

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    就在昨天,微信宣布了微信小程序开发者工具新增"云开发"功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击 分类导航时,会触发这个方法,并传回当前点击

  • 微信小程序登录数据解密及状态维持实例详解

    本文实例讲述了微信小程序登录数据解密及状态维持.分享给大家供大家参考,具体如下: 学习过小程序的朋友应该知道,在小程序中是不支持cookie的,借助小程序中的缓存我们也可以存储一些信息,但是对于一些比较重要的信息,我们需要通过登录状态维持来保存,同时,为了安全起见,用户的敏感信息,也是需要加密在网络上传输的. 前台,service.封装了http请求,同时封装了getSession(通过code获取服务器生成的session).getUserInfo(获取用户信息).getDecryptionD

  • .NET微信小程序用户数据的签名验证和解密代码

    微信小程序时下大热,抱着学习的心态了解了一下,目前没有搜到完整的.NET用户数据签名验证和解密代码,于是就写了一点. 简单使用方法: 1.客户端调用wx.getUserInfo方法,服务端创建WeChatLoginInfo类的实例接收客户端发来的数据: 2.服务端新建WeChatAppDecrypt类的实例,初始化此类时需传入appId与AppSecret用于验证: 3.调用WeChatAppDecrypt类中的Decrypt方法,传入步骤1中获取的WechatLoginInfo实例: 4.得到

随机推荐