微信通过页面(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获取当前select 元素值的代码
Apr 19 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
详解js的六大数据类型
Dec 27 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
页面点击小红心js实现代码
May 26 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
vue选项卡切换的实现案例
Apr 11 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实现简单数字分页效果
2015/07/26 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python 的内置字符串方法小结
2016/03/15 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Python格式化日期时间操作示例
2018/06/28 Python
python迭代dict的key和value的方法
2018/07/06 Python
实例讲解python中的协程
2018/10/08 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python while循环使用else语句代码实例
2020/02/07 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
情侣吵架检讨书
2014/02/05 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
公司会议策划方案
2014/05/17 职场文书
身边的榜样活动方案
2014/08/20 职场文书
初中同学会活动方案
2014/08/22 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书