微信小程序入口场景的问题集合与相关解决方法


Posted in Javascript onJune 26, 2019

前言

最近一段时间都在做小程序。

虽然是第二次开发小程序,但是上次做小程序已经是一年前的事了,所以最终还是被坑得死去活来。

这次是从零开始开发一个小程序,其实除了一些莫名其妙的兼容性问题,大多数坑点都是在微信小程序的各个入口场景处。

所以这里整理一下微信小程序的各个入口场景,以及从这些入口场景进入小程序会面临的问题以及解决方案。

这里只列出常用的几种场景:

  • [简单场景]启动小程序并进入
  • [简单场景]退出重进(启动小程序后,退出小程序,再次进入小程序)
  • [简单场景]退出重进首页(启动小程序后,退出小程序,通过扫二维码再次进入小程序)
  • [复杂场景]启动并进入指定页面(从小程序的分享卡片或者微信发送的通知消息进入小程序)
  • [复杂场景]退出重进指定页面(启动小程序后,退出小程序,从小程序的分享卡片或者微信发送的通知消息进入小程序)

启动小程序并进入

微信小程序的入口场景光微信提供的场景值就有几十种,但是绝大多数都可以划分为启动小程序并进入。

这是最常用的一种进入小程序的方式,比如通过搜索进入或者点击最近使用小程序的方式进入,都算是这种类型。

这一场景下,首先我们需要明白发生了什么:

下载小程序 => 启动小程序 onLaunch事件触发 => 加载首页 onLoad事件触发 => 首页 onShow事件

然后在这个场景下,需要注意以下几个问题:

1.这个场景下一般会涉及到登录。

所谓登录,不一定是要在这个阶段做,但是登录信息的判断这个阶段是一定要做的。

通常前端肯定是要将登录的这些信息存储在小程序的storage里,然后在onLaunch事件中判断是否登录,没登录就跳转到登录页面,登录了就跳转到首页。

这里的登录判断一定要放在onLaunch,而不要放在首页的onLoad里面,因为小程序启动一定会进入onLaunch,而不一定会进入首页的onLoad。

2.而登录页面在设计的时候最好要加上一个url参数

传入登录成功后跳转到的页面地址,而不是登录之后始终跳转到首页,后面会讲为什么需要这么做。

3.onLaunch阶段是否有发出请求

并在请求完成后进行了页面跳转,或者请求完成设置storage,并在onLoad页面中使用?
这种情况的出现,会导致在请求时间过长时,首页的onLoad已经执行了,此时就会出现BUG。

对于这个问题,有的人会用定时器去判断是否完成这个操作,但是我的建议是尽量避免在onLaunch中进行这些操作。
如果一定要有,那么最好的方式就是做一个加载页面去承载这些功能。

4.首页数据的初始化

一般是放在onLoad中执行。当然总是有些特殊的需求是要放在onShow里面的。

关于onLoad和onShow,最常见的处理区别就在跳转页面时。

当载入首页时,先触发onLoad,再触发onShow。

此时通过wx.navigateTo 的方式跳转到页面A,这个时候首页并没有被关闭,那么从页面A再返回首页时,onLoad就不会触发,但onShow会触发。

通常在加载数据时,一般会用到onLoad。

但是如果说页面A更新了数据,然后返回首页时,首页的相关数据也需要更新。

那么初始化数据就不能放在onLoad里,而需要放在onShow里。

(当然还有一种方式是通过getCurrentPages的方式在页面A中调用首页的方法。但是这里极不推荐这种方式,属于某个页面的事情一定要给这个页面。最好不要将页面间的职责通过这种方式打乱,容易引起代码混乱,不易维护。)

退出重进(启动小程序后,退出小程序,再次进入小程序)

这种场景实际上是对第一种场景的扩展。

而所谓的退出小程序不管你是点右上角的退出按钮还是Home键直接切出都算是这类退出。

但是退出后再立即进入小程序的时候,依然会进入你退出小程序时所在的页面,而不会触发onLaunch,也不会触发这个页面的onLoad,不过onShow是肯定会触发的。

