微信通过页面(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 相关文章推荐
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
alert和confirm功能介绍
May 21 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
JavaScript函数基础详解
Feb 03 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
layui使用label标签的方法
Sep 14 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 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
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
python如何去除字符串中不想要的字符
2020/07/05 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
优秀的自荐信要注意哪些
2014/01/03 职场文书
关于人生的感言
2014/01/17 职场文书
单位实习证明怎么写
2014/01/17 职场文书
党校培训自我鉴定
2014/02/01 职场文书
英语老师推荐信
2014/02/26 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
公司担保书格式范文
2014/05/12 职场文书
授权委托书格式
2014/07/31 职场文书
委托书格式
2014/08/01 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
旷工辞退通知书
2015/04/17 职场文书
卖车协议书范文
2016/03/23 职场文书