微信通过页面(H5)直接打开本地app的解决方法


Posted in Javascript onSeptember 09, 2017

简述

微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的。

安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你判断本地是否已经安装了app,如果本地安装就直接打开,没有安装的话就是腾讯微下载的页面进行app下载,当然微下载的页面腾讯提供了几个模板,可以自己选择和修改。

IOS实现:ios像直接点击链接打开本地app就难了,有两种方式可供我们选择:

1.腾讯深度合作的公司,微信可以帮你打开app;

2.使用IOS9+的新功能“Universal Links”(通用链接);

很显然,第二种方式更适合我们普通的公司。

效果展示

微信通过页面(H5)直接打开本地app的解决方法

实现步骤

1.配置https(必须是https)网站支持;

创建“apple-app-site-association”文件,注意不带后缀,放到网站根目录,确保可以使用:https://xxx.xxx.xxx/apple-app-site-association直接可以访问,apple-app-site-association文件内容如下:

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "*****.com.gangguwang.yewugo",
        "paths": [ "/app/*" ]
      }
    ]
  }
}

其中appId是你的Prefix + ID,如图:

微信通过页面(H5)直接打开本地app的解决方法

paths为你链接拦截的地址,比如我上面填写的是“/app/*”,就是当我访问https://xxx.xxxx.xxx/app/x的时候,会打开本地app,其他连接时候则为正常显示,这个地址可以配置成多个,也可以直接写*;

2.配置苹果证书,开启“Associated Domains”,如下图:

Identifiers - App IDs ?Edit 然后开启打钩 Associated Domains 后保存,配置地址:https://developer.apple.com/account/ios/identifier/bundle

微信通过页面(H5)直接打开本地app的解决方法

3.配置你的App的Universal Links(通用链接)

如果你是普通的ios项目的的话,配置如下:项目 targets->Capabilities->Associated Domains,如图填写你的链接域名

微信通过页面(H5)直接打开本地app的解决方法

域名的格式必须为:applinks:你的域名(ex:applinks:www.domain.com),可以配置多个;

如果你是Xamarin项目的话,需要选择Entitlements.plist配置关联域,如图:

微信通过页面(H5)直接打开本地app的解决方法

这样配置完之后,打包即可测试你的应用咯。

官方配置文件:https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html

注意事项

1.配置的网站必须是https,不能为http;

2.[重要]展示地址和打开的地址不能在一个域名下(作者测试发现放在同一服务器下都不行),比如展示页的地址是https://a.domain.com/?id=10,打开的如果是https://a.domain.com/app/?id=10,系统默认是打开页面,而不是触发通用链接打开app;

3.[重要]配置玩证书之后需要更新证书,才能内部打包和提测上传成功;

4.通用链接可被屏蔽,点击右上角配置的链接之后,通用链接就失效了,解决方案下次讨论。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js获取事件对象代码
Aug 05 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 #Javascript
js实现音乐播放控制条
Sep 09 #Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 #Javascript
详解vue2 $watch要注意的问题
Sep 08 #Javascript
Express + Session 实现登录验证功能
Sep 08 #Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 #Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
You might like
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
浅谈php处理后端&接口访问超时的解决方法
2016/10/29 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
JS实现图片切换效果
2018/11/17 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
Python FTP操作类代码分享
2014/05/13 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python3.5绘制随机漫步图
2018/08/27 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
Java程序开发中如何应用线程
2016/03/03 面试题
优秀共青团员事迹材料
2014/12/25 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
MySQL常见优化方案汇总
2022/01/18 MySQL
vue项目支付功能代码详解
2022/02/18 Vue.js