微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码

需求:微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore

分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app)

变通方法:

一、借助TX的应用市场 --‘应用宝’:将app上架应用宝,在微信中点击下载按钮(app的应用宝微下载地址),安卓则可跳转应用直接进行下载,iphone则会自动跳转Appstore(需在TX开发平台进行配置)

总结:虽然这种方法可以直接跳出微信并进行下载,但是需要用户在应用宝中下载

二、在微信中生成遮罩层,然后指引用户点击微信中右上角的更多按钮,选择【在浏览器打开】(iphone为【在safari中打开】,下同)

总结:虽然这种方法需要用户多操作一步,但贵在原生且不涉及第三方应用市场,本文主要讲述的是这种方法(且在浏览器中打开后仿应用宝下载效果:安卓直接弹出apk下载框,iphone则直接跳转AppStore,无需用户再一次点击下载按钮)

案例效果展示:

1、IOS自动跳转Appstore(需在TX开发平台进行配置)


微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码_第1张图片

2、安卓:直接跳转手机浏览器打开APK下载文件


微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码_第2张图片

代码:

1、识别手机类型

/* 判断用户手机为安卓还是iphone */

checkPhone () {

let self = this

let agent = (navigator.userAgent || navigator.vendor || window.opera)

    if (agent != null) {

let agentName = agent.toLowerCase()

        if (/android/i.test(agentName)) {

          self.isAndroid = true

        } else if (/iphone/i.test(agentName)) {

          self.isIOS = true

        }

  }

}

2、识别微信环境

/* 判断是否为微信环境 */

this.isWeiXin = navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1 ? true : false

3、点击下载按钮,显示遮罩层,并为本H5页面url地址上增加hash值‘download’(改变hash值并不会刷新页面,但可让浏览器识别),并指引用户浏览器打开

/* 点击下载按钮 */

downloadApp () {

      // 微信环境

      let self = this

      self.checkPhone()

      let agent = (navigator.userAgent || navigator.vendor || window.opera)

      if (agent != null) {

        let agentName = agent.toLowerCase()

        // this.$alert({text: [agentName]})

        if (self.isAndroid) {

          // 微信环境

          if (self.isWeiXin) {

            self.downloadInWeixin = true

            window.location.hash = 'download'  // 改变hash,便于浏览器打开时直接下载安卓包

            return

          }

          // 安卓包下载地址

          window.location.href = config.androidDownloadUrl

        } else if (self.isIOS) {

          // 微信环境

          if (self.isWeiXin) {

            self.downloadInWeixin = true

            window.location.hash = 'download'    // 改变hash,便于浏览器打开时直接跳转AppStore

            return

          }

          // 苹果商店链接地址

          window.location.href = config.iosAppstoreUrl

        } else {

          this.$alert({text: ['暂不支持,敬请期待~']})

        }

      }

    }


4、浏览器中打开加了hash的url地址,识别hash值,安卓直接弹出apk下载框,iphone则直接跳转AppStore

     重中之重:原来的H5页面的url地址后面必须跟上‘#/’, 不然浏览器不会识别hash值,切记、切记、切记

identityHash () {

if (window.location.hash.includes('download')) {

      window.location.hash = ''  //  还原hash为空

      self.checkPhone()

      if (self.isAndroid) {

        // 安卓,弹出包下载页面

        window.location.href = config.androidDownloadUrl

      } else if (self.isIOS) {

        // ios,直接跳转Appstore

        window.location.href = config.linkToAppstore

      } else {

        this.$alert({text: ['暂不支持,敬请期待~']})

      }

    }

}

你可能感兴趣的:(微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码)