视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
微信小程序新手教程之启动页的重要性
2020-11-27 22:00:23 责编:小采
文档

前言

启动页在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'
 })
}

下载本文
显示全文
专题