小程序開(kāi)發(fā)之頁(yè)面跳轉(zhuǎn)攔截

• 隨著小程序的普及，人們對(duì)于小程序這種輕應(yīng)用的接受度越來(lái)越高了，越來(lái)越多的APP正在將部分功能小程序化，利用小程序易于傳播，且獲客成本相比APP更低的特點(diǎn)來(lái)獲得更多的用戶，然后通過(guò)后續(xù)的運(yùn)營(yíng)將小程序的用戶轉(zhuǎn)化為APP的用戶。提高APP用戶數(shù)。

• 其實(shí)用的小程序多了，我們不難發(fā)現(xiàn)其實(shí)我們微信里面小程序的來(lái)源差不多就那么幾種，掃描二維碼，點(diǎn)擊別人分享的進(jìn)入

• 而當(dāng)小程序傳播出去觸達(dá)用戶之后，我們開(kāi)發(fā)者能做的就是，如何讓用戶在打開(kāi)分享出去的小程序之后能夠一觸即達(dá)到我們需要用戶進(jìn)入的頁(yè)面，完成我們預(yù)設(shè)的各種行為。

• 所以分享打開(kāi)小程序一般就兩種要求；

  • 一種是用戶打開(kāi)別人分享的小程序之后直接啟動(dòng)小程序進(jìn)入首頁(yè)即可；
  • 一種需要分享特定頁(yè)面，且需要攜帶一些特定的參數(shù)。當(dāng)用戶打開(kāi)之后需要將相關(guān)數(shù)據(jù)填充進(jìn)頁(yè)面。

• 兩種跳轉(zhuǎn)方式對(duì)比分析：

  • 第一種：因?yàn)橹恍璐蜷_(kāi)首頁(yè)，所以只需按正常新用戶進(jìn)行處理即可；
  • 第二種：攜帶特定參數(shù)打開(kāi)特定頁(yè)面，其實(shí)是坑比較多的一種吧；
    • 主要需要考慮的就是小程序是否需要登陸(需要獲取用戶頭像昵稱或者手機(jī)號(hào)這種需用戶手動(dòng)授權(quán)獲取信息的)。
    • 小程序的主頁(yè)頁(yè)面結(jié)構(gòu)。如果主頁(yè)是tabBar的形式，那么跟普通的頁(yè)面數(shù)據(jù)傳遞又是不一樣的，需要另外處理了。

一：以打開(kāi)特定頁(yè)面為例。實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)攔截處理

• 產(chǎn)品需求：用戶分享不同頁(yè)面，其他用戶點(diǎn)擊之后需要能直接跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面，且信息展示需與分享來(lái)源用戶展示信息一致
  • 如：分享帖子，其他人打開(kāi)之后需要開(kāi)到的是同一篇帖子，組隊(duì)類游戲分享，其他人打開(kāi)之后需要直接默認(rèn)進(jìn)入邀請(qǐng)人所在隊(duì)伍，然后讓用戶選擇是否修改要加入的隊(duì)伍。
  • 注冊(cè)用戶才可以進(jìn)入小程序除注冊(cè)頁(yè)面以外的其他頁(yè)面。所以未在當(dāng)前設(shè)備使用過(guò)小程序的用戶需要先進(jìn)行注冊(cè)，或登錄
• 功能實(shí)現(xiàn)分析：
  • 因?yàn)樾〕绦蛑兴械牟僮鞫夹枰脩舻卿浐筮M(jìn)行登錄，所以對(duì)于初次打開(kāi)的用戶需要先進(jìn)行注冊(cè)，然后攜帶對(duì)應(yīng)參數(shù)進(jìn)入相應(yīng)頁(yè)面

二：技術(shù)實(shí)現(xiàn)過(guò)程

• 方案一：直接使用微信的分享功能，將每個(gè)頁(yè)面的分享路徑直接設(shè)置成當(dāng)前頁(yè)面路徑。然后用戶點(diǎn)擊之后直接進(jìn)入對(duì)應(yīng)頁(yè)面；
  • 放棄原因：直接設(shè)成當(dāng)前路徑會(huì)導(dǎo)致跳過(guò)注冊(cè)頁(yè)，直接進(jìn)入目標(biāo)頁(yè)，但是因?yàn)槿鄙俦匾?qǐng)求參數(shù)，導(dǎo)致頁(yè)面展示出現(xiàn)問(wèn)題；
• 方案二：將所有分享出去的頁(yè)面路徑統(tǒng)一設(shè)置成注冊(cè)頁(yè)，然后注冊(cè)頁(yè)獲取分享數(shù)據(jù)之后，在注冊(cè)登錄成功將相關(guān)數(shù)據(jù)傳遞到對(duì)應(yīng)頁(yè)面。
  • 放棄原因：注冊(cè)成功之后，跳轉(zhuǎn)到指定頁(yè)面，這時(shí)候小程序的頁(yè)面棧中只有注冊(cè)頁(yè)，和該分享頁(yè)，導(dǎo)致用戶返回之后直接就回到注冊(cè)頁(yè)面。 無(wú)法進(jìn)入首頁(yè)然后進(jìn)入小程序的其他頁(yè)面。
