移动端微信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');
		//创建一个隐藏的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的地址。

Guess you like

Origin blog.csdn.net/peter_qyq/article/details/81035597