vue or h5分享页面 唤起和下载app(苹果和安卓判断 及 微信浏览器和其他浏览器的判断)

题外话: 菜鸡是没有发言权的,导致即使不是前端的锅,也把它变成是你的锅。
哎!!!!!!!!!!!!!

		 首先必须感谢我认识的大佬,一直在帮我解决问题(我关注的那个jamesluozhiwei  这位)

步入正题:
1 。唤起和下载
用的框架 和 参考文档(重要,弄清原理啥的看这个)
1、 https://github.com/suanmei/callapp-lib(框架,写得非常非常非常的详细,感谢这位大佬)
2、https://suanmei.github.io/2018/08/23/h5_call_app/ (H5唤起APP指南,感谢这位大佬)

npm install --save callapp-lib
// 如果是h5的 <script src="https://unpkg.com/callapp-lib@2.1.5/dist/index.umd.min.js"></script>
//appDown 自定义的一个调用这个下载唤起的方法
// 下面这些步骤在 https://github.com/suanmei/callapp-lib 这个框架里面写得很清楚详细,膜拜一下大佬、
// 如何判断是我们这边出错还是苹果安卓出错,直接用 支付宝的scheme alipays:// 测试,支付宝能唤起那就是苹果和安卓那边给的scheme有问题

appDown(){
          const CallApp = require('callapp-lib');
          const option = {
            scheme: {
              protocol: 'alipays://',   // 苹果的scheme
            },
            intent: {
              package: 'com.sanmiao.cssj', // 包名,安卓提供
              scheme: 'alipays://',    // 安卓的scheme
            },
  
            //ios
            appstore: '苹果下载的地址,叫苹果提供',
            //安卓
            yingyongbao: '安卓下载的地址,叫安卓提供',
            fallback: '',  //唤起失败,我是准备跳到安卓下载包
            timeout: 2000,
          };
          const lib = new CallApp(option);
          // 执行唤起app
          lib.open({
            path: '',
          });

        }

2 如何判断 系统 是苹果还是安卓

 			var u = navigator.userAgent;
	          this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // true
	          this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // true

3 如何判断是 微信浏览器 还是其他浏览器

// 判断 is_weixn()返回的是true还是false
 is_weixn(){
          var ua = navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
          } else {
            return false;
          }
        },

然后说一下我遇到的坑吧:
1 scheme 安卓还是苹果那边给错了,第一次接触这个不知道怎么测试,看文档也是不太明白,测试的scheme参考这个网址里面的,提供了多个scheme
https://suanmei.github.io/2018/08/23/h5_call_app/ (H5唤起APP指南)
如果能唤起 ,就是sheme有错(再次感谢罗大佬!)

2 就是微信浏览器禁止唤起不是和它有合作关系的 app所以只能跳到应用商店(再次感谢罗大佬!)

3 就是关于你在测试环境用的app 和正式环境用的app ,注意scheme 安卓和苹果是否已上传到你需要的环境中! 这个当时也是自己蠢啊,弄了好久,才发现scheme根本没有上传到我需要的环境中!

4 然后就是苹果微信打开 选择浏览器 ==》 会有safari 浏览器什么网址无效啥的,你把当前的浏览器地址复制到另外一个浏览器就不会出现这个问题,感觉可能是和 http 和 https 有关,不过具体没有验证(大佬们请解答,感谢)

热门文章

暂无图片
编程学习 ·

java后端重点

java基础,设计模式,jvm原理,spring+springmvc原理及源码,linux,mysql事务隔离与锁机制,mongodb,http/tcp,多线程,分布式架构(dubbo,dubbox,spring cloud),弹性计算架构,微服务架构(springboot+zookeeper+docker+jenkins),java性能优化,以及相关的项目管理等…
暂无图片
编程学习 ·

C++对象析构之后再访问

在对象被析构之后,仍然可以通过该对象的指针访问相应的静态方法以及没有被static关键字修饰,但是没有访问非静态成员变量的方法)。如果访问了静态成员变量,则会根据不同的编译器得到不同的结果,可能是预期之外的值,可能是直接段错误。如果方法A调用了方法B,并且方法A和B…
暂无图片
编程学习 ·

内网穿透工具 frp

内网穿透工具 frp 荐国网络工具包授权协议: GPL开发语言: Google Go操作系统: 跨平台收录时间: 2016-08-01提 交 者: FateDier收藏1145评论62分享软件介绍资讯 (8)问答 (2)博客 (99+)我要提问frp 是一个高性能的反向代理应用,可以帮助您轻松地进行内网穿透,对外网提供服务,支…
暂无图片
编程学习 ·

js动态生成多行多列复选框

本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下:一、后台 查询数据库,返回List集合形式给页面 二、HTML 设置一个div,里面动态加载人员姓名 <div id=&q…
暂无图片
编程学习 ·

jar包用ftp协议去获取图片无法成功(IDEA可以成功)

jar包用ftp协议去获取图片无法成功(IDEA可以成功)同样的代码 在同一个服务器上运行,用idea去获取图片 可以成功,但是打成jar包去远程获取图片无法成功,拉回来的图片是0kb 同样的代码 在同一个服务器上运行,用idea去获取图片 可以成功,但是打成jar包去远程获取图片无法成…
暂无图片
编程学习 ·

SwiftUI 2020年WWDC演示示例

整体效果代码实现 文件目录SandwichesApp.swift import SwiftUI@main struct SandwichesApp: App {// 定义一个私有的状态对象 store@StateObject private var store = SandwichStore()var body: some Scene {WindowGroup {// 将store传递给列表页ContentView(store: store)}} …
暂无图片
编程学习 ·

vulnhub靶机-djinn3

1、靶机ip:192.168.0.110(开机就提示:不是所有的都需要扫描发现主机)2、扫描靶机端口root@kali:~# nmap -A -p- 192.168.0.110 Starting Nmap 7.80 ( https://nmap.org ) Nmap scan report for 192.168.0.110 Host is up (0.0011s latency). Not shown: 65531 closed ports…
暂无图片
编程学习 ·

ssm 网上商店实训 部分内容

一、 基础的配置文件applicationContext.xml<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context=…
暂无图片
编程学习 ·

第四天:Spark Streaming

Spark Streaming概述 1. Spark Streaming是什么 Spark Streaming用于流式数据的处理。Spark Streaming支持的数据输入源很多,例如:Kafka、Flume、Twitter、ZeroMQ和简单的TCP套接字等等。数据输入后可以用Spark的高度抽象原语如:map、reduce、join、window等进行运算。而结果…
暂无图片
编程学习 ·

Spring中MultipartHttpServletRequest实现文件上传

实现图片上传 用户必须能够上传图片,因此需要文件上传的功能。比较常见的文件上传组件有Commons FileUpload(http://jakarta.apache.org/commons/fileupload/a>)和COS FileUpload(http://www.servlets.com/cos),Spring已经完全集成了这两种组件,这里我们选择Commons …
暂无图片
编程学习 ·

开始入门进入第一手操作

我这是mac安装 一开始安装vmware虚拟机下载网址 https://my.vmware.com/cn/web/vmware/downloads/details?downloadGroup=FUS-1155&productId=798&rPId=46545我这个是11.5.5版本 你可以选择其他版本 安装成功就开始安装镜像文件 我用的是ubuntu16.04 https://www.ubun…
暂无图片
编程学习 ·

Vue学习笔记——选项卡案例(tab栏切换)

Vue学习笔记——选项卡案例(tab栏切换) 内容截图:常犯问题:看到这个内容的时候,总是思考怎么将3个div叠起来。 其实不需要,隐藏了div不占位置的。每次只显示一个div且显示时占的位置是一样的 如果你都没有给它们添加显示的类,那么你只能看到选项,看不到图的盒子框架:u…
暂无图片
编程学习 ·

微信小程序中常见的几种授权

微信小程序中常见的几种授权:代码下载地址:https://download.csdn.net/download/weixin_39152200/12569931 压缩包中包含两个文件:authorize.js和md5.js 使用方法: 将这两个文件放到utils目录中,在需要使用的页面js文件中引入 let authorize = require(../../utils/autho…
暂无图片
编程学习 ·

JS奇淫巧技

0. 向下取整最快方式 向下取整有很多方法, Math.floor, parseInt都可以, 不过两个非(~)运算符来取整是最方便的, 而且逻辑运算很快.还可以用~~再加1来向上取整.~~3.14 > 3 ~~Math.PI > 3 ~~Math.E > 2 ~~12.98 > 12var b= 2.33 | 0 ---b=2var c= 2.33 >> …
暂无图片
编程学习 ·

惟愿此生,岁月静好

惟愿此生,岁月静好 陌上拈一缕岁月的风,沐一场时光的雨,让心在平淡中盈满温润,回眸,有明天可以奔赴,有过往可回头,有温暖可相依,这样的日子,是我想要的岁月静好。 清晨迎着阳光,走在熙熙攘攘的人群中,感谢这美好的一天,给我的这份踏实安稳,夜晚走在夕阳里,心里装…
暂无图片
编程学习 ·

ubuntu14.04的网络设置(NAT模式)

** ubuntu14.04的网络设置(NAT模式) ** 1.首先将虚拟机设置中的网络适配器调整为NAT模式。2.通过 :cd/etc/network命令进入对应目录,然后通过vi/vim修改该目录下的interfaces文件内容。3.通过下列命令来重启网卡 ifconfig eth0 down ifconfig eth0 up 4.通过 ping www.sou…
暂无图片
编程学习 ·

rabbitMQ回顾

消息队列(Message Queue MQ)概述:是分布式应用程序之间的通讯方法,使用消息队列可以实现异步处理、程序解耦、流量销峰等目的,目前市面上成熟主流的MQ有Kafka(人民币玩家) 、RocketMQ(高端玩家)、RabbitMQ(普通玩家)、Apache Qpid。AcitveMQ(老古董) AMQP 和 JMS【面试】 2…
暂无图片
编程学习 ·

今年最值得期待的JavaScript传奇绿皮书登场!

“能用 JavaScript 实现的东西, 迟早会用 JavaScript 实现”这句“狂妄”的话,如今正在实现着 …… 今天,博文菌带来一本JavaScript领域的经典之作, 介绍之前,我不得不感叹: 这本书的份量,实在是太重了! 它的厚重不仅体现在,当你首次读完时, 能明显感觉到自己对JS的理…
暂无图片
编程学习 ·

Strut2参数的封装

一、struts2的请求参数封装,有三种方式。 分别是:属性驱动:有实体类没有实体类模型驱动 二、模型驱动的使用要求: 1、动作类必须实现ModelDriven接口,该接口有一个泛型,提供的实体类对象 2、在动作类中提供模型对象的定义,并且必须实例化。 3、提供接口中抽象方法的实现…