微信分享和微信H5跳转到APP开放标签wx-open-launch-app使用及样式设置
H5、微信、App唤端相关
- 一、微信分享
- 二、浏览器H5跳转到APP
- 三、微信H5跳转到APP
- 一、条件说明
- 二、文档
- 三、重要的设置
- 四、注意点
- 五、样式设置
一、微信分享
参看:微信分享:后端参数获取PHP实现
二、浏览器H5跳转到APP
user-agent.js
/**
* 判断设备类型
*/function isClient(clientName) {return (window.navigator.userAgent.toLowerCase().indexOf(clientName.toLowerCase()) > -1);
}function isiPhone() {return isClient("iPhone");
}function isAndroid() {return isClient("Android");
}function isWeixin() {return isClient("MicroMessenger");
}
// 安卓和ios的跳转路径和下载地址
const configs = {Android: {scheme: "AndroidScheme://path",download: "https://www.demo.com/app-release.apk",},iPhone: {scheme: "iOSScheme://path",download: "https://itunes.apple.com/cn/app/app-id",},
}// 通过环境判断获取配置window.location.href = config.schemelet downloader = window.setTimeout(() => {// 2s超时后跳转到app下载window.location.href = config.download;
}, 2500);document.addEventListener("visibilitychange webkitvisibilitychange",function () {// 如果页面隐藏,推测打开scheme成功,清除下载任务if (document.hidden || document.webkitHidden) {clearTimeout(downloader);}}
);window.addEventListener("pagehide", function () {clearTimeout(downloader);
});
三、微信H5跳转到APP
接口代码配置并不复杂,最麻烦的是准备账号
一、条件说明
微信内访问网页时跳转到 APP条件:
- 服务号已认证
- 开放平台账号已认证
- 服务号与开放平台账号同主体
翻译一下就是:
- 微信公众平台 注册一个【服务号】并微信认证(¥300)
- 微信开放平台注册一个账号,并完成开发者资质认证(¥300)
- 最关键的是需要【服务号】和【开放平台账号】认证主体一致!不然前面的钱就打水漂了
二、文档
官方文档很详细,这里不做赘述
- 微信内网页跳转APP功能
- 微信开放标签说明文档
- App获取开放标签中的extinfo数据
三、重要的设置
1、微信公众平台设置IP白名单
该IP地址获取access_token
开发->基本配置->公众号开发信息->IP白名单
2、微信公众平台绑定安全域名
设置->公众号设置->功能设置->JS接口安全域名
3、微信开放平台绑定所需要跳转的App
这里也需要设置安全域名
管理中心 -> 公众帐号 -> 接口信息 -> 网页跳转移动应用 -> 关联设置中绑定所需要跳转的App
四、注意点
1、Android和iOS需要做好设置,才能拉起成功
2、几个重要参数的获取
- 开发者ID(AppID) 来自 微信公众平台
- 开发者密码(AppSecret) 来自 微信公众平台
- 移动应用Appid 来自微信开放平台
配置示例:
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印appId: '<开发者ID(AppID)>', // 必填,公众号的唯一标识timestamp: '', // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填,需要使用的JS接口列表openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
<wx-open-launch-appid="launch-btn"appid="<移动应用Appid>"extinfo="your-extinfo"
><template><style>.btn { padding: 12px }</style><button class="btn">App内查看</button></template>
</wx-open-launch-app>
五、样式设置
首先明确几点:
- wx-open-launch-app标签外部样式和内部样式是隔离的
- wx-open-launch-app这个标签可以加样式style
所以,如果在页面中使用这个拉起标签,这个地方的样式和周围的不一样。
设置样式:
- 外层span标签设置相对定位;
- wx-open-launch-app设置绝对定位,里边放一个空的元素,并设置高度和宽度,遮罩住底层标签;
打开APP
处的span标签就可以使用外层样式了
<span style="position:relative;"><span>打开APP</span><wx-open-launch-appid="launch-btn"appid="APPID"extinfo='{"name": "Tom", "age": 18}'style="position:absolute;top:0;left:0;right:0;bottom:0;"><template><style>.wx-btn{width:100%%;height:20px;}</style><div class="wx-btn"></div></template>
</wx-open-launch-app></span>
参考
微信开放标签 wx-open-launch-app 样式设置技巧
微信分享和微信H5跳转到APP开放标签wx-open-launch-app使用及样式设置相关推荐
- Android平台好友点击微信分享的内容后跳转来源App的实现方案研究
很多时候我们的应用在使用微信分享内容之后,希望其他用户点击该分享内容能够跳转到我们的App,以实现闭环,这样的分享才是最有价值的.这种需求涉及到不同应用之间的交互,虽然微信提供了分享SDK,但仍然有不 ...
- android 同时实现微信分享和微信登录功能
Android应用实现微信登录与分享 1. 闲话(可直接无视 项目慢慢的推进,逐渐的做到了微信第三方登录的功能模块了.其实我想说Orz,我等这一天等了好久了,想做个微信验证登录都等了两个多星期咧(其实 ...
- 微信分享给好友实现跳转
最近,我刚开发完微信支付功能模块,我寻思着写关于微信支付相关的文章,一来趁热打铁温习下相关知识,二来是希望 能够帮助到有需要的大伙儿. 下面微信跳转的方式主要介绍了两种:微信分享给好友和微信扫码跳转. ...
- 微信小程序webView H5跳转小程序
1:reLaunch 与 redirectTo 的用途基本相同, 只是 reLaunch 先关闭了内存中所有保留的页面,再跳转到目标页面. wx.miniProgram.reLaunch({url: ...
- 微信公众号网页H5跳转微信小程序
https://www.jianshu.com/p/5bc4589dd034 wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要 ...
- java初始化微信分享_微信开发(一)基于Wx-java的微信分享功能
最近在做微信服务号开发,简单总结一下,便于自己学习积累和分享给大家: 环境介绍: Spring+ Spring MVC +Mybatis 开发语言: JAVA 微信公众平台的开发中,微信只公布了一个基 ...
- Android应用实现微信分享(微信好友,朋友圈),分享链接,图片,文字
科技快讯 9月2日晚间,华为终端宣布,将于10月16日在德国慕尼黑发布华为 Mate 10 新机.从放出的海报来看,证实了华为 Mate 10 将搭载自家的麒麟970处理器,并采用时下流行的全面屏设计 ...
- 微信分享(微信好友、微信朋友圈、新浪微博、QQ好友、QQ空间)
index.html <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset=&q ...
- android sdk引入 微信分享_微信分享sdk接入总结
本文主要讲解android微信分享sdk的接入和中级遇到的一些问题解决. 首先需要在微信开放平台申请账号,新建一个应用,生成AppID. 1 下载微信SDK sample demo源码和生成签名的工具 ...
最新文章
- 【teradata】强制解锁
- 阿里云原生数据库:POLARDB
- VM异常关闭后导致虚拟机无法打开问题解决办法【已解决】
- MyBatis入门让它跑起来
- cnforyou被收购了,没地方买书了
- windows10安装adb/fastboot教程
- 免费而强大的十款PCB设计软件
- Tomcat6 如何彻底卸载,才干净?
- vue点击按钮切换样式
- 服务器c盘临时文件在哪里,excel在c盘哪个文件夹|excel临时文件位置
- 电磁铁轭铁和极头收缩角
- Pt100铂电阻与惠斯通电桥
- 股票实战分析专题-金融量化初级练习使用
- Java数据库篇之mysql VS postgresql
- 文档在线查看功能的实现
- 大数据技术的发展现状以及未来发展趋势
- 合肥通用职业技术学院计算机专业,2020年安徽高考专科提前批及大专录取时间及录取结果查询...
- a6400监听_横评 | 索尼A6400、A6500、松下G9、GH5S、富士X-T30和佳能M50
- 使用toad做一张逻辑回归贷前评分卡
- 尚硅谷大数据视频_Zookeeper视频教程
热门文章
- indesign选中不了图片删除_word图文设计:如何用图片水印功能制作日历画册
- 物理光学基础概念总结
- nginx反向代理是什么?
- Fiddler模拟网络波动_xing2516_新浪博客
- 基础算法:斐波那契函数学习
- 发布文章出现请勿使用默认标题
- mysql中查询一个商品价格最大的商品名称的sql出错记录
- Mininet--topo类型-py创建自定义拓扑网络
- OO2019助教工作总结
- 测试地图长度和高度软件,App Store 上的“海拔测量仪-集指南针和GPS实时高度测距仪二合一”...