ios與android上小程序跳轉兼容實現與封裝

項目中遇到的坑,在這裏記錄下:

一、需求:

    在進行微信小程序分享時進行跳轉,這個跳轉有三種情況:小程序之間的相互跳轉、外鏈、鏈接;所以,接口中請求的數據有三種類型,用type標記,我這裏只是給個流程記錄下,沒有接口也行,自己去模擬一個,重點是遇到的兩個坑以及解決方案!

坑一:
     在ios上,分享時,直接進行了廣告跳轉(外鏈跳轉/鏈接跳轉/小程序跳轉彈窗),微信好友列表沒有了或被覆蓋在下面了,現在的
需求時先要彈出要分享的微信好友列表,然後纔是廣告跳轉,現在卻相反了,解決辦法就是設置個延遲!但是這樣又出現了一個新坑!
ps:android手機上不會有此坑~


坑二:
       設置了延遲後,android手機上會導致要跳轉的小程序彈窗不能出現,ios上沒問題!


故:結合以上兩個坑,我們可以分條進行判斷,然後可以完美的解決上述兩個坑~

if (that.data.plat === 'ios') {
      setTimeout(function () {
        that.shareAd();
      }, 500)
    } else if (that.data.plat === "android") {
      that.shareAd();
    }

二、下面進行具體的一個流程梳理

Page({
	   data: {
			plat: '', //客戶端平臺
		},
		onLoad() {
			let that = this;
			// 通過以下方式之一獲取獲取客戶端平臺, 客戶端平臺有兩種: ios與android,
			// let res = wx.getSystemInfoSync();
			// that.setData({
			// 	plat: res.platform
			// })

			wx.getSystemInfo({
				success(res) {
					that.setData({
						plat: res.platform
					})
				}
			})
		},

      onShareAppMessage: function (res) {
        var that = this
        if (that.data.plat === 'ios') {
          setTimeout(function () {
            that.shareAd();
          }, 500)
        } else if (that.data.plat === "android") {
          that.shareAd();
        }
        return {
          title: '分享標題',
          imageUrl: '分享圖片',
          path: '分享路徑',
          success: function (res) {
            console.log('成功', res)
          }
        }
      },


      // 分享廣告數據請求
	  shareAd() {
		wx.request({
			url: '',
			success(res) {
			// 此處的數據只是一個展示,有的可能在data下的data之類的,
			// 只明確getads爲獲取到的數據即可,這裏你也可以在本地模擬廣告數據getads出來
			// 接口返回的數據有三種形式:
			// 1、app 代表小程序
			// 2、view 代表外鏈
			// 3、link 代表鏈接
			let getads = res.data || [];
			if (ads.length > 0) {
				// 如果存在廣告,就傳數據給封裝好的跳轉函數advertisingJump
				that.advertisingJump(getads);
			  }
             }
	     })
     },



     // 廣告跳轉封裝
     advertisingJump: function(ads) {
	    // 隨機拿到一條廣告
	    var index = Math.floor((Math.random() * ads.length));
	    var ad = ads[index];
	    // 小程序之間相互跳轉
	    if (ad.type == "app") {
		    wx.navigateToMiniProgram({
			    appId: ad.appid,
		    })
       	} else if (ad.type == "view") {
		    // 進行外鏈跳轉
		    if (ads.length > 0) {
			    // 有廣告就進行跳轉,沒有的話只進行分享或它原本的操作
			    wx.navigateTo({
				    url: "/pages/web/web?wpath=" + ad.path
			    })
		    }
	    } else if (ad.type == "link") {
		    // 頁面跳轉
		    wx.navigateTo({
			     url: ad.path
		    })
	     }
       }
})



以上是微信小程序中遇到的坑,uni-app中解決的方法也一樣!

 

wx.navigateToMiniProgram注意事項:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章