这一场景下,首先我们需要明白发生了什么:

再次进入小程序 => 进入退出小程序时所在页面 触发onShow

在这个场景下,只需要注意onShow中是否有不可重复执行的操作。

例如onShow中会获取用户喜欢吃的食物,加载到页面的列表中,在这种场景下,如果不清空之前的列表或者加个判断的话,就会出现重复数据。

退出重进首页(启动小程序后,退出小程序,通过扫二维码再次进入小程序)

这种场景实际上是对第二种场景的扩展。

我们通常给二维码配置的是一个无参数的小程序首页地址,当我们退出小程序,通过扫二维码再次进入小程序时会进入首页。

这一场景下,首先我们需要明白发生了什么:

再次进入小程序 => 进入退出小程序时所在页面A 不触发onShow => 触发页面A onHide => 触发页面A onUnload=> 进入首页 onLoad => 首页onShow

在这个场景下,除了需要注意第二种场景存在的问题,还需要注意页面A的onHide事件中是否会触发奇怪的操作,例如页面跳转。

启动并进入指定页面(从小程序的分享卡片或者微信发送的通知消息进入小程序)

这块场景常见于邀请他人进入小程序,需要注意的是他们往往被赋予了更多的业务功能,也就往往增大了小程序的实现难度。

这一场景下,首先我们需要明白发生了什么:

下载小程序 => 启动小程序 onLaunch事件触发 => 加载指定页面 onLoad事件触发 =>指定页面 onShow事件

这里就可以看出,并不是进入小程序就一定会进入首页的onLoad。

所以这就是为什么之前强调不要将登录判断放在首页的onLoad中,而一定要放在onLaunch里。

但是这里又和扫二维码不同,扫二维码的链接一般都是指定的首页。

而这里通常跳转到的是非首页的页面,而且可能还多了复杂的业务功能。

我们在需求分析和设计阶段应该更多地考虑到这里可能会引发的复杂问题,而尽量将此处的业务逻辑简化,或者加大估时。

接下来,我们将根据业务从简单到复杂,慢慢讲解这个场景下可能存在的问题。

最简单的邀请函(进入小程序首页)

和第一种场景差不多,这里略过

进阶邀请函(进入小程序指定页面,带参数,需要根据参数初始化页面)

这种情况下,需要考虑以下几个问题:

1.首先在onLaunch阶段会判断是否登录

没登录那么就需要跳转到登录页面,登录页面登录之后,肯定要跳转到这个页面,而不是首页。

所以之前说过登录页面设计的时候需要传入一个url参数,来明确登录成功后跳转到哪个页面。

2.这种跳转到指定页面的情况通常都需要一个回到首页的按钮

就比如邀请某人查看一篇文章,点击邀请卡片后会进入小程序内的文章详情。

一般在小程序内通常是通过点击文章列表跳转到文章详情,那么这个时候可以逐级返回到首页。

但是在点击邀请函进入的情况是没有返回功能的,此时如果没有回到首页功能,那么用户可能就永远没法回到首页。

(其实是可以的,但是小程序的的这个功能藏得比较深,不要指望所有用户都那么热爱摸索)

3.这里一定要特别注意第一种场景的第三个应该注意的问题

对于第一种场景而言那个问题因为启动次数很多容易出现,但是在当前的场景下可能很容易被忽略掉。

涉及身份的邀请函(进入小程序指定页面,带参数,需要根据参数切换身份,更可能涉及到登录)

为了更好地说明这种情况,我们来列举一个场景。

如果有一个打车软件,进入这个软件后有两种身份,一种是乘客,一种是司机。

用户是司机,那么看到的是页面A或者选定了TabA,如果是乘客,那么看到的是页面B或者选定了TabB。

而且还有一个需求,用户上次登陆时什么身份,这次登陆也是什么身份。

考虑到换手机的场景,那么这个信息肯定是存储在服务端的,所以进入小程序的时候会去请求服务端进行判断。

