移动端微信QQ分享一个h5激活app

场景描述：最近有一个需求是移动端的开发微信QQ分享给朋友一个链接，打开这个链接如果手机里有安装app，直接激活，如果没有跳转到下载的地址。

第一步：我们要用公司账号去申请微信QQ的分享服务。

第二部：移动端的同事开发完成，服务端就可以在分享页面那个接口里返回移动端需要的参数，注意分享的地址要使用域名，否则微信分享后会有个访问提示，不是直接打开原网页

 /*** 查看主题详情* @author qyq*/public void getThemeInfo() {Integer status = null;String result = null;try {Record shareParam = new Record();shareParam.set("title", theme.getStr("name"));shareParam.set("content", theme.getStr("title")+"这个主题已经引发热烈讨论，快来看看吧。");shareParam.set("imgurl", "/gyeducation/images/mobile/mobileIcon.png");shareParam.set("address", "http://www.51sprint.com/gyeducation/mobileApi/circle/themeShare?id="+theme.getInt("id")+"&type=getThemeInfo&schemeUrl="+base64Encoder("ydjy://mobile.app"));setAttr("shareParam", shareParam);status = 0;result = "查询成功";} catch (Exception e) {e.printStackTrace();status = 1;result = "查询失败";}setAttr("status", status);setAttr("result", result);returnJson();}

第三步：移动端得到分享的参数，分享的链接地址就是参数里的address，请求服务端

/*** 主题分享* @author qyq*/@Clear({ ApiAuthInterceptor.class })public void themeShare() {int themeId = getParaToInt("id");String schemeUrl = base64Decode(getPara("schemeUrl"));String type = getPara("type");setAttr("themeId", themeId);setAttr("scheme", schemeUrl+"?type="+type+"&id="+themeId);setAttr("type", type);renderFreeMarker("/WEB-INF/templates/mobile/circle/themeShare.html");}

第四部：请求完成跳转到h5页面，由于在微信QQ浏览器把第三方的链接给屏蔽了，所以我们做了一个遮罩层提示用户用手机自带浏览器打开网页，然后请求一个app的打开地址，也就是前面我们传给移动端的address里的schemeUrl，这里我们还给它带上了两个参数，可以跳回到你需要分享的app页面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>分享主题</title><style>#cover{display:none;position:absolute;left:0;top:0;z-index:18888;background-color:#000000;opacity:0.7;width:100%;height:100%;}#guide{display:none;position:absolute;right:18px;top:5px;z-index:19999;}#guide img{width:260px;height:180px;}</style>
</head>
<body><div class="content"><div class="title"><h2>${name!''}</h2><p><span class="times">${create_time!''}</span><span class="edit">${title!''}</span></p></div><div class="main"><p class="author"><img src="${resource}${imgicon!''}" alt=""><span>${userName!''}</span></p><div class="main_content">${content!''}<div style="display: flex; flex-wrap: wrap;justify-content: space-between;"><#list img_urls as img><img src="${resource}${img!''}" alt=""></#list></div><p class="Num"><span>点赞数：${like_num}</span><span>评论数：${review_num}</span><span>收藏数：${collect_num}</span></p></div><div class="comment"><p>全部评论：</p><ul><#list records as record><li><div><img src="${resource}${record.icon!''}" alt=""><p><span class="names">${record.userName!''}</span><span class="pl_time">${record.create_time!''}</span></p><span class="floor">${record_index+1}楼</span></div><p>${record.content!''} <i style="background:url(${resource}assets/images/mobile/like.png) no-repeat;background-size:contain;">${record.like_num!''}</i></p></li></#list></ul></div><div class="down_load"><div class="load"><img src="${resource}assets/images/mobile/mobileIcon.png" alt=""><p><span>移动教研</span><span>无纸化办公</span></p></div><div class="down"><a href="${resource}gyeducation/mobileApi/activity/mobileDownload">下载APP</a></div></div></div></div><div id="cover"></div><div id="guide"><img src="${resource}assets/images/mobile/guide.png"></div>
</body>
</html>
<script>
window.onload=function(){var _system={$:function(id){return document.getElementById(id);},_client:function(){return {w:document.documentElement.scrollWidth,h:document.documentElement.scrollHeight,bw:document.documentElement.clientWidth,bh:document.documentElement.clientHeight};},_scroll:function(){return {x:document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft,y:document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop};},_cover:function(show){if(show){this.$("cover").style.display="block";this.$("cover").style.width=(this._client().bw>this._client().w?this._client().bw:this._client().w)+"px";this.$("cover").style.height=(this._client().bh>this._client().h?this._client().bh:this._client().h)+"px";}else{this.$("cover").style.display="none";}},_guide:function(click){this._cover(true);this.$("guide").style.display="block";this.$("guide").style.top=(_system._scroll().y+5)+"px";window.onresize=function(){_system._cover(true);_system.$("guide").style.top=(_system._scroll().y+5)+"px";};if(click){_system.$("cover").onclick=function(){_system._cover();_system.$("guide").style.display="none";_system.$("cover").onclick=null;window.onresize=null;};}},_zero:function(n){return n<0?0:n;}}_system._guide(true);//页面加载调用遮罩层来提示用户使用自带浏览器打开网页var u = navigator.userAgent;//判断手机类型if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓机var last = Date.now(),doc = window.document,ifr = doc.createElement('iframe');//创建一个隐藏的iframeifr.src = '${scheme!''}';ifr.style.cssText = 'display:none;border:0;width:0;height:0;';doc.body.appendChild(ifr);setTimeout(function() {doc.body.removeChild(ifr);//setTimeout回小于2000一般为唤起失败 if (Date.now() - last < 2000) {if (typeof onFail == 'function') {onFail();} else {//弹窗提示或下载处理等}} else {if (typeof onSuccess == 'function') {onSuccess();}}}, 1000);} else if (u.indexOf('iPhone') > -1) { //苹果手机window.location.href = '${scheme!''}';}
}
</script>

