小程序開發之頁面跳轉攔截

• 隨著小程序的普及，人們對于小程序這種輕應用的接受度越來越高了，越來越多的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

三：關鍵代碼如下

• 以分享帖子為例進行部分參數說明

• 第一步，分享頁分享當前頁面

//分享頁
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指定頁面爬坑記錄