现在我用司机的身份发了个单,微信给了个通知消息,我没点开。然后切换到乘客的身份了,再去点击通知消息,那么我会以司机的身份去打开这个消息。

这个场景其实在业务上来看是很合理的,但是对于我们的程序实现来看,复杂度一下子就上来了。

1.首先我们确定一下这个请求身份信息的请求在哪个阶段发出?

onLaunch?

那么是不是需要在onLoad阶段去获取这个身份的信息然后给出不同的页面?

这样一下子就会出现进阶邀请函的第三个问题,而且还不仅仅是这一个问题,之后我们会讲到。

所以这个地方需要做一个专门的邀请加载页面去处理这个事情。

2.分离出一个单独的加载页面之后,其实我们的工作会变的简单清晰起来。

因为我们只需要去做我们这个页面所需要做的事情就行了。

根据参数去获取我们现在的身份,然后以这种身份跳转到相应的页面。

3.这里还涉及到一个问题,那就是正常启动而不是通过通知消息进入的时候,也需要去请求服务端获取身份信息。

我给的建议是一定要另外单独建一个页面去承载这个功能,而不要将这两个加载页面糅合到一起。

里面的页面展示我们可以用组件化的方式去做,但是页面的逻辑一点更要分开。

因为这两种情况真的很容易混杂,也是为了利于后面的维护工作。

4.正常启动时的加载页面也可以看情况糅合到首页的onLoad里面。

但是如果有可能,还是希望放在单独的页面里。

首页往往功能很多,代码量比较大,不要将本来可以分离出去的功能放进去。

还是那句话,页面的职责分开。

我这里讲的其实还是一个比较常见的功能,通常我们的业务也不一定像上面这样简单。

所以如果涉及到这方面的操作,在需求分析和设计的时候就应该考虑清楚。

如果等到功能开发的时候再去考虑这些事情,那么等待你的一定是延期或者加班。

退出重进指定页面(启动小程序后,退出小程序,从小程序的分享卡片或者微信发送的通知消息进入小程序)

这种场景同样是第四种场景的进阶,但是如果你在第四种场景中使用了我所说的加载页面,那么接下来的问题会简单很多。

这一场景下,首先我们需要明白发生了什么:

再次进入小程序 => 进入退出小程序时所在页面A 不触发onShow => 触发页面A onHide => 触发页面A onUnload => 进入邀请加载页面onLoad => 加载页面onShow

对于第四种场景中的打车小程序而言,如果按照我们先前所说没有在onLaunch中获取身份信息,而是放在了加载页中,那么现在什么都不用改。

如果获取身份信息的请求放在onLaunch中,现在又得在onLoad中加一道逻辑。

当然这里还是得注意一个问题,对于这一类型的进入小程序的方式,比如从分享卡片进入和微信的通知消息进入。

即使他们所进入的页面不同,但是他们都可以使用这个载入页面去做判断。

与正常启动场景的载入页面是不同的,他们本来就是同一种入口场景。

所以该共用的地方还是得共用,用不同的业务code判断即可。

总结

总的来说,以上的几种情况应该能涵盖绝大多数小程序的入口场景。

整理的目的其实主要是为了做需求分析和设计时参考使用,以避免在考虑业务问题时漏过这些场景导致后期的工作计划受到影响。

所谓加班和项目延期发布,大都是前期需求分析和设计考虑不周。

我们不可能考虑到所有的场景,但是应该尽善尽美。

谋定而后动,前事不忘后事之师,也算是PDCA了。

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

Javascript 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
Vue组件实现触底判断
Jun 26 #Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 #Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 #Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 #Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 #Javascript
亲自动手实现vue日历控件
Jun 26 #Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 #Javascript
You might like
php简单的会话类代码
2011/08/08 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
理解python中生成器用法
2017/12/20 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Python KMeans聚类问题分析
2018/02/23 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
Django model select的多种用法详解
2019/07/16 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
致铅球运动员加油稿
2014/02/13 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书