下面展示下效果图，提示用户用自带浏览器打开网页，这个遮罩层可以随意点击某个区域取消，如果手机里没有app可以点击右下角下载，如果有那么直接打开app跳转到指定页面。这里我们根据网上总结的经验，安卓采用iframe来请求打开app的地址，ios采用直接跳转打开app的地址。

移动端微信QQ分享一个h5激活app相关推荐

PC端微信加群的测试用例和app端微信加群的测试用例
PC端微信加群的测试用例和app端微信加群的测试用例 1.确认微信群是否存在 2.确认加微信微信群的方式 3.通过群主邀请拉群,验证拉人进群的用户是否互为好友,非好友无法邀请入群 4.通过二维码进群. ...
解决苹果ios端微信无法自动播放H5页面背景音乐
最近做微信H5页面开发的时候,在页面加入背景音乐,并且设置自动播放. 在PC端模拟手机时是可以正常显示播放的,在安卓端微信上也可以正常播放,然后到苹果端微信就不能正常播放了. 找了许久的原因是苹果io ...
最近做手机端，GPS，微信QQ分享总结的问题
Android端百度地图: 1.libs包中armeabi下liblocSDK4d.so文件丢失,导致百度定位失效. 微信分享: 1.分享App,app的内容(图片加描述)不能超过32kb ,不然无 ...
Android 实现微信QQ分享以及第三方登录
集成准备在微信开放平台创建移动应用,输入应用的信息,包括移动应用名称,移动应用简介,移动应用图片信息,点击下一步,选择Android 应用,填写信息提交审核. 获取Appkey 集成[友盟+]SDK ...
php微信_分享一个完整的微信开发php代码
这篇文章主要为大家分享一个完整的微信开发php代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信开发php代码,供大家参考,具体内容如下 //封装成一个微信接口类 cla ...
js生成二维码,web页面,移动h5页添加微信qq分享功能
js文件 qrcode.js 代码 /*from tccdn minify at 2014-6-4 14:59:43,file:/cn/c/c/qrcode.js*/ /*** @fileovervi ...
微信或QQ分享跳转到APP指定页面
分享链接通过浏览器跳转到APP页面 iOS分享通过safari浏览器实现都是按照URL Scheme,但是在QQ或者微信就无法实现,原因是QQ.微信将这种唤醒app的方式给禁止掉了, 因此这种方式就不 ...
PC端微信QQ第三方登录
微信第三方登录实现原理准备工作参考微信开放平台:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wec ...
h5在微信自定义分享php,h5页面自定义微信分享
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 开发准备:公众号绑定好需要开发的服务器域名. ...
android微信qq分享,android 一键分享 QQ 微信
网上有很多介绍说有第三方集成工具,如sharesdk,这个操作太麻烦了. 如下介绍的是调用系统自带的,我这里是XML文件,对应的文件类型参见:// http://blog.csdn.net/wangy ...

移动端微信QQ分享一个h5激活app

移动端微信QQ分享一个h5激活app相关推荐

最新文章

热门文章