微信通过页面(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 相关文章推荐
AngularJS 表达式详解及实例代码
Sep 14 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
vue组件与复用详解
Apr 08 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
基于php split()函数的用法详解
2013/06/05 PHP
php合并js请求的例子
2013/11/01 PHP
php加密解密字符串示例
2016/10/13 PHP
简单实现限制uploadify上传个数
2015/11/16 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
js判断节假日实例代码
2017/12/27 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
js实现抽奖功能
2020/11/24 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python实现ping命令小程序
2020/12/28 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
工程师自我评价怎么写
2013/09/19 职场文书
生日宴会主持词
2014/03/20 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书