微信公众号H5页面跳转至app的某个页面，如果手机内没有app，则进入下载页面
安卓实现方法：
$(function(){
var Id = getParameter("goodsid");
//此操作会调起app并阻止接下来的js执行，进入已安装的app
$('body').append("<iframe src='yjqandroid://?goodsid="+Id+"' style='display:none' target='' ></iframe>");
//没有安装应用会执行下面的语句
setTimeout(function() {window.location='http://a.app.qq.com/o/simple.jsppkgname=com.bjyijiequ.community'},3000);
})
实测情况：进入该H5页面后，如果安装app，会进入app内约定详情页，如果网速过慢，3000毫秒过后，会通过应用宝进入到app的首页。
如果没有安装app，会进入应用宝该app的下载页。
IOS实现方法：
var Id = getParameter("goodsid");
//进入Ios详情页
location.href = "com.sinoceanland.yjq://goodsdetail?goodsid="+Id;
var ua = navigator.userAgent;
//1000毫秒后进不了详情页，就进入应用商店下载页面
setTimeout(function() {
if (ua.indexOf('Safari') > -1) {
location.href = "https://itunes.apple.com/cn/app/yi-jie-qu/id1048321627?mt=8";
}
}, 1000);
实测情况：如果安装app，会跳入app详情页；
如果没有安装，通过浏览器打开，会弹框提示com.sinoceanland.yjq://goodsdetail的地址是错误地址，
点击按钮好之后，会进入app下载页面。
补充：
1.<meta name="apple-itunes-app" content="app-id=1048321627"> 这个标签是告诉iphone的safari浏览器，这个网站对应的app是什么，然后在页面上面显示一个下载banner
2.该h5页面需要在浏览器打开 <div class="content"><p>点击右上角“...”选择在Safari中打开， 选择Safari图标如下：</p></div>,demo如下
提示用户使用浏览器打开页面后跳转到制定页面的demo:
<style>
*{
margin:0;
padding:0;
}
body,html{
width:100%;
height:100%;
font-family:'Microsoft Yahei';
}
.background{
width:100%;
height:100%;
background-color:#000;
opacity:.5;
z-index:1;
}
.tips,.content,.safari{
z-index:2;
position:absolute;
font-size:.43rem;
color:#fff;
}
.tips{
top:0;
right:.5rem;
}
.tips img{
width:2rem;
}
.content{
top:1.95rem;
left:1.77rem;
}
.content p{
display:inline-block;
width:6.45rem;
margin-top:.59rem;
margin-bottom:.48rem;
}
.safari{
top:4rem;
left:4.45rem;
}
.safari img{
width:1.11rem;
}
</style>
<body>
<div class="background"></div>
<div class="tips">
<img src="../assets/images/tip.png">
</div>
<div class="content">
<p>点击右上角“...”选择在浏览器中打开</p>
</div>
<script>
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if (!isWeixin) {
var Id = getParameter("goodsid");
location.href ="./android_qrlbso2.html?k=qrso&goodsid="+Id;
}
</script>
</body>
微信公众号H5页面跳转至app的某个页面，如果手机内没有app，则进入下载页面相关推荐
- 前端实现微信公众号h5页面跳转小程序-成功案例
微信公众号h5页面跳转小程序-成功案例 微信公众号h5页面跳转小程序-成功案例,标题已经明确说明,h5页面可以正常跳转微信小程序 官网说可以,不是我说的 文章目录 微信公众号h5页面跳转小程序-成功案 ...
- 微信公众号h5页面跳转小程序
微信公众号h5页面跳转小程序 文章目录 微信公众号h5页面跳转小程序 前言 一.注意 二.使用步骤 步骤一:绑定域名 步骤二:引入环境 步骤三:初始配置 前言 问:h5 页面可以跳转至微信小程序吗? ...
- 微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用 微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
- 微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因 我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白 白屏了,那么为什么会存在这个问 ...
- 公众号 关注_微信公众号关注图文跳转网页如何操作实现？
对于微信公众号关注图文跳转网页的场景实现,微号帮平台提供了粉丝关注定时推送功能实现,公众平台提供了开发接口编程实现功能效果,都能实现微信公众号关注图文跳转网页,只要网页能正常在个人微信上打开浏览都能设 ...
- 【微信公众号H5授权登录】
微信公众号H5授权登录 废话不多,直接上代码(这里只写代码的实现) 废话不多,直接上代码(这里只写代码的实现) 页面进来判断微信环境 onShow() {//设置初始值为false,微信环境下才能打开 ...
- 微信公众号h5实现高德/百度/腾讯地图导航
最近做了个微信公众号h5需求是这样的 1.点击地图进入地图详情 2.地图详情包括开始导航与地图(高德,百度,腾讯)选择,点击开始导航自动跳转该地图app 首先先理一下功能: 1:第一张图是直接显示坐标 ...
- uniapp 开发微信公众号H5 隐藏右上角扩展按钮
uniapp 开发微信公众号H5 隐藏右上角扩展按钮 1.首先使用npm安装一下微信的jsApi (这个应该都会吧 就跟vue使用npm安装依赖一样) 初始化: npm init -y 安装微信模块: ...
- 微信公众号消息增加跳转链接
微信公众号消息增加跳转链接 背景: 用户在首次关注公众号后会弹出一条欢迎消息.给这条消息增加跳转的链接,使得用户在点击之后可以跳转 到一个你希望用户访问的页面. 解决方案: 根据微信开发者文档,找到了 ...
- 微信公众号h5的分享功能
微信公众号h5的分享功能配置如下: 微信配置 wx.config({debug,appId,timestamp,nonceStr,signature,jsApiList: ['onMenuShareA ...
最新文章
- Mysql 瓶颈优化
- 给Linux系统/网络管理员的nmap的29个实用例子
- Android平台的事件处理机制和手指滑动例子
- SEO优化如何“搭乘”线上营销推广“列车”？
- PKUSC2019游记
- 如何使用live writer客户端来发布CSDN的博客文章？
- Java继承多态经典案例分享
- JAVA反射系列之Field,java.lang.reflect.Field使用获取方法。
- k64 datasheet学习笔记25--Multipurpose Clock Generator (MCG)
- 10、存储过程、while语句
- QT实现低延迟的RTSP、RTMP播放器
- 微信朋友圈评论功能设计实现
- 用金山打字通练习Java常用单词
- 企业成本核算程序是怎样？一般采用什么方法
- 形容等待时间长的句子_形容“等待时间长”的成语有哪些？
- CentOS7设置console口能连接
- ios带嗅探器的浏览器_浏览器嗅探器——WhichBrowser
- android 5.1一键root工具箱,最新的安卓5.1.1 ROOT教程（不需要刷第三方内核）
- 超高分辨率大屏拼接工作站硬件选型
- html调用js自动播放音乐,使用html js实现点击文本和播放音乐的功能