微信通过页面(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 面向对象的5钟写法
Jul 31 Javascript
Javascript中的var_dump函数实现代码
Sep 07 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
php获取汉字首字母的函数
2013/11/07 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
python 利用zmail库发送邮件
2020/09/11 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
幼儿园感恩节活动方案2014
2014/10/11 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书