收藏
评论

小程序开发之二(路由拦截设计)

原文链接:http://callmesoul.cn/xiao-cheng-xu-kai-fa-zhi-er-lu-you-lan-jie-she-ji/

首先说下小程序的简单运行:

1.app onLaunch

2.如果有app onLaunch 的 path参数有值则跳到 path对应页面否则为app的json第一个路由

onLaunch 的path怎么来的?

1.通过分享给朋友的接口传的path

暂时只发现这个

app onLaunch 里拦截路由?

以后可得知小程序统一入口就是app的onLaunch,所以在onLaunch 拦截是最理想的。但是onLaunch里并没有提供拦截的接口或方法,当你在onLaunch有异步处理时,还没处理完,onLaunch就直接跳到了下一个页面了。

例如:你想获得用户信息在进入页面。

你在app onLaunch去请求用户信息,但onLaunch不会等你请求完再跳到页面。

所以在app没办法实现。

app.json第一个路由里拦截!!!

既然app里面实现不了只能退居求次在第一个页面处理了,因为当没有path(onLaunch(option))也就是正常打开小程序都会进入第一个页面,我们可以在第一个页面统一处理好逻辑再选择去跳其他页面。

分享的页面带path会直接跳到path页面不跳到第一个页面?

其实很简单分享的时候分享页面的path填写第一个页面路由例如/pages/login,在把你当前页面的路由作为一个参数一起传过去:

onShareAppMessage(res) {
      let fromPath='/pages/activity'
      return {
        title: 'xxxxx!',
        path: '/pages/login?fromPath='+fromPath,
        imageUrl:xxxxx,
        success: (res) => {
          xxxxxx
        }
      }
    }

这样分享出去的页面就会跳到一个页面而且是带你分享的页面路径作为参数的。

在第一个页面获得分享的路径做跳转就好,还可以加些逻辑之类方便多。

上面的写法有个问题,如果分享的页面也要参数,分享的path就会有两个??

/pages/login?fromPath=/pages/activity?activityId=1

如果这样直接传过去第一个页面,activityId会被拦截掉,所以我们需要一个把问号转码的函数转码了再传过去,第一个页面获得页面后解码再跳转即可:

onShareAppMessage(res) {      let fromPath='/pages/activity?activityId=2'
      fromPath=encodeURIComponent(fromPath);      return {
        title: xxxxxx!',
        path: '/pages/login?fromPath='+fromPath,
        imageUrl:xxxx,
        success: (res) => {
          xxxx
        }
      }
    }

然后在第一个页面使用对应函数解码即可:

onLoad(params){    if(params.fromPath){            let fromPath=decodeURIComponent(params.fromPath);            ///do somethings...
   }
}

大概流程就这样。


最后一次编辑于  2018-03-08  (未经腾讯允许,不得转载)
赞 0
收藏

6 个评论

  • Summer
    Summer
    2018-04-17

    好的,谢谢~

    2018-04-17
    赞同
    回复
  • CallMeSoul
    CallMeSoul
    2018-04-17

    对的,并且吧login发page第一位,因为放app是拦截不了,而获取权限等操作又是异步的

    2018-04-17
    赞同
    回复
  • Summer
    Summer
    2018-04-17

    无论从分享链接进入小程序还是直接从小程序入口进入,都需要发起获取用户权限,这样是不是应该将获取权限登录的代码放到login页面进行?

    2018-04-17
    赞同
    回复
  • Summer
    Summer
    2018-04-17

    嗯嗯,明白了,目前我就是这样做的,谢谢了~

    2018-04-17
    赞同
    回复
  • CallMeSoul
    CallMeSoul
    2018-04-17

    不走的,根据我的设计的话,分享页面链接:/pages/login?formPath=sharepPath;

    sharePath是原本分享的页面。

    这样无论是什么页面都会进过login页面的逻辑再跳formPath页面

    2018-04-17
    赞同
    回复
  • Summer
    Summer
    2018-04-17

    点击分享页面跳到指定的页面,代码会走项目根目录的app.js文件吗?  我试了很多次好像是不走的。。。

    2018-04-17
    赞同
    回复