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

发布了32 篇原创文章 · 获赞 57 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/Syleapn/article/details/97248324