微信小程序新手教程之启动页的重要性


Posted in Javascript onMarch 03, 2019

前言

启动页在APP中是个很常见的需求,为什么对于小程序来说也非常重要呢?首先我描述一下我在开发过程中遇到的一些问题以及解决的步骤,到最后为什么要加启动页,看完你就明白了。

小程序的首页需要展示用户关注的小区信息,意味着一打开小程序我就得先执行登录的逻辑,只有登录了之后才能获取用户关注的小区信息。

在小程序启动的时候自动登录,目前没获取用户信息,所以不需要用户授权,这个逻辑放在根目录下的app.js的onLaunch方法中。只要启动小程序就会执行onLaunch方法。

做完之后发现了一个很严重的问题,就是app.js的onLaunch方法确实会在小程序启动的时候执行,但是首页也会是在app.json文件的pages中第一个页面也会同时执行,它不是阻塞的。会导致一个问题就是首页获取关注信息执行完了,登录的逻辑还没完,获取不到正确的数据。

于是把登录的逻辑放到首页的onLoad方法中执行,在登录成功之后再去获取关注的数据,这样就能解决上面说的问题了。

后面又有一个需求,就是分享功能,分享出去的页面中也需要用到用户信息,这个就尴尬了,分享出去的页面,用户进入的时候还是进入的这个页面,不会执行首页的逻辑,是拿不到用户信息的。

后面想了下,还是增加一个启动页来做中转吧,登录的逻辑还是放到app.js中,只要小程序启动了就可以执行,无论是第一次进入还是通过分享的页面进入,都可以自动登录。

问题是如何实现阻塞功能,就是登录之后再去跳转到其它的页面,思路就是通过定时器的方式去检测登录状态,成功了之后再跳转。

分享也是一样,分享出去的地址不再是本页面的地址,而是启动页的地址,带一个参数,这个参数才是本页面的地址,当用户点击分享的小程序进入之后会先进入启动页,启动页中获取参数,等待登录逻辑执行完成之后,再根据参数跳转到分享的页面。

启动页代码:

onLoad: function (e) {
 var url = '/pages/index/index'
 // 分享页面参数解码
 if (e.page != undefined && e.page != "") {
  url = decodeURIComponent(e.page)
 }
 var count = 0; 
 var inter = setInterval(() => {
  count++;
  if (count > 1000) {
  clearInterval(inter);
  wx.showToast({
   title: "网络异常,请重启小程序",
   icon: 'none',
   duration: 2000
  })
  return;
  }
  var token = wx.getStorageSync("login_token");
  if (token != null && token != "") {
  clearInterval(inter);
  // 跳转到toolbar
  if (url == "/pages/index/index" || url == "/pages/city/cityAll/cityAll") {
   wx.switchTab({
   url: url
   })
  } else {
   // 跳转到普通页面
   wx.navigateTo({
   url: url,
   })
  }
  
  }
 },10);
 }

当检查超过10秒钟,登录信息还获取不到的时候就会给出提示,后续会加上一个让用户手动授权登录的页面。

这种方式勉强能实现需求,但不是最好的方式,问题一看就知道了,如果加了启动页,意味着所有的入口都变成了启动页,就没有必要通过定时去检测了,直接将登录的逻辑放到启动页中来执行,在success中在做跳转的逻辑,这样的方式才是最好的,具体代码我就不贴出来,大家明白就好。

具体的分享页面代码:

onShareAppMessage: function () {
 let that = this
 var page = encodeURIComponent('/pages/district/districtDetail/districtDetail?city=' + that.data.city + '®ion=' + that.data.region + '&districtName=' + that.data.districtName + '&estateType=' + that.data.estateType + "&isshare=1")
 return {
  title: '小区详情',
  path: '/pages/startPage/startPage?page='+page
 }
 }

重点关注isshare=1这个参数,当直接打开分享的页面时,用户点击左上角的返回按钮,基于现有的逻辑会退回到启动页,因为是从启动页中转过来的,这是有问题的,要么就去掉这个返回按钮,要么就返回到首页。

所以对于分享的页面带了一个参数识别,当是从分享页面进来的时候返回就到首页面。具体逻辑在页面的onUnload函数中,在页面卸载的时候进行跳转:

if (this.data.isshare == 1) {
  wx.switchTab({
  url: '/pages/index/index'
  })
}

以上就是启动页的作用以及需要启动页的一些背景,第一次开发小程序,总会碰到很多问题。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 高级语法介绍
Jun 15 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
原生js实现弹出层效果
Jan 20 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
Vue DevTools调试工具的使用
Dec 05 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 #Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 #Javascript
JS+php后台实现文件上传功能详解
Mar 02 #Javascript
JS事件绑定的常用方式实例总结
Mar 02 #Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 #Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 #Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 #Javascript
You might like
2020最新CPU的性能排名
2020/04/02 数码科技
如何获得PHP相关资料
2006/10/09 PHP
实用函数5
2007/11/08 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
php实现简单四则运算器
2020/11/29 PHP
js left,right,mid函数
2008/06/10 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
将python安装信息加入注册表的示例
2019/11/20 Python
eBay德国站:eBay.de
2017/09/14 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
元旦获奖感言
2014/03/08 职场文书
倡议书范文
2014/04/16 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
决心书格式及范文
2019/06/24 职场文书
redis数据一致性的实现示例
2022/03/18 Redis
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL