微信通过页面(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 相关文章推荐
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 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 Undefined index的问题
2009/06/01 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
用JAVASCRIPT如何给<textarea></textarea>赋值
2007/04/20 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
Vue渲染函数详解
2017/09/15 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
pyqt5自定义信号实例解析
2018/01/31 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
历史专业个人求职信范文
2013/12/07 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
银行授权委托书样本
2014/10/13 职场文书
邀请函范文
2015/02/02 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server