集成TBS腾讯浏览服务代替Webview显示网页

admin 管理员组

文章数量: 887021

   对于android中的WebView其实也还可以，只是显示网页或者静态网页而已，如果想追求跟好的显示效果就用H5把。尝试把TBS腾讯浏览服务弄到了项目里面，显示了本地HTML（有css和js）和网页的。

但是发现其实效果差不多，缓存的后台运行其实没有多大的区别，反而TBS在加载有CSS和JS的静态网页的时候后台运行占用会突然升高然后js加载完有回到正常水平，建议大家试过之后再决定要不要用TBS。

 看了http://www.tuicool/articles/Jjeiuqf 里面有替代WebView的东西，原来可以用TBS腾讯浏览访问

 这里只用到TBS<web/>功能

官方网址：https://x5.tencent/tbs/sdk.html 下载android studio 注意动态库liblbs.so的添加，动态库问题可参考：http://bbs.mb.qq/thread-1473368-1-1.html

简单的继承作为浏览网页的功能。写的有点乱 也可参考：http://blog.csdn/github_2011/article/details/71600734

注意：有so文件的话在模拟器上会报错 INSTALL_FAILED_NO_MATCHING_ABIS 调试的话用真机好一点

导如包什么的就不说了 官网有AS和Eclipse的示范代码

1.Application onCreate中添加

preinitX5WebCore();
        //预加载x5内核
        Intent intent = new Intent(this, AdvanceLoadX5Service.class);
        startService(intent);

2.下面是AdvanceLoadX5Service

public class AdvanceLoadX5Service extends Service {
    @Nullable
    @Override
    public IBinder onBind(Intent intent) {
        return null;
    }
    @Override
    public void onCreate() {
        super.onCreate();
        initX5();
    }


    private void initX5() {
        //  预加载X5内核
        QbSdk.initX5Environment(getApplicationContext(), cb);
    }


    QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {


        @Override
        public void onViewInitFinished(boolean arg0) {
            // TODO Auto-generated method stub
            //初始化完成回调
        }


        @Override
        public void onCoreInitFinished() {
            // TODO Auto-generated method stub
        }
    };


}

3.然后是X5WebView

package com.musicdo.puluo.view;


import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import android.widget.TextView;


import com.tencent.smtt.sdk.QbSdk;
import com.tencent.smtt.sdk.WebSettings;
import com.tencent.smtt.sdk.WebSettings.LayoutAlgorithm;
import com.tencent.smtt.sdk.WebView;
import com.tencent.smtt.sdk.WebViewClient;


public class X5WebView extends WebView {
TextView title;
private WebViewClient client = new WebViewClient() {
/**
* 防止加载网页时调起系统浏览器
*/
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
};


@SuppressLint("SetJavaScriptEnabled")
public X5WebView(Context arg0, AttributeSet arg1) {
super(arg0, arg1);
this.setWebViewClient(client);
// this.setWebChromeClient(chromeClient);
// WebStorage webStorage = WebStorage.getInstance();
initWebViewSettings();
this.getView().setClickable(true);
}


private void initWebViewSettings() {
WebSettings webSetting = this.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
webSetting.setAllowFileAccess(true);
webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
webSetting.setSupportZoom(true);
webSetting.setBuiltInZoomControls(true);
webSetting.setUseWideViewPort(true);
webSetting.setSupportMultipleWindows(true);
// webSetting.setLoadWithOverviewMode(true);
webSetting.setAppCacheEnabled(true);
// webSetting.setDatabaseEnabled(true);
webSetting.setDomStorageEnabled(true);
webSetting.setGeolocationEnabled(true);
webSetting.setAppCacheMaxSize(Long.MAX_VALUE);
// webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);
webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
// webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);
webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);


// this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension
// settings 的设计
}


@Override
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
boolean ret = super.drawChild(canvas, child, drawingTime);
canvas.save();
Paint paint = new Paint();
paint.setColor(0x7fff0000);
paint.setTextSize(24.f);
paint.setAntiAlias(true);
if (getX5WebViewExtension() != null) {
canvas.drawText(this.getContext().getPackageName() + "-pid:"
+ android.os.Process.myPid(), 10, 50, paint);
canvas.drawText(
"X5  Core:" + QbSdk.getTbsVersion(this.getContext()), 10,
100, paint);
} else {
canvas.drawText(this.getContext().getPackageName() + "-pid:"
+ android.os.Process.myPid(), 10, 50, paint);
canvas.drawText("Sys Core", 10, 100, paint);
}
canvas.drawText(Build.MANUFACTURER, 10, 150, paint);
canvas.drawText(Build.MODEL, 10, 200, paint);
canvas.restore();
return ret;
}


public X5WebView(Context arg0) {
super(arg0);
setBackgroundColor(85621);
}


}
4.最后是在加载网页的Activity onCreate中添加
private void init() {


        mWebView = new X5WebView(this, null);
        mViewParent.addView(mWebView, new FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.FILL_PARENT,
                FrameLayout.LayoutParams.FILL_PARENT));


//        initProgressBar();
//        mWebView.loadUrl("file://" + course_url);
        mWebView.loadUrl("https://www.baidu");
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(com.tencent.smtt.sdk.WebView webView, String s) {
                mWebView.loadUrl("https://www.baidu");
                return true;
            }


            @Override
            public void onPageFinished(com.tencent.smtt.sdk.WebView webView, String s) {
                super.onPageFinished(webView, s);
//                if (mWebView == null) {
//                    mWebView.loadUrl("file://" + course_url);
//                    return;
//                }


            }


        });


        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsConfirm(com.tencent.smtt.sdk.WebView webView, String s, String s1, com.tencent.smtt.export.external.interfaces.JsResult jsResult) {
                return super.onJsConfirm(webView, s, s1, jsResult);
            }
            View myVideoView;
            View myNormalView;
            IX5WebChromeClient.CustomViewCallback callback;
            /**
             * 全屏播放配置
             */
            @Override
            public void onShowCustomView(View view,
                                         IX5WebChromeClient.CustomViewCallback customViewCallback) {
                FrameLayout normalView = (FrameLayout) findViewById(R.id.web_filechooser);
                ViewGroup viewGroup = (ViewGroup) normalView.getParent();
                viewGroup.removeView(normalView);
                viewGroup.addView(view);
                myVideoView = view;
                myNormalView = normalView;
                callback = customViewCallback;
            }


            @Override
            public void onHideCustomView() {
                if (callback != null) {
                    callback.onCustomViewHidden();
                    callback = null;
                }
                if (myVideoView != null) {
                    ViewGroup viewGroup = (ViewGroup) myVideoView.getParent();
                    viewGroup.removeView(myVideoView);
                    viewGroup.addView(myNormalView);
                }
            }


            @Override
            public boolean onJsAlert(com.tencent.smtt.sdk.WebView webView, String s, String s1, com.tencent.smtt.export.external.interfaces.JsResult jsResult) {
                return super.onJsAlert(webView, s, s1, jsResult);
            }
        });
        WebSettings webSetting = mWebView.getSettings();
        webSetting.setAllowFileAccess(true);
        webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
        webSetting.setSupportZoom(true);
        webSetting.setBuiltInZoomControls(true);
        webSetting.setUseWideViewPort(true);
        webSetting.setSupportMultipleWindows(false);
        // webSetting.setLoadWithOverviewMode(true);
        webSetting.setAppCacheEnabled(true);
        // webSetting.setDatabaseEnabled(true);
        webSetting.setDomStorageEnabled(true);
        webSetting.setJavaScriptEnabled(true);
        webSetting.setGeolocationEnabled(true);
        webSetting.setAppCacheMaxSize(Long.MAX_VALUE);
        webSetting.setAppCachePath(this.getDir("appcache", 0).getPath());
        webSetting.setDatabasePath(this.getDir("databases", 0).getPath());
        webSetting.setGeolocationDatabasePath(this.getDir("geolocation", 0)
                .getPath());
        // webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);
        webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
        long time = System.currentTimeMillis();
//        mWebView.loadUrl("file://" + course_url);
        TbsLog.d("time-cost", "cost time: "
                + (System.currentTimeMillis() - time));
        CookieSyncManager.createInstance(this);
        CookieSyncManager.getInstance().sync();

}

