分享链接打开客户端功能实现逻辑

公司文档

---

版本	日期	作者	更新内容
1.0	2015-05-25	王恒	初稿

1.Android浏览器打开客户端原理

• 服务端打开某个特殊的协议来匹配能打开这个协议的应用程序
• 打开客户端的时候可以带上必需的参数，以让客户端执行某些操作

2.通过客户端分享出去的链接规范

2.1 Android客户端配置

<activity
    android:name="com.hengeasy.guamu.droid.web.WebActivity"
    android:screenOrientation="portrait"
    android:theme="@android:style/Theme.NoTitleBar" >
    <intent-filter>  
        <action android:name="android.intent.action.VIEW"/>     
        <category android:name="android.intent.category.DEFAULT"/>               
        <category android:name="android.intent.category.BROWSABLE"/>  
        <data android:scheme="guamu" android:host="guamu"/>  
    </intent-filter>  
</activity>

2.3 分享链接

2.3.1 分享链接的链接为不带有app_token和type的原生职位详情或者公司详情链接，并追加以下参数:

参数名	参数值	其他说明
type	1表示IOS; 2表示Android	和打开职位详情时传递的参数一致
share	1表示是分享出去的链接，其他值表示不是分享出去的链接	在客户端内打开详情的时候不会添加这个参数
url	服务端需要打开客户端的时候需要传递回来的参数	服务端打开客户端的时候，客户端加载这个链接并从这个链中获取必需的参数 需要对这个字符串做Base64加密
title	网页显示的标题	客户端职位详情页顶部的标题文字； 需要对这个字段做一下基于UTF-8编码的URLEncoder

url参数中应该包含网页的标题(职位的标题或者公司的标题)

特别注意：Base64编码或者解码的时候必须使用UTF-8编码并其使用Flag是Base64.NO_WRAP的那种方式(去除换行；Base64在进行转码的时候如果位数不是3的倍数会在字符串后面追加一个或者两个“=”)

例子：

http://www.baidu.com/page?type=2&share=1&url=aHR0cHM6Ly96eWJ1bHVvLmNvbS93YW5nd2FuZ2hlbmcvbm90ZS85NTg0MQAC

2.3.2 追加参数的方法（待优化）

/**
 * 
 * getShareURL:得到分享链接. <br/>
 *
 * @author wangheng
 * @return
 */
private String getShareURL(){
    String shareURL = mUrl;
    if(StringUtils.isNullOrEmpty(shareURL)){
        shareURL = mWebView.getUrl();
    }
    if(shareURL.contains("app_token=")){
        shareURL = shareURL.substring(0,shareURL.indexOf("app_token="));
    }
    String url = new String(shareURL);
    String title = mTopbarTitle.getText().toString();
    try{
        if(url.contains("?")){
            if(url.endsWith("?")){
                url = url + "title=" + URLEncoder.encode(title, "UTF-8"); 
            }else{
                if(url.endsWith("&")){
                    url = url + "title=" + URLEncoder.encode(title, "UTF-8"); 
                }else{
                    url = url + "&title=" + URLEncoder.encode(title, "UTF-8"); 
                }
            }
        }else{
            url = url + "?title=" + URLEncoder.encode(title, "UTF-8");
        }
        url = Base64.encodeToString(url.getBytes("UTF-8"), Base64.URL_SAFE);
        if(shareURL.contains("?")){
            if(shareURL.endsWith("?")){
                shareURL = shareURL + "type=2&share=1&title=" 
                        + URLEncoder.encode(title, "UTF-8") + "&url=" + url; 
            }else{
                if(shareURL.endsWith("&")){
                    shareURL = shareURL + "type=2&share=1&title=" 
                        + URLEncoder.encode(title, "UTF-8") + "&url=" + url; 
                }else{
                    shareURL = shareURL + "&type=2&share=1&title=" 
                        + URLEncoder.encode(title, "UTF-8") + "&url=" + url; 
                }
            }
        }else{
            shareURL = shareURL + "?type=2&share=1&title=" 
                + URLEncoder.encode(title, "UTF-8") + "&url=" + url;
        }
    }catch(Exception e){
        e.printStackTrace();
    }
    return shareURL;
}

2.4 Android客户端接收服务端传递的参数

可以从getIntent().getData()拿到打开APP的完整的path,从这个Path中可以拿到我们需要的所有的参数

Uri uri = intent.getData();
if(uri == null){
    finish();
    return;
}
String schema = uri.getScheme();
if(StringUtils.isNullOrEmpty(schema)){
    finish();
    return;
}
if("guamu".equals(schema)){
    mUrl = uri.getQueryParameter("url");
    if(mUrl != null){
        try {
            mUrl = new String(Base64.decode(mUrl.getBytes("UTF-8"), Base64.URL_SAFE),"UTF-8");
            title = URLDecoder.decode(Uri.parse(mUrl).getQueryParameter("title"),"UTF-8");
            isFromShared = Integer.parseInt(Uri.parse(mUrl).getQueryParameter("share")) == 1;
        } catch(Exception e) {
            title = App.getInstance().getString(R.string.web_topbar_title_detail);
            e.printStackTrace();
        }
    }
}

3.服务端

3.1 业务逻辑

3.2 协议和参数传递

• 协议名:guamu
• host名:guamu
• 参数列表
  
  • url:客户端传递个服务端的参数原样返回

例子：

guamu://guamu?url=aHR0cHM6Ly96eWJ1bHVvLmNvbS93YW5nd2FuZ2hlbmcvbm90ZS85NTg0MQAC

3.3 跳转客户端以及跳转下载页面的逻辑代码(示例)

服务端判断操作系统的逻辑请参考：http://www.cnblogs.com/duanguyuan/p/3534470.html

3.3.1 创建不可见iframe

用户点击浏览器中的链接时，在动态创建一个不可见的iframe，并且让这个iframe去加载步骤1中的Schema，如下：

var ifr = document.createElement('iframe');
ifr.src="guamu://guamu?url=XXXXX"

3.3.2 跳转下载链接

如果在指定的时间内没有跳转成功，则当前页跳转到apk的下载地址（或下载页），如下：

window.location = download_url;

3.3.3 示例代码

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <title>this's a demo</title>
        <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
    </head>
    <body>
        <div>
            <a id="J-call-app" href="javascript:;" class="label">立即打开&gt;&gt;</a>
            <input id="J-download-app" type="hidden" name="storeurl" value="http://m.chanyouji.cn/apk/chanyouji-2.2.0.apk">
        </div>
        <script>
            (function(){
                var ua = navigator.userAgent.toLowerCase();
                var t;
                var config = {
                    /*scheme:必须*/
                    scheme_IOS: 'guamu://',
                    scheme_Adroid: 'guamu://guamu?url=XXXX',
                    download_url: document.getElementById('J-download-app').value,
                    timeout: 600
                };
                function openclient() {
                    var startTime = Date.now();
                    var ifr = document.createElement('iframe');
                    ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adroid;
                    ifr.style.display = 'none';
                    document.body.appendChild(ifr);
                    var t = setTimeout(function() {
                        var endTime = Date.now();
                        if (!startTime || endTime - startTime < config.timeout + 200) { 
                            window.location = config.download_url;
                        } else {
                        }
                    }, config.timeout);
                    window.onblur = function() {
                        clearTimeout(t);
                    }
                }
                window.addEventListener("DOMContentLoaded", function(){
                    document.getElementById("J-call-app")
                        .addEventListener('click',openclient,false);
                }, false);
            })()
        </script>
    </body>
</html>