• 方案三：其實(shí)就是將方案二進(jìn)行修正，就是將用戶分享出去的路徑還是設(shè)置成注冊(cè)頁(yè)，但是在注冊(cè)成功之后還是先跳首頁(yè)，然后首頁(yè)根據(jù)來(lái)源是分享還是直接進(jìn)入，來(lái)區(qū)分是應(yīng)該進(jìn)行頁(yè)面跳轉(zhuǎn)還是停留在當(dāng)前頁(yè)。這時(shí)候當(dāng)用戶進(jìn)入指定頁(yè)之后，因?yàn)轫?yè)面棧中已經(jīng)有首頁(yè)了，所以用戶是可以進(jìn)行返回到首頁(yè)的。
• 實(shí)現(xiàn)過(guò)程遇到的坑：
  • 1.因?yàn)橹黜?yè)是tabBar的形式，所以無(wú)法通過(guò)在地址后拼接參數(shù)的形式進(jìn)行傳參了(url: 'test?id=1')。最后選擇通過(guò)app.js文件定義一個(gè)全局變量臨時(shí)存儲(chǔ)頁(yè)面數(shù)據(jù)，然后在跳轉(zhuǎn)之后取出數(shù)據(jù)，并將app.js中的數(shù)據(jù)清空，以免影響下次跳轉(zhuǎn)。

  • 2.無(wú)法在app.js的onLoad方法中進(jìn)行跳轉(zhuǎn)，因?yàn)樵趏nLoad還未執(zhí)行完，就已經(jīng)跳轉(zhuǎn)到app.json中注冊(cè)的首頁(yè)去了

    
    
    login.png
    
    
    home.png

三：關(guān)鍵代碼如下

• 以分享帖子為例進(jìn)行部分參數(shù)說(shuō)明

• 第一步，分享頁(yè)分享當(dāng)前頁(yè)面

//分享頁(yè)
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中定義分享標(biāo)識(shí)，以及定義字段接收分享參數(shù)，進(jìn)行數(shù)據(jù)的存儲(chǔ)。

//app.js
/**
 * 可用來(lái)進(jìn)行全局的數(shù)據(jù)傳遞
 */
globalData: {
    isFromShare:false,//是否是分享進(jìn)入首頁(yè)
    fromParam:{}//分享攜帶的參數(shù)
}

• 第三步，注冊(cè)登錄頁(yè)獲取數(shù)據(jù)，并將數(shù)據(jù)保存在第二步中定義的字段中。

//index.js//注冊(cè)登錄頁(yè)，在onLoad中獲取啟動(dòng)的參數(shù)，且復(fù)賦值給app.js中的字段。方便首頁(yè)獲取
onLoad: function (options) {
    getApp().globalData.isFromShare = options.FromShare === 'true';
    getApp().globalData.fromParam = options;
}

• 第四步，首頁(yè)從app.js中讀取數(shù)據(jù)，進(jìn)行頁(yè)面跳轉(zhuǎn)以及將相關(guān)參數(shù)傳遞至對(duì)應(yīng)頁(yè)面

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,以免影響后面頁(yè)面的跳轉(zhuǎn)
  }
},

• 第五步，分享頁(yè)獲取參數(shù)，進(jìn)行數(shù)據(jù)加載顯示。

/**
 * 分享來(lái)源解析參數(shù)，展示頁(yè)面
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
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);
},

四：總結(jié)

• 實(shí)現(xiàn)該需求主要需要注意到的是兩個(gè)問(wèn)題
• 1.微信的頁(yè)面棧問(wèn)題。對(duì)于進(jìn)入非首頁(yè)的頁(yè)面，需要先讓首頁(yè)進(jìn)入微信頁(yè)面棧，后續(xù)用戶才可以返回到首頁(yè)進(jìn)入其他頁(yè)面
• 2.wx.switchTab無(wú)法傳遞參數(shù)。只能通過(guò)其他方式來(lái)進(jìn)行參數(shù)的傳遞。
• 其實(shí)這個(gè)過(guò)程跟H5打開(kāi)Android指定頁(yè)面后Android端的整體處理邏輯其實(shí)是一樣。只是Android端和小程序端的坑不一樣；Android端還需要考慮在不同APP內(nèi)打開(kāi)應(yīng)用的適配問(wèn)題，以及打開(kāi)指定頁(yè)面后被拉回原始APP的問(wèn)題。
• H5打開(kāi)APP指定頁(yè)面爬坑記錄