移动端微信QQ分享一个h5**app
程序员文章站
2024-01-22 23:17:28
...
场景描述：最近有一个需求是移动端的开发微信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');
//创建一个隐藏的iframe
ifr.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的地址。
上一篇： Oracle之索引和索引碎片问题解决
下一篇： 好用的谷歌浏览器插件