微信通过页面(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 相关文章推荐
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
canvas 中如何实现物体的框选
Aug 05 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
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
微信小程序日期选择器实例代码
2018/07/18 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
使用python生成目录树
2018/03/29 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python实现FTP循环上传文件
2020/03/20 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
文科教师毕业的自我评价
2014/01/16 职场文书
学校募捐倡议书
2014/05/14 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
小学元宵节活动总结
2015/02/06 职场文书
材料员岗位职责
2015/02/10 职场文书
在校学生证明格式
2015/06/24 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技