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

前言

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

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

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

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

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

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

启动小程序并进入

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

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

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

下载小程序 => 启动小程序 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了。

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

(0)

相关推荐

  • 微信小程序利用Canvas绘制图片和竖排文字详解

    前言 闲暇时间抽个空写了个三国杀武将手册的小程序,中间有个需求设计的是合成武将皮肤图.竖排的武将姓名.以及小程序码,然后提供保存图片到相册,最终让用户可以分享到朋友圈或其他平台.合成图片应该按照 Canvas 的文档来做都没什么问题,主要是有个竖排文字的需求,这里和大家分享一下. 正文 首先放一张最终保存到相册的图片吧~ 自我感觉良好,至少达到了我自己的预期吧~~~ 下面让我们一步一步来看看如何实现的吧. 整个图片分为三个部分: 武将图片 小程序码 武将文字信息 先来看一下 wxml 里面的代码

  • 微信小程序商城项目之淘宝分类入口(2)

    分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例 下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文 微信小程序的页面跳转和参数传递 -- 微信小程序教程系列(6) 页面分析: 使用for循环遍历所有项,插入页面,页面中的项使用左浮动,并使用百分比布局,设置20%的宽度每一项. 这样满5个item后,自动排在下一行 wxml: <view class="menu-wrp"> <!

  • 微信小程序Echarts图表组件使用方法详解

    1:下载 GitHub 上的 项目 2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完美的. 如果是在项目里面引入组件的话,打开从github上面下载的代码,将ec-canvas文件夹复制黏贴到你的项目里面. 好的,组件已经复制到了我的项目里面,现在我想实现一个折线图,现在开始去组件里面搬运复制黏贴代码了. wxml <!--index.wxml--> <view class="container"> <ec-canvas id=&

  • 新手快速入门微信小程序组件库 iView Weapp

    介绍 iView Weapp提供了与 iView 一致的 UI 和尽可能相同的接口名称,大幅度降低了学习成本,是一套一套高质量的微信小程序 UI 组件库. 使用步骤 1:首先在github上面下载组件库代码 github 2:下载之后解压 可以看到解压的组件文件内容,选择 dist文件,将 dist 目录拷贝到自己的小程序项目中 3:开始写代码 写页面效果,写一个按钮 在json文件里面引入组件 { "usingComponents": { "i-button":

  • 微信小程序-可移动菜单的实现过程详解

    前言 我们可以经常看到手机app里有的菜单栏是悬浮在首页的,用户可以拖动和点击菜单栏进行交互,今天代码君就教大家利用小程序的控件,实现一个可移动的菜单,效果图是这样的,要实现这样的效果,需要引出我们今天的重要人物movable-view movable-view属性介绍 属性名 作用 参数值 direction 设置movable-view的移动方向 属性值有all.vertical.horizontal.none inertia movable-view是否带有惯性 true/false 默认

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

    前言 最近一段时间都在做小程序. 虽然是第二次开发小程序,但是上次做小程序已经是一年前的事了,所以最终还是被坑得死去活来. 这次是从零开始开发一个小程序,其实除了一些莫名其妙的兼容性问题,大多数坑点都是在微信小程序的各个入口场景处. 所以这里整理一下微信小程序的各个入口场景,以及从这些入口场景进入小程序会面临的问题以及解决方案. 这里只列出常用的几种场景: [简单场景]启动小程序并进入 [简单场景]退出重进(启动小程序后,退出小程序,再次进入小程序) [简单场景]退出重进首页(启动小程序后,退出

  • 详解微信小程序「渲染层网络层错误」的解决方法

    问题描述: 情况是这样的,我需要在小程序中通过image标签显示三张我的图片,毫无疑问,其重点部分肯定在image的src属性上,请看思路分析: 我们可以新建一个专门放图片的文件夹,然后将我们项目所需要的图片文件全部放到这里.但是这会引发一个问题:微信官方对上线的小程序有大小的限制,所以如果你只是本地跑跑,那无可厚非,你开心就好:如果要做上线,这种方法的可行度不高: 使用外部链接.成功发布过小程序的小伙伴们都知道,外部链接必须使用https协议,且所使用域名必须设置在request合法域名列表中

  • 微信小程序收货地址API兼容低版本解决方法

    微信官方在三月底搞了不少事情.开放个人注册权限,蓝牙,与公众号打通,未来还会开发AR,图片识别,文字识别等等能力. 起初大家只是将微信小程序当做玩具看待,相信如今会有很多人把他当成一门技术去研究了.微信小程序的想象空间已经很大. 说说新增API之一的收货地址.虽然看看兼容低版本. 先上图. API很简单,就一行代码 wx.chooseAddress(OBJECT) 调起的是原生页面,体验很不错.对电商类的小程序比较有利. 不过API是从微信客户端 6.5.6 版本开始支持.这让我想起来做andr

  • 微信小程序录音文件格式silk遇到的问题及解决方法

    不好意思,误导大家了,这种将silk解密的方式只是在小程序测试的时候可以,上线以后这种方法是不行的,还是需要使用解密转码.参见:https://github.com/kn007/silk-v3-decoder 微信小程序的录音文件就是个坑... 录音文件为silk格式,说是silk其实是base64加密后的webm格式,只需将其转为webm格式即可. 我在解决问题的过程中,学到了,遇到问题一定要抓住本质,本来我以为silk是啥格式,这不懵逼了,赶紧找audio是否能播放silk,不能播放就去找网

  • 微信小程序出现wx.getLocation再次授权问题的解决方法分析

    本文实例讲述了微信小程序出现wx.getLocation再次授权问题的解决方法.分享给大家供大家参考,具体如下: 首先,在page外定义一个公共函数用于发送获取位置的请求 var getLocation = function (that) { wx.getLocation({ type: 'wgs84', success: function (res) { // 经纬度 var latitude = res.latitude var longitude = res.longitude var a

  • 微信小程序配置服务器提示验证token失败的解决方法

    最近在学习微信小程序,遇到的第一个问题就是需要配置服务器 关于这个服务器的配置我也是绕了好多弯路,说白了腾讯就是想通过你填的这个URL和Token去验证你有一个自己的服务器(外网可以访问的服务器),其实就是想让你证明你是你自己,呵呵.... 关于这个token随便填不要纠结,下面直接看JAVA代码 package com.base.action; import java.io.PrintWriter; import java.security.MessageDigest; import java

  • Android 仿微信小程序入口动画

    目录 效果对比 流程分析 自定义ViewGroup 小程序缩放比例值计算 动画遮罩 MainActivity 效果对比 微信原版 仿照效果 流程分析 自定义ViewGroup 整个布局是通过自定义ViewGroup来管理的,在自定义ViewGroup中,子布局一共有两个,一个是小程序布局,一个是会话列表布局,然后按照上下分别摆放就可以了. package com.example.kotlindemo.widget.weixin import android.content.Context imp

  • 微信小程序云开发修改云数据库中的数据方法

    小程序代码中无法直接修改他人创建的数据记录 例如:数据库表中的_openid字段是自动生成的,哪个用户创建的记录这个openid就是用户的openid,云数据库的权限分配也是根据openid来进行的. 解决方案: 第一步:创建云函数,在函数中编写修改数据库的操作代码 // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() const _ = db.command // 云

  • 微信小程序mpvue点击按钮获取button值的方法

    在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的 在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat

  • 微信小程序 配置顶部导航条标题颜色的实现方法

    微信小程序 配置顶部导航条标题颜色的实现方法 关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac

随机推荐