• 微信h5页面中下载第三方app的方法


    需求:在微信h5页面中下载第三方app —— 安卓, 直接下载apk文件包;iphone,跳转AppStore
    分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app)

    变通方法:
    一、借助TX的应用市场 --‘应用宝’:将app上架应用宝,在微信中点击下载按钮(app的应用宝微下载地址),安卓则可跳转应用直接进行下载,iphone则会自动跳转Appstore(需在TX开发平台进行配置)
    总结:虽然这种方法可以直接跳出微信并进行下载,但是需要用户在应用宝中下载
    二、在微信中生成遮罩层,然后指引用户点击微信中右上角的更多按钮,选择【在浏览器打开】(iphone为【在safari中打开】,下同)
    总结:虽然这种方法需要用户多操作一步,但贵在原生且不涉及第三方应用市场,本文主要讲述的是这种方法(且在浏览器中打开后仿应用宝下载效果:安卓直接弹出apk下载框,iphone则直接跳转AppStore,无需用户再一次点击下载按钮)
    主要代码如下(H5页面由vue构建):

    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: ['暂不支持,敬请期待~']})
    }
    }
    }

  • 相关阅读:
    android 样式开发
    Android studio 开发环境搭建
    nodejs+express 4.x笔记
    C#: switch语句的重构『网摘』
    从实例谈OOP、工厂模式和重构
    ASP.NET FileUpload 上传文件类型验证
    asp.net 网页中播放 flash 和flv
    数据库设计中主键问题
    修改Sqlserver实例默认排序规则
    查看sqlserver被锁的表以及如何解锁
  • 原文地址:https://www.cnblogs.com/IT-TOP/p/10636065.html
Copyright © 2020-2023  润新知