5.布局文件中Activit中 mViewParent对应布局文件中的
<FrameLayout
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </FrameLayout>

6.还有onShowCustomView中R.id.web_filechooser布局文件为：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <FrameLayout android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:id="@+id/frame_web_video"></FrameLayout>

    <com.musicdo.puluo.view.X5WebView
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:id="@+id/web_filechooser">  
    </com.musicdo.puluo.view.X5WebView>
</RelativeLayout>

发现一个问题，就是当我全屏播放的时候报错了，不全屏就没问题：

W/System.err: java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.ViewParent android.widget.FrameLayout.getParent()' on a null object reference
W/System.err:     at com.musicdo.puluo.activity.CoureseToPlay$4.onShowCustomView(CoureseToPlay.java:341)
W/System.err:     at com.tencent.smtt.sdk.SystemWebChromeClient.onShowCustomView(Unknown Source)
W/System.err:     at com.android.webview.chromium.WebViewContentsClientAdapter.onShowCustomView(WebViewContentsClientAdapter.java:1144)
W/System.err:     at org.chromium.android_webview.AwWebContentsDelegateAdapter.toggleFullscreenModeForTab(AwWebContentsDelegateAdapter.java:8310)
W/System.err:     at org.chromium.base.SystemMessageHandler.nativeDoRunLoopOnce(Native Method)
W/System.err:     at org.chromium.base.SystemMessageHandler.handleMessage(SystemMessageHandler.java:41)
W/System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
W/System.err:     at android.os.Looper.loop(Looper.java:135)
W/System.err:     at android.app.ActivityThread.main(ActivityThread.java:5275)
W/System.err:     at java.lang.reflect.Method.invoke(Native Method)
W/System.err:     at java.lang.reflect.Method.invoke(Method.java:372)
W/System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:912)
W/System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:707)
A/chromium: [FATAL:jni_android(236)] Please include Java exception stack in crash report
W/google-breakpad: ### ### ### ### ### ### ### ### ### ### ### ### ###
W/google-breakpad: Chrome build fingerprint:
W/google-breakpad: 1.2
W/google-breakpad: 1
W/google-breakpad: ### ### ### ### ### ### ### ### ### ### ### ### ###
A/libc: Fatal signal 6 (SIGABRT), code -6 in tid 21919 (m.musicdo.puluo)
Application terminated.

官方示例代码也是报异常

java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.ViewParent android.widget.FrameLayout.getParent()' on a null object reference
W/System.err:     at com.example.test_webview_demo.BrowserActivity$2.onShowCustomView(BrowserActivity.java:193)

定位193行代码 ：

ViewGroup viewGroup = (ViewGroup) normalView.getParent();

对视频全屏问题的修改如下：

一、在第5点布局webView1添加多一个控件显示全屏视频，并在主Activity中绑定id和创建多一个缓存View

Activity中

private FrameLayout video_fullView;// 全屏时视频加载view
private View xCustomView;

主布局中

<FrameLayout
    android:id="@+id/video_fullView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolbar"
    android:background="@color/black"
    android:visibility="invisible" />

二、修改setWebChromeClient中的两个方法：

/**
 * 全屏播放配置
 */
@Override
public void onShowCustomView(View view,
                             IX5WebChromeClient.CustomViewCallback customViewCallback) {
    mWebView.setVisibility(View.GONE);
    video_fullView.setVisibility(View.VISIBLE);
    video_fullView.addView(view);
    xCustomView = view;
    callback = customViewCallback;

//动画
    //video_fullView.setAnimation(AnimationUtils.loadAnimation(CoureseToPlay.this, R.anim.zoom_in));
}

@Override
public void onHideCustomView() {
    if (xCustomView == null) {
        return;
    }
    xCustomView.setVisibility(View.GONE);
    video_fullView.removeView(xCustomView);
    xCustomView = null;
    video_fullView.setVisibility(View.GONE);
    mWebView.setVisibility(View.VISIBLE);

//动画
    //video_fullView.setAnimation(AnimationUtils.loadAnimation(CoureseToPlay.this, R.anim.zoom_out));
}

记录到此 欢迎指正

本文标签： 腾讯 网页 TBS WebView