小程序开发之页面跳转拦截

小程序开发之页面跳转拦截

• 随着小程序的普及，人们对于小程序这种轻应用的接受度越来越高了，越来越多的APP正在将部分功能小程序化，利用小程序易于传播，且获客成本相比APP更低的特点来获得更多的用户，然后通过后续的运营将小程序的用户转化为APP的用户。提高APP用户数。

• 其实用的小程序多了，我们不难发现其实我们微信里面小程序的来源差不多就那么几种，扫描二维码，点击别人分享的进入

• 而当小程序传播出去触达用户之后，我们开发者能做的就是，如何让用户在打开分享出去的小程序之后能够一触即达到我们需要用户进入的页面，完成我们预设的各种行为。

• 所以分享打开小程序一般就两种要求；

  • 一种是用户打开别人分享的小程序之后直接启动小程序进入首页即可；
  • 一种需要分享特定页面，且需要携带一些特定的参数。当用户打开之后需要将相关数据填充进页面。

• 两种跳转方式对比分析：

  • 第一种：因为只需打开首页，所以只需按正常新用户进行处理即可；
  • 第二种：携带特定参数打开特定页面，其实是坑比较多的一种吧；
    • 主要需要考虑的就是小程序是否需要登陆(需要获取用户头像昵称或者手机号这种需用户手动授权获取信息的)。
    • 小程序的主页页面结构。如果主页是tabBar的形式，那么跟普通的页面数据传递又是不一样的，需要另外处理了。

一：以打开特定页面为例。实现页面跳转拦截处理

• 产品需求：用户分享不同页面，其他用户点击之后需要能直接跳转到对应页面，且信息展示需与分享来源用户展示信息一致
  • 如：分享帖子，其他人打开之后需要开到的是同一篇帖子，组队类游戏分享，其他人打开之后需要直接默认进入邀请人所在队伍，然后让用户选择是否修改要加入的队伍。
  • 注册用户才可以进入小程序除注册页面以外的其他页面。所以未在当前设备使用过小程序的用户需要先进行注册，或登录
• 功能实现分析：
  • 因为小程序中所有的操作都需要用户登录后进行登录，所以对于初次打开的用户需要先进行注册，然后携带对应参数进入相应页面

二：技术实现过程

• 方案一：直接使用微信的分享功能，将每个页面的分享路径直接设置成当前页面路径。然后用户点击之后直接进入对应页面；
  • 放弃原因：直接设成当前路径会导致跳过注册页，直接进入目标页，但是因为缺少必要请求参数，导致页面展示出现问题；
• 方案二：将所有分享出去的页面路径统一设置成注册页，然后注册页获取分享数据之后，在注册登录成功将相关数据传递到对应页面。
  • 放弃原因：注册成功之后，跳转到指定页面，这时候小程序的页面栈中只有注册页，和该分享页，导致用户返回之后直接就回到注册页面。 无法进入首页然后进入小程序的其他页面。
• 方案三：其实就是将方案二进行修正，就是将用户分享出去的路径还是设置成注册页，但是在注册成功之后还是先跳首页，然后首页根据来源是分享还是直接进入，来区分是应该进行页面跳转还是停留在当前页。这时候当用户进入指定页之后，因为页面栈中已经有首页了，所以用户是可以进行返回到首页的。
• 实现过程遇到的坑：
  • 1.因为主页是tabBar的形式，所以无法通过在地址后拼接参数的形式进行传参了(url: 'test?id=1')。最后选择通过app.js文件定义一个全局变量临时存储页面数据，然后在跳转之后取出数据，并将app.js中的数据清空，以免影响下次跳转。

  • 2.无法在app.js的onLoad方法中进行跳转，因为在onLoad还未执行完，就已经跳转到app.json中注册的首页去了

    
    
    login.png
    
    
    home.png

三：关键代码如下

• 以分享帖子为例进行部分参数说明

参数名	必选	类型	说明
ShareType	是	int	分享页面类型-1.帖子，2-活动(主要用来区分要跳转的页面，可根据需要自己添加)
ArticleId	是	String	帖子ID
ArticleType	是	int	帖子类型时，帖子类型不同，页面也不一样

• 第一步，分享页分享当前页面

//分享页
onShareAppMessage: function () {
    var that = this;
    return {
        title: '帖子',
        path: '/pages/index/index?ShareType=1&' + "ArticleId=" + that.data.id + "&ArticleType=" + that.data.ArticleType
        +'&ContentType'+that.data.ContentType
    }
},

• 第二步，app.js中定义分享标识，以及定义字段接收分享参数，进行数据的存储。

//app.js
/**
 * 可用来进行全局的数据传递
 */
globalData: {
    isFromShare:false,//是否是分享进入首页
    fromParam:{}//分享携带的参数
}

• 第三步，注册登录页获取数据，并将数据保存在第二步中定义的字段中。

//index.js//注册登录页，在onLoad中获取启动的参数，且复赋值给app.js中的字段。方便首页获取
onLoad: function (options) {
    getApp().globalData.isFromShare = options.FromShare === 'true';
    getApp().globalData.fromParam = options;
}

• 第四步，首页从app.js中读取数据，进行页面跳转以及将相关参数传递至对应页面

onLoad: function() {
  let isFromShare = getApp().globalData.isFromShare;
  if (isFromShare) {
    var argument = getApp().globalData.fromParam;
    switch (parseInt(argument.ShareType)) {
      case 1: //分享的是帖子
        wx.navigateTo({
          url: '../imageText/imageText?' + 'ArticleType=' + argument.ArticleType + '&ArticleId=' + argument.ArticleId,
        })
        break;

    }
    getApp().globalData.isFromShare = false;//置为false,以免影响后面页面的跳转
  }
},

• 第五步，分享页获取参数，进行数据加载显示。

/**
 * 分享来源解析参数，展示页面
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
    var that = this;
    let type = options.ArticleType;
    let id = options.ArticleId;
  console.log('ArticleType = ' + type + '---' + 'ArticleId = ' + id);
    that.setData({
        id: id,
        ArticleType: type
    })
    that.getArticleData(id);
    that.getCommentList(id, 1);
},

四：总结

• 实现该需求主要需要注意到的是两个问题
• 1.微信的页面栈问题。对于进入非首页的页面，需要先让首页进入微信页面栈，后续用户才可以返回到首页进入其他页面
• 2.wx.switchTab无法传递参数。只能通过其他方式来进行参数的传递。
• 其实这个过程跟H5打开Android指定页面后Android端的整体处理逻辑其实是一样。只是Android端和小程序端的坑不一样；Android端还需要考虑在不同APP内打开应用的适配问题，以及打开指定页面后被拉回原始APP的问题。
• H5打开APP指定页面爬坑记录