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


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的闭包
Jan 17 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
微信小程序新手教程之页面打开数量限制
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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
php生成xml简单实例代码
2009/12/16 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python time模块用法实例详解
2014/09/11 Python
OpenCV实现人脸识别
2017/04/07 Python
Django 实现下载文件功能的示例
2018/03/06 Python
python创建文件备份的脚本
2018/09/11 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
即将毕业大学生自荐信
2014/01/24 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
党委领导班子整改方案
2014/09/30 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang