h5拉起app

h5拉起app

以下分四种情况:微信内,qq内,默认浏览器安卓,默认浏览器ios

1.微信

  使用微信内部开放标签wx-open-launch-app
  场景:微信内打开url,内有按钮,点击拉起app
  局限:入口必须是扫二维码进入的网址或者卡片式分享打开的网址
  官方网址:
    https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.htm
  前提:有公众号,有开放平台账号,进行过关联,公众平台配置过js接口安全域名
  具体使用:

<wx-open-launch-app
  id="launch-btn"  
  appid="your-appid"  
  extinfo="your-extinfo">  
  <script type="text/wxtag-template">    
  <style>.btn { padding: 12px }</style>   
   <button class="btn">App内查看</button>  
  </script>
</wx-open-launch-app>
<script language="javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>  
var btn = document.getElementById('launch-btn'); 
 btn.addEventListener('launch', function (e) {    
	 console.log('success');  
 });  
 btn.addEventListener('error', function (e) {    
 	console.log('fail', e.detail);  
 });</script>
//extinfo是传递给app的参数,字符串格式,具体怎么定义按业务来
//appid是微信开放平台-管理中心-公众号-查看-关联设置-appid,不是公众号的
//注意,网页操作不要忘记wx.config,在wx.ready(()=>{给extinfo赋值})

2.qq(我是实际项目用的不是这个api,在官网找不到了,是之前人写的,下面这个没用过)

  官网链接:https://open.mobile.qq.com/api/common/index#api:isAppInstalled
  引入sdk

<script src="https://open.mobile.qq.com/sdk/qqapi.js"></script>

  检查是否安装:isAppInstalled

//检测手机QQ是否安装
var value = "mqq"; //ios 
var value = "com.tencent.mobileqq"; //android 
mqq.invoke('app', 'isAppInstalled', { "name" : value }, function(result){ 
    alert("mobileqq is install: " + result); 
});

  打开app:launchApp

mqq.invoke('app', 'launchApp', { 
    name: "mqq"// IOS 
}); 
mqq.invoke('app', 'launchApp', { 
    name: "com.tencent.mobileqq"// android 
});

3.url scheme

  安卓:
  场景:安卓手机自带浏览器打开链接唤起app
  缺点:捕获不到未安装,只能定时未打开就跳转下载页
  客户端提供 scheme,host,port,path ,具体拼接方式为scheme://host:port/path;一般只有scheme+host就行,具体看客户端怎么配置,具体链接直接问客户端要就行了
  具体使用:

a标签  
<a class="a" href="baiduscheme://com.baidu.www" id="android_a">打开app</a>
或者location.href
location.href=baiduscheme://com.baidu.www
或者window.open(不建议使用,手机浏览器几乎默认关闭主动打开弹窗,需要交互)
或者使用iframe
  var ifr = document.createElement('iframe');
  ifr.style.display = "none"
  ifr.setAttribute('id', 'ifr')
  ifr.setAttribute('src', "baiduscheme://com.baidu.www")
  document.querySelector('body').appendChild(ifr);
使用这样打开后返回源地址未改变,体验好一点,另外单独设置定时跳转下载页

  ios:没做过

4.Universal Links

  场景:ios手机自带浏览器打开链接唤起app
  特点:链接是标准的http或者https开头的链接
  客户端配置完后会把一个命名为apple-app-site-association的文件放置到服务器根目录,要到这个文件自己看里面paths怎么写的,拼接路劲,直接问要可能有的客户端不懂
  具提示使用:location.href跳转,可直接拼接下载页的地址,打开就打开,打不开就是没有安装,跳转到下载页

apple-app-site-association大概内容是这样  
放到baidu.com根目录下时拉起拉起链接为http://baidu.com/jump/,
可以把http://baidu.com/jump/download.html设置为下载页
直接用http://baidu.com/jump/download.html跳转
{
    "applinks": {
        "apps": [],
        "details": [
        {
            "appID": "aaaaaaa.com.baidu.wwww",
            "paths": ["/jump/*"]
        },
        
        ]
    }
}
### 如何通过 H5 页面拉起 HarmonyOS 原生应用 要实现从 H5 页面拉起 HarmonyOS 原生应用的功能,通常需要借助特定的 API 或者协议来完成这一操作。以下是具体的技术细节: #### 使用自定义 URL Scheme HarmonyOS 支持通过自定义 URL Scheme 来启动原生应用程序[^1]。开发者可以在 H5 页面中嵌入一个超链接或者 JavaScript 调用来触发该功能。 ```html <a href="myharmonyapp://open">打开 HarmonyOS 应用</a> ``` 如果需要动态调用,则可以使用以下方式: ```javascript window.location.href = "myharmonyapp://open"; ``` 需要注意的是,在开发过程中必须确保目标设备上安装了支持此 URL Scheme 的 HarmonyOS 应用程序[^2]。 #### 利用 JSBridge 进行交互 对于更复杂的场景,可以通过构建一个桥梁机制 (JSBridge),让 Web 和 Native 层之间能够互相通信。这种方式允许传递参数以及接收回调数据。 下面是一个简单的例子展示如何创建并初始化这样一个桥接接口: ```javascript function callNativeFunction() { if (typeof jsbridge !== 'undefined') { try { jsbridge.invoke('launchApp', {}, function(response){ console.log("Response:", response); }); } catch(e) {} } } ``` 其中 `jsbridge` 是由宿主环境注入到全局作用域中的对象实例;而方法名 `"launchApp"` 及其对应的参数结构则需依据实际项目需求设计好双方约定好的契约标准[^3]。 #### 注意事项 - **兼容性测试**:由于不同版本的操作系统可能存在差异,因此建议进行全面充分地跨平台验证工作。 - **安全性考量**:当暴露外部可访问端口给网页时,请务必小心处理输入验证逻辑以防恶意攻击行为发生比如 SQL 注入等问题。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值