美文网首页
网页端与App端互通

网页端与App端互通

作者: 起个名字真难999 | 来源:发表于2017-11-23 14:39 被阅读151次

    最近在公司做web App项目,需要在webApp中打开原生App
    如果本地有安装原生App,那就直接去打开原生App对应的页面,如果本地没有安装原生App,那就直接去下载这个原生App.

    先看网页端的代码

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <button onclick="doCheck()">测试设备Main2</button></br>
        </body>
        <script type="text/javascript">
            function doCheck() {
                var ua = navigator.userAgent;   
                //判断浏览器的当前设备,是iPhone,还是Android
                if(ua.indexOf('iPhone') > 0) {
                    alert('iPhone设备');
                } else if(ua.indexOf('Android') > 0) {
                    //alert('Android设备');
                    checkAndroid();
                } else {
                    alert('暂不支持你所用的系统,请使用Android或iOS系统')
                }
            }
    
                //
            function checkAndroid() {
                //"banggu://是网页与App约定的协议,这个是自由的不需要限制"
                //com.example.liuzenglong.newapp.Main2Activity 这个是我准备打开对应App的一个类
                //?id=10000&userId ='liuzenglong'&password='123456'"    //提供传递的参数给App
                window.location.href = "banggu://com.example.liuzenglong.newapp.Main2Activity/get/info?id=10000&userId ='liuzenglong'&password='123456'"; /***打开app的协议,有安卓同事提供***/
                window.setTimeout(function() {//这里500ms打不开App就会去下载页下载App
                    window.location.href = "http://www.baidu.com"; /***打开app的下载页***/
                }, 500);
            }
        </script>
    
    </html>
    
    

    至此网页端的工作已经做完了,现在可以看App端,由于本人是做Android开发,这里只提供Android的实现方式.

    Android需要做的事情

    1.先在AndroidManifest的配置文件配置一下打开页面的数据

    <activity android:name=".OpenFromWebActivity">
            <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="banggu" />//这个是我们对应的协议,与网页里面需要保持一致,
            </intent-filter>
        </activity>
    

    2. 在Activity里处理网页传递来的数据**

    /**
     * 获取Uri
     *
     * @return
     */
    private String getUri() {
        // 尝试获取WebApp页面上过来的URL
        Uri uri = getIntent().getData();
        if (uri != null) {
            StringBuffer sb = new StringBuffer();
            // 完整的url信息
            sb.append("url: " + uri.toString());
            // scheme部分
            sb.append("\nscheme: " + uri.getScheme());
            // host部分   用来对应对包名,
            sb.append("\nhost: " + uri.getHost());
            enterActivity(uri.getHost());
            // 访问路劲
            sb.append("\npath: ");  //用来对应模块,
            List<String> pathSegments = uri.getPathSegments();
            for (int i = 0; pathSegments != null && i < pathSegments.size(); i++) {
                sb.append("/" + pathSegments.get(i));
            }
            // Query部分  //用来对应模块需要的参数
            sb.append("\nquery: ?" + uri.getQuery());
    
            return sb.toString();
        }
        return null;
    }
    
    
    /**
     * 进入对应的Activity
     * @param activityName
     */
    private void enterActivity(String activityName) {
        try {
            Class currentClass = Class.forName(activityName);
            Toast.makeText(this, "---"+currentClass.getName(), Toast.LENGTH_SHORT).show();
            Intent intent = new Intent(this, currentClass);
            startActivity(intent);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
    

    这样基本工作就已经做完了,具体页面,具体操作。

    相关文章

      网友评论

          本文标题:网页端与App端互通

          本文链接:https://www.haomeiwen.com/subject/ztyzvxtx.html