精华内容
下载资源
问答
  • 2019-03-30 08:56:42

           vue实现app下载引导页,目标:手机微信打开时提示用户从浏览器打开。手机浏览器访问时,点击下载按钮自动识别安卓IOS跳转对应下载页面。

           例子使用的是vue+脚手架(vue-cli)搭建,具体流程网上例子很多,文章不做赘述。IDE使用的是vscode。

    第一步、创建项目:

           笔者使用的是Windows系统,在doc命令中输入vue init webpack app_download 创建项目。app_download为项目名称。

    第二步、项目配置:

           

           图片中是项目目录结构,dist是打包出来的文件,创建时没有。

           项目构建后,在index.html添加标签<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />。这个标签如果是经常开放web app会比较熟悉,不是文章重点,不做过多描述。

            在vscode中打开项目,打开src文件夹。demo只有一个页面,使用默认生成的index.vue即可。

    第三步、编码:

          打开index.vue。创建两个div,上下布局,第一个div默认不显示,只有在微信浏览器中才显示,目的是提示用户用其它浏览器打开。第二个div显示下载页面,有一个按钮跳转到下载相关页面。

          代码:

    <template>

    <div iud="body">

    <div id="wx" v-show="show_wx">

    <img :src="wx" id="wx_img"></img>

    </div>

    <div>

    <img :src="btn" id="btn_img" @click="download()"></img>

    </div>

    </div>

    </template>

    <script>

    export default {

    data() {

    return {

    type : "android",

    show_wx : false,

    };

    },

    created() {

    let ua = navigator.userAgent.toLowerCase();

    if (/iphone|ipad|ipod/.test(ua)) {

    this.type = "ios";

    } else if (/android/.test(ua)) {

    this.type = "android";

    }

    if(isWeixinBrowser()){

    this.show_wx = true;

    }

    function isWeixinBrowser() {

    return (/micromessenger/.test(ua)) ? true : false;

    }

    },

    methods: {

    download() {

    const that = this;

    if(that.type == 'android') {

    window.location.href = '安卓下载地址';

    } else {

    window.location.href = 'IOS下载地址';

    }

    },

    }

    };

    </script>

    更多相关内容
  • 手机app下载页面模板

    2019-12-21 15:35:24
    手机app下载页面模板是一款适合APP手机客户端网页版模板下载
  • APP下载页面HTML模板

    千次下载 热门讨论 2014-11-04 20:01:28
    APP下载页面HTML模板,大家可以参考,直接修改图片即可。
  • 带弹幕的动漫app下载源码非常二次元, 很适合那些 做 二次元动漫网站或者做博客网站的app下载 界面 非常的好看 实用 , 最主要的就是 简洁 。 解压 上传 即可。
  • 微信APP下载页面

    2017-11-02 16:16:24
    微信APP下载页面微信APP下载页面微信APP下载页面微信APP下载页面
  • APP下载H5页面纯静态html前端模板
  • 绿色苹果安卓APP下载页面模板是一款大气清爽风格的手机应用APP软件下载页面模板下载
  • 仿应用宝APP软件下载页面html源码 自适应单页模板_源码下载
  • 手机APP展示下载页面模板是一款适合苹果安卓手机应用app展示模板下载
  • 简约大方自适应APP下载页,H5源码,用来做app宣传网页或者下载页面,界面还不错,页面内容和样式可自行更改。
  • APP下载单页源码

    2018-06-12 21:16:22
    APP下载页面源码,包含下载按钮,包含页面展示,图片展示等
  • APP下载落地页,自动识别安卓苹果。
  • h5页面唤起app如果没安装就跳转下载(iOS和Android) 浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app。 微信里屏蔽了 schema 协议,...
  • 黑色质感APP下载页面模板是一款html5应用软件APP下载单页模板素材。
  • 网页启动appApp不存在的话,会跳转应用市场,js编写的代码,简单易用!
  • 简约大方自适应APP下载页,用来做app宣传网页,界面还不错,内容可自行更改
  • 最新自适应APP下载

    2021-08-14 01:44:24
    简约大方自适应APP下载页,用来做app宣传网页,界面还不错,内容可自行更改。 演示地址:https://ys.x7cc.com/appxz/
  • APP下载页源码-带后台

    千次阅读 2021-05-20 12:25:59
    下载统计,带数据分析图,可一键编辑APP信息 此为1.0版本,后期会推出更多的新功能,尽请期待 注意:这个不是PHP开发的,用ASP.NET开发的,需要部署到window服务器,部署有点麻烦,选择win2019server版本,先在服务器上手动...

    简介:

    带后台
    带下载统计,带数据分析图,可一键编辑APP信息
    此为1.0版本,后期会推出更多的新功能,尽请期待
    注意:这个不是PHP开发的,用ASP.NET开发的,需要部署到window服务器,部署有点麻烦,选择win2019server版本,先在服务器上手动安装iis,不要用宝塔一键安装,宝塔安装的iis无法部署项目,安装完iis后再安装宝塔推荐,数据库用的是mysql数据库,安装完导入数据库即可,在web.config里面修改数据库连接信息
    后台地址:/admin/login
    测试站:http://wxappstore.top/ 账号:liqi199312 密码:123456


    网盘下载地址:

    http://kekewangLuo.net/at6KaENc3vY0


    图片:





    展开全文
  • 主要介绍了JS实现点击网页判断是否安装app并打开否则跳转app store的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • MUI手机app前端页面开发框架模板下载 MUI手机app前端页面开发框架模板下载
  • h5页面添加APP下载引导页实现APP下载

    千次阅读 2021-03-25 09:37:04
    最近呢,接到一个新需求,在我们负责的wap端网站添加一个app下载引导页,搜罗了半天,终于找到一个还不错的方法,给大家分享一下哈! 首先呢来考虑一下步骤:第一步呢,是要判断是ios还是Android端,第二部呢要判断...

    最近呢,接到一个新需求,在我们负责的H5网页网站添加一个app下载引导页,成功之后来给大家分享一下!
    先给大家来看一下ios跟Android微信内点击链接有什么不同:

    Android展示显示微信内空白页,点击右上角三个点打开浏览器(展示的图并没有Android端加上遮罩层的效果图,图的比例不太一样啊,哈哈哈,不影响效果)

    在这里插入图片描述在这里插入图片描述在这里插入图片描述

    ios展示直接打开跳转应用商店
    在这里插入图片描述

    首先呢来考虑一下步骤:
    第一步呢,是要判断是ios还是Android端,下载链接是不一样的,我这里直接用的a标签:

    <a v-if="iosOrAndroid===true" class="download" href="Android下载地址" @click="anzhuo($event)">
      点击下载APP
    </a>
    <a v-if="iosOrAndroid===false" class="download" href="ios下载地址" @click="ios($event)">
      点击下载APP2
    </a>
    <div class="bd_drop" ref="backdrop" v-show="show" @click="bdrop">
      <span class="tip"></span>
      <p class="tip_text">点击右上角选择<br />在浏览器中打开</p>
    </div>
    .download {position: absolute;display: block;top: 85%;height: 100px;width: 60%;background: red;opacity: .3;left: 20%;}
    .bd_drop{background: rgba(0, 0, 0, 0.8);text-align: center;position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 998;display: none;}
    .tip{width: 69px;height: 64px;position: absolute;color: #fff;right: 50px;top: 30px;background: url("../../../image/app/top_right.png") no-repeat center center;background-size: 100% 100%;}
    .tip_text {font-style: italic;color: #fff;font-size: 26px;line-height: 2;position: absolute;width: 40%;height: 150px;padding-top: 26px;box-sizing: border-box;left: 30%;border: 2px #fff dashed;border-radius: 75px;top:40%;transform: translateY(-50%);}
    

    通过这上下两个代码块大家也都明白了,Android和ios链接是通过一个变量来控制是否显示的,进入页面要先判断是Android手机还是ios手机,呐,就是下面

    // 判断ios Or  安卓
        isIosOrAndroid() {
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            // alert('是否是Android:'+isAndroid);
            // alert('是否是iOS:'+isiOS);
            if(isiOS){
              this.iosOrAndroid=false
            }else{
              this.weixinTip()
              this.iosOrAndroid=true
            }
        },
    

    第二部呢,要判断是否是微信打开,如果是微信打开的话,可以加一个遮罩层来提示一下点击右上角三个点在浏览器打开

    // 判断是否微信打开
        weixinTip() {
          var ua = navigator.userAgent
          var isWeixin = !!/MicroMessenger/i.test(ua)
          isWeixin?this.show=true:this.show=false
        }
    

    点击链接的时候显示遮罩层(遮罩层只在Android手机微信打开才显示)

        // 安卓下载
        anzhuo(e){
          if(this.show===true){
            window.event ? (window.event.returnValue = false) : e.preventDefault();
            this.show===true?this.$refs.backdrop.style.display = "block":this.$refs.backdrop.style.display = "none"
          }
        },
        // ios下载
        ios(){
          // window.event ? (window.event.returnValue = false) : e.preventDefault();
          this.$refs.backdrop.style.display = "none"
        },
        // 点击遮罩层关闭
        bdrop(){
          this.$refs.backdrop.style.display = "none"
        }
    

    遮罩层这个根据自己需要来使用,不加遮罩层在浏览器打开能直接显示是否下载APP,加上之后到浏览器中会先显示当前页面,重新点击下载链接显示是否下载APP

    展开全文
  • APP下载及服务介绍响应式网页模板
  • App下载引导宣传页单页模板是一款适合软件开发公司网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • 响应式APP功能介绍官方下载页面模板,适合APP下载官网页面
  • 微信跳转链接,微信跳转链接生成,微信跳转浏览器,微信跳转自带浏览器,安卓微信跳转,微信跳转浏览器下载app,提供微信内部浏览器自动打开外部默认浏览器下载apk应用,跳转外部默认浏览器打开指定链接。
  • 苹果手机app应用网页模板
  • H5 引用vue 打开app(如何该手机内有某个app则直接打开app,如果没有则跳转app下载页面) **ps: 一定一定一定一定先向 ios要 ( ios下载地址 和 ios对应的app协议 ),找安卓要( android下载地址 和 andriod对应的...

    H5 引用vue 打开app(如何该手机内有某个app则直接打开app,如果没有则跳转app下载页面)

    **ps: 一定一定一定一定先向 ios要 ( ios下载地址 和 ios对应的app协议 ),找安卓要( android下载地址 和 andriod对应的app协议 )

    在这里插入图片描述

    在这里插入图片描述

    • 点击按钮 有两种情况
    • 1.该手机没有app,则跳转下载页面
      在这里插入图片描述
    • 2.该手机内有app,即可打开app

    在这里插入图片描述

    ------------------------步骤如下:------------------

    1. 判断是否是微信打开页面还是浏览器打开(并强制让用户使用浏览器打开)
      强制让用户使用浏览器打开代码:
      <div id='guideZfbPayPage' v-if="iosApp">
        <div class="wx-open" >
          <p>1.请点击右上角 • • •</p>
          <p>2.选择在浏览器中打开</p>
          <img src="./images/arrow_right.png" />
        </div>
      </div>
    

    mounted时 判断该页面是微信打开还是浏览器打开,强制让用户使用浏览器打开代码
    代码如下:

        mounted(){
          if (this.isWeixin()) {
            this.iosApp = true
          } else {
            //显示手动打开外置浏览器提示
            this.iosApp = false
          }
        },
    
    methods:{
          isWeixin() {
            return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
          },
    }
    
    1. 点击按钮
    <div @click="openApp> 打开app</div>
    
       methods:{  
          openApp() {
            const ua = window.navigator.userAgent.toLowerCase();
            // 非微信浏览器
            if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
              const loadDateTime = +new Date();
              window.setTimeout(function () {
                const timeOutDateTime = +new Date();
                if ((timeOutDateTime - loadDateTime) < 5000) {
                  window.location.href = '// ios下载地址'; 
                } else {
                  window.close()
                }
              }, 2000);
              window.location.href = '// ios对应的app协议'; 
            } else if (navigator.userAgent.match(/android/i)) {
              const state = null;
              try {
                window.location.href = '// 安卓对应的app协议'; 
                setTimeout(function () {
                  window.location.href = '// android下载地址'; 
                }, 500);
              } catch (e) {
              }
            }
          }
        }
    

    纯H5 原生js 代码

    代码如下:

    // =======================  Dom  ==========================
    
    <div id='guideZfbPayPage' style="display: block;" >
      <div class="wx-open" >
          <p>1.请点击右上角 • • •</p>
          <p>2.选择在浏览器中打开</p>
          <img src="./image/arrow_right.png" />
      </div>
    </div>
    
    // =======================  css 样式  ==========================
    <style>
    /* 提示浏览器打开 */
    #guideZfbPayPage {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 777;
    }
    .wx-open {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 888888;
    }
    .wx-open p {
        position: relative;
        top: 38%;
        margin-block-start: 0;
        color: white;
        font-size: 18px;
        line-height: 20px;
    }
    .wx-open img {
        width: 25%;
        border-style: none;
        position: absolute;
        transform: rotateZ(246deg);
        top: 6%;
        right: 28px;
    }
    </style>
    
    // =======================  js  ==========================
    <script>
    // 页面加载时,立即执行代码
    (function(){
      var u = navigator.userAgent,
      app = navigator.appVersion
      var isAndroidNum = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
      var isIOSNum = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isAndroidNum) {
        isAndroid = true
        schemeUrl= 'android://com.xpx.watercamera/open'
        downloadUrl = 'https://www.pgyer.com/8PGW'
      }
      if (isIOSNum) {
        isIos = true
        schemeUrl= 'iOSXPXMJCamera://'
        downloadUrl = 'itms-apps://itunes.apple.com/app/id1549495554'
      }
      if (isWeixin()) {
        console.log(11111111);
      document.getElementById("guideZfbPayPage").style.display=  "block"
      } else {
        //显示手动打开外置浏览器提示
        document.getElementById("guideZfbPayPage").style.display=  "none"
      }
    })();
    
    //判断当前是什么浏览器
    function isWeixin() {
      return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
    };
    function openApp() {
      const ua = window.navigator.userAgent.toLowerCase();
      // 非微信浏览器
      if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
        const loadDateTime = +new Date();
        window.setTimeout(function () {
          const timeOutDateTime = +new Date();
          if ((timeOutDateTime - loadDateTime) < 5000) {
            window.location.href = '// ios下载地址'; 
          } else {
            window.close()
          }
        }, 2000);
        window.location.href = '// ios对应的app协议'; 
      } else if (navigator.userAgent.match(/android/i)) {
        const state = null;
        try {
          window.location.href = '// 安卓对应的app协议'; 
          setTimeout(function () {
            window.location.href = '// android下载地址'; 
          }, 500);
        } catch (e) {
        }
      }
    }
    </script>
    
    

    此方法存在一个小问题
    如果该手机已存有app时,会弹出是否打开app的弹框,在这期间会继续执行跳转链接页面,如果要求不是很大,这样足以;
    目前还没找到合适的方法,如果有哪位同僚也在解决这个,知道一些解决方法希望能在下方告知一二。

    开发工程中 参考链接:
    1.https://blog.csdn.net/qq_36710522/article/details/100769219
    2.https://www.dazhuanlan.com/2020/03/09/5e65d7366b6aa/
    3.https://blog.csdn.net/w18246390463/article/details/81707961

    展开全文
  • 说明: 一款模仿袋鼠APP下载页面源码,非常简单的纯html网站APP下载页源码。 下载地址:菜鸟站长之家
  • jquery.autoapp 移动网页使用 点击链接时自动判定是打开app 还是下载app 功能: 手机安装了自己的app就打开 没有安装... androidUrl: "android版app下载页面" //直接下载地址或者页面都是可以的 }); }); 场景二:打开
  • 下面小编就为大家分享一篇ios App加载本地HTML网页,点击网页链接跳转到app页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 988,817
精华内容 395,526
关键字:

app下载页面