文章目录
1 需求描述2 系统分享2.1 Html关键代码2.2 JavaScript脚本关键代码2.3 界面效果3 FaceBook分享3.1 多语言配置3.2 后台关键代码3.3 参数约定3.4 数据落地3.5 测试地址3.6 分享效果4 如何跳转APP内1 需求描述
A用户分享游戏链接给B用户，B用户如果已经下载该游戏则唤醒app,没有则会根据不同的机型跳到不同的商店如安卓进入安卓应用商店，ios进入app store 。因为浏览器和app没有通信协议，所以h5不知道用户的手机释放安装了app，只能是h5去尝试唤起app，若不能唤起，引导用户去下载我们的app。具体需求如下：
系统分享页面加载完后直接跳转到下载链接。UGC相关分享先试图打开游戏跳转到对应的关卡但是用户不一定安装游戏，所以接下来跳转下载链接。统计PV和Click事件。
2 系统分享
系统分享页面加载完后直接跳转相应的下载链接。
2.1 Html关键代码
<!DOCTYPE html><html><head><title>Bricks Ball Crusher</title><meta name='description' content='Bricks Ball Crusher'/><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/><meta name='viewport'content='width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1'/><meta property='og:locale' content='en_US'/><meta property='og:type' content='website'/><meta property='og:image' content='img/edit.png'/><meta property='og:image:type' content='image/jpeg'/><meta property='og:url' content='/'/><meta property='og:site_name' content='Bricks Ball Crusher'/><meta property='fb:app_id' content=''/><meta property='og:title' content="I've created an interesting e and have a try."/><meta property='og:description' content="Try the level I created."/><script src='js/jquery.min.js'></script><link rel='stylesheet' href='css/bootstrap.min.css'><style>* {margin: 0;padding: 0;font-family: '微软雅黑'}body {background: url(img/bg.png);background-size: cover;background-attachment: fixed;}</style></head><body><div class='container'><!--标题 开始 --><div class='row'><img src='img/title.png' class='img-responsive center-block'/></div><!--标题 开始 --><!--主宣传图 开始 --><div class='row' style='margin-top: -110px'><img src='img/main.png' class='img-responsive center-block'/></div><!--主宣传图 开始 --><!--副标题 开始 --><div class='row' style='margin: 30px 30px 10px 10px'><img src='img/subtitle.png' class='img-responsive center-block'></div><!--副标题 开始 --><!--下载按钮 开始 --><table class='table table-no-bordered' style='border:0px;'><tr><td style='border:0px'><img src='img/goole.png' class='img-responsive center-block download '></td><td style='border:0px'><img src='img/appstore.png' class='img-responsive center-block download ' style='padding-left:10px'></td></tr></table><!--下载按钮 结束 --></div></body></html>
2.2 JavaScript脚本关键代码
<script type='text/javascript'>function openApp(which, arg) {//此处以打开淘宝为例jumpApp('taobao://');noApp();}function jumpApp(t) {window.location.href = t;}var timer = null;function noApp() {var t = Date.now(),timer = setTimeout(function() {return Date.now() - t > 2200? (clearTimeout(timer), !1): !document.webkitHidden && !document.hidden && void (location.href = "下载链接");}, 2000);}$('.download').click(function () {//向后台发送请求$.get('http://ip:port/share/click?type=find');noApp();}); noApp();</script>
2.3 界面效果
3 FaceBook分享
Facebook分享需要按照他们的要求填写一些Meta信息具体如下：
<meta property='og:site_name' content='Bricks Ball Crusher' /><meta property='fb:app_id' content='' /><meta property='og:title' content="I've created an interesting e and have a try." /><meta property='og:description' content="Try the level I created." /><meta property='og:url' content='/' /><meta property='og:image' content='' /><meta property='og:image:type' content='image/jpeg' /><meta property='og:locale' content='en_US' /><meta property='og:type' content='website' />
不同场景下：图片不同则需要修改og:image的值；标题不同需要修改og:title的值；描述不同需要修改og:description的值。
3.1 多语言配置
游戏中语言肯定不止一种，玩家分享时需要根据系统语言获取相应的分享内容。
## 英文结果页分享en_invite_title=Come and play bricks in the Bricks Ball Crusher with me！en_invite_description=Come and play bricks in the Bricks Ball Crusher with me！en_invite_img_url=img/invite.png## 英文UGC创造分享en_edit_title=I've created an interesting e and have a try.en_edit_description =Try the level I created.en_edit_img_url=img/edit.png## 英文UGC分享别人关卡en_find_title=Let's try this interesting level together.en_find_description =Click here to join usen_find_img_url=img/find.png## 中文结果页分享zh_cn_invite_title=全民消砖块zh_cn_invite_description=快来和我一起在全民消砖块里一起打砖块吧zh_cn_invite_img_url=img/invite.png## 中文UGC创造分享zh_cn_edit_title=和我一起体验创造关卡的乐趣zh_cn_edit_description =我在全民消砖块创建了一个有趣的关卡，快来试试吧zh_cn_edit_img_url=img/edit.png## 中文UGC分享别人关卡zh_cn_find_title=这是一个有趣的关卡zh_cn_find_description =我在全民消砖块发现了一个有趣的关卡，快来和我一起挑战一下吧zh_cn_find_img_url=img/find.png## 中文繁体结果页分享zh_tw_invite_title=全民消磚塊zh_tw_invite_description=快來和我一起在全民消磚塊裏一起打磚塊吧zh_tw_invite_img_url=img/invite.png## 中文繁体UGC创造分享zh_tw_edit_title=和我一起體驗創造關卡的樂趣zh_tw_edit_description =我在全民消磚塊創建了一個有趣的關卡，快來試試吧zh_tw_edit_img_url=img/invite.png## 中文繁体UGC分享别人关卡zh_tw_find_title=這是一個有趣的關卡zh_tw_find_description =我在全民消磚塊發現了一個有趣的關卡，快來和我一起挑戰一下吧zh_tw_find_img_url=img/find.png## 日文结果页分享jp_invite_title=是非、レンガボール粉砕機で私と一緒にレンガをプレイ！jp_invite_description=是非、レンガボール粉砕機で私と一緒にレンガをプレイ！jp_invite_img_url=img/invite.png## 日文UGC创造分享jp_edit_title=私は面白いを作成しました来てください試してみてください。jp_edit_description =私が作成したレベルをお試しください。jp_edit_img_url=img/edit.png## 日文UGC分享别人关卡jp_find_title=一緒にこの面白いレベルを試してみましょう。jp_find_description=ここをクリックjp_find_img_url=img/find.png## 俄文结果页分享ru_invite_title=Давай поиграем со мной в кирпичную дробилкуru_invite_description=Давай поиграем со мной в кирпичную дробилкуru_invite_img_url=img/invite.png## 俄文UGC创造分享ru_edit_title=Я создал веселье.уровень, давайПопробуй.ru_edit_description =попробуйте создать заставу.ru_edit_img_url=img/edit.png## 俄文UGC分享别人关卡ru_find_title=Давайте попробуем этот интересный пункт.ru_find_description =Нажмите здесь чтобы добавить насru_find_img_url=img/find.png## 韩文结果页分享kr_invite_title=나 랑 같이 벽돌공 파 쇄 기 하 자.kr_invite_description=나 랑 같이 벽돌공 파 쇄 기 하 자.kr_invite_img_url=img/invite.png## 韩文UGC创造分享kr_edit_title=제 가 재 밌 는 걸 만 들 었 어 요.수준.해 봐.kr_edit_description =내 가 세운 관문 을 시험 해 봐.kr_edit_img_url=https:img/edit.png## 韩文UGC分享别人关卡kr_find_title=우리 함께 이 재 미 있 는 관문 을 시험 해 봅 시다.kr_find_description =여기에 가입 하려 면 누 르 십시오kr_find_img_url=img/find.png
3.2 后台关键代码
该功能为根据不同的分享内容，动态的修改og:image、og:title、og:description的值；当type为invite时访问该链接页面加载完后跳转下载地址，否则先试图启动游戏再跳转到下载地址；统计PV和click事件。
import mon.utils.DateUtils;import mon.utils.IPUtils;import mon.utils.StringUtils;import com.pusidun.modules.generator.entity.ShareEntity;import com.pusidun.modules.generator.service.ShareService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.core.env.Environment;import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.UnsupportedEncodingException;import java.util.Date;@RestControllerpublic class ShareController {@Autowiredprivate Environment env; //读取环境变量@Autowiredprivate ShareService shareService;/*** 分享功能* @param type 三种分享类型分别为： invite edit find* @param hl 六种语言分别为：en zh_cn zh_tw jp ru kr* @param id 当type=create或者find时，该参数必传* @param res 响应*/@RequestMapping(value = "/share/{type}", produces={"application/json; charset=UTF-8"})public void sharePage( HttpServletRequest request, HttpServletResponse res,@PathVariable String type, @RequestParam String hl,String id) throws UnsupportedEncodingException{saveShareData(request,"show",type);//数据上报if(StringUtils.isEmpty(type)) type="invite";if(StringUtils.isEmpty(hl)) hl="en";String urlSchema = "taobao://";if(StringUtils.isNotEmpty(id)) urlSchema = "bxb://level="+id;String titleKey= hl+"_"+type+"_title";String descriptionKey= hl+"_"+type+"_description";String imgUrlKey = hl+"_"+type+"_img_url";String title= new String(env.getProperty(titleKey.toLowerCase()).getBytes("ISO8859-1"),"UTF-8");String description= new String(env.getProperty(descriptionKey.toLowerCase()).getBytes("ISO8859-1"),"UTF-8");String img_url = new String(env.getProperty(imgUrlKey.toLowerCase()).getBytes("ISO8859-1"),"UTF-8");try {res.setContentType("text/html; charset=UTF-8");//注意text/html，和application/htmlString html ="<!DOCTYPE html>\n" +"<html>\n" +"<head>\n" +"<title>Bricks Ball Crusher</title>\n" +"<meta name='description' content='Bricks Ball Crusher' />\n" +"<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />\n" +"<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1' />\n" +"<meta property='og:locale' content='en_US' />\n" +"<meta property='og:type' content='website' />\n" +"<meta property='og:image' content='"+img_url+"' />\n" +"<meta property='og:image:type' content='image/jpeg' />\n" +"<meta property='og:url' content='/' />\n" +"<meta property='og:site_name' content='Bricks Ball Crusher' />\n" +"<meta property='fb:app_id' content='' />\n" +"<meta property='og:title' content=\""+title+"\" />\n" +"<meta property='og:description' content=\""+description+"\" />\n" +"<script src='js/jquery.min.js'></script>\n" +"<link rel='stylesheet' href='css/bootstrap.min.css'>\n" +"<style>\n" +"* {margin:0; padding:0;font-family:'微软雅黑'}\n" +"body {background:url(img/bg.png); background-size:cover; background-attachment: fixed;}\n" +"</style>\n" +"</head>\n" +"<body >\n" +"<div class='container' >\n" +"<!--标题 开始 -->\n" +"<div class='row' >\n" +"<img src='img/title.png' class='img-responsive center-block' />\n" +"</div>\n" +"<!--标题 开始 -->\n" +"<!--主宣传图 开始 -->\n" +"<div class='row' style='margin-top: -110px'>\n" +"<img src='img/main.png' class='img-responsive center-block' />\n" +"</div>\n" +"<!--主宣传图 开始 -->\n" +"<!--副标题 开始 -->\n" +"<div class='row' style='margin: 30px 30px 10px 10px'>\n" +"<img src='img/subtitle.png' class='img-responsive center-block'>\n" +"</div>\n" +"<!--副标题 开始 -->\n" +"<!--下载按钮 开始 -->\n" +"<table class='table table-no-bordered' style='border:0px;' >\n" +"<tr>\n" +"<td style='border:0px' ><img src='img/goole.png' class='img-responsive center-block download ' ></td>\n" +"<td style='border:0px' ><img src='img/appstore.png' class='img-responsive center-block download ' style='padding-left:10px'></td>\n" +"</tr>\n" +"</table>\n" +"<!--下载按钮 结束 -->\n" +"</div>\n" +"<script type='text/javascript'>\n" +"function openApp(which, arg) {\n" +" jumpApp('"+urlSchema+"');\n" +" noApp();\n" +"}\n" +"function jumpApp(t) {\n" +" window.location.href = t;\n" +"}\n" +"var timer = null;\n" +"function noApp() {\n" +" var t = Date.now(),\n" +" timer = setTimeout(function() {\n" +" return Date.now() - t > 2200\n" +"? (clearTimeout(timer), !1)\n" +": !document.webkitHidden && !document.hidden && void (location.href = '下载地址');\n" +" }, 2000);\n" +"}\n" +"$('.download').click(function () {\n" +"//向后台发送请求\n" +"$.get('http://ip:port/share/click?type="+type+"');\n" +"noApp();\n" +"}); ";if("invite".equals(type)){html += " noApp();</script> </body> </html>";}else {html += " openApp();</script> </body> </html>";}res.getWriter().print(html);res.getWriter().close();} catch (IOException e) {e.printStackTrace();}}/*** 分享点击按钮* @param request 请求*/@RequestMapping(value = "share/click", produces={"application/json; charset=UTF-8"})public void shareClick(HttpServletRequest request,String type){saveShareData(request,"click",type);}/*** 写入数据库* @param request 请求* @param eventName 事件名*/private void saveShareData(HttpServletRequest request,String eventName,String uri){ShareEntity entity = new ShareEntity();entity.setIp(IPUtils.getIpAddr(request));entity.setEventName(eventName);entity.setSessionId(request.getRequestedSessionId());entity.setTime(DateUtils.format(new Date(),DateUtils.DATE_TIME_PATTERN));entity.setUri(uri);shareService.save(entity);}}
3.3 参数约定
参数约定type: invite edit find hl:系统语言，统一小写 en zh_cn zh_tw jp ru krid：关卡id
3.4 数据落地
3.5 测试地址
/tools/debug
3.6 分享效果
4 如何跳转APP内
URL Scheme就是一个可以让app相互之间可以跳转的对外接口。通过给APP定义一个唯一的URL路径来从外部快速的打开这个指定的APP，每个app的URL Scheme都是不一样的，如果存在一样的URL Scheme，那么系统就会响应先安装那个app的URL Scheme，因为后安装的app的URL Scheme被覆盖掉了，是不能被调用的。URL scheme的格式是 :
[scheme] ://[host]/[path]?[query]
介绍几个常用的URL Scheme平台：
QQ： mqq://微信： weixin://腾讯微博： TencentWeibo://淘宝： taobao://支付宝： alipay://微博： sinaweibo://
