微信通过页面(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实现简单的二维矩阵乘积运算
Jan 26 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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/02/16 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
微信小程序 标签传入数据
2017/05/08 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python发送伪造的arp请求
2014/01/09 Python
Python中endswith()函数的基本使用
2015/04/07 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python实现求最长回文子串长度
2018/01/22 Python
python实现泊松图像融合
2018/07/26 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python 日期排序的实例代码
2019/07/11 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python数据化运营的重要意义
2019/11/25 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
编程输出如下图形
2013/11/24 面试题
先进德育工作者事迹材料
2014/01/24 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
大连导游词
2015/02/12 职场文书
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技