集成X5WebView內核主要是為了解決Android自帶的WebView各種報錯問題
研究了好幾天，嘗試過網上靜態集成等等方法，沒有一個正常的
后來在騰訊官方下載X5WebView最新SDK 2021-02-25的版本，但是官方Demo項目太老了，編譯各種錯誤，無奈研究好久總算有點眉目，先說明下環境:
Android Studio 4.1.3
Visual studio 2019
Java 1.8
SDK Android API 28
NDK android-ndk-r21e
Cocos2d-x 3.17.2

騰訊瀏覽服務SDK，官方下載地址：https://x5.tencent.com/tbs/sdk.html
Cocos2d-x集成X5WebView分為兩種
先說第一種：類集成，使用Activity來啟動X5WebView

步驟1：
創建cocos2d-x項目
先創建一個cocos2d-x 3.17.2項目
使用Android studio 打開項目，同步可能報錯，先把項目的插件版本和Gradle版本改為
3.5.3 對應Gradle版本 5.4.1



再設置NDK

設置完成以后項目會自動重新同步，若沒有自動同步，請點擊界面右上角的同步按鈕同步項目
如圖：
當項目顯示可運行的時候，表示同步完成，項目可進行編譯了

步驟2：
下載X5 SDK 引入jar包
https://x5.tencent.com/tbs/sdk.html
下載好后解壓如圖：

將tbs_sdk_thirdapp_v4.3.0.93_43993_sharewithdownloadwithfile_withoutGame_obfs_20210220_114728.jar復制到項目proj.android\app\libs目錄下，沒有libs文件夾自己創建

再打開Android studio界面，切換到Project樣式



選擇SDK文件右鍵Add As Library

直接確定，項目會自動同步完成

步驟3：
添加權限

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" />

Application節點添加 android:usesCleartextTraffic=“true”
解決高版本不能訪問http問題，添加完成后如下：

步驟4：
參照官方Demo寫一個繼承WebView的類

創建名為X5WebView的類，代碼如下：

package org.cocos2dx.cpp;import android.annotation.SuppressLint; import android.content.Context; import android.util.AttributeSet;import com.tencent.smtt.sdk.WebSettings; import com.tencent.smtt.sdk.WebView; import com.tencent.smtt.sdk.WebViewClient;public class X5WebView extends WebView {//防止加載網頁時調起系統瀏覽器private WebViewClient client = new WebViewClient() {public boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}};//重寫構造函數@SuppressLint("SetJavaScriptEnabled")public X5WebView(Context context, AttributeSet attributeSet) {super(context, attributeSet);this.setWebViewClient(client);WebSettings webSetting = this.getSettings();webSetting.setJavaScriptEnabled(true);webSetting.setJavaScriptCanOpenWindowsAutomatically(true);webSetting.setAllowFileAccess(true);webSetting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);webSetting.setSupportZoom(true);webSetting.setBuiltInZoomControls(true);webSetting.setUseWideViewPort(true);webSetting.setSupportMultipleWindows(false);webSetting.setAppCacheEnabled(true);webSetting.setDomStorageEnabled(true);webSetting.setGeolocationEnabled(true);webSetting.setAppCacheMaxSize(Long.MAX_VALUE);webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);this.getView().setClickable(true);}//重寫構造函數public X5WebView(Context context) {super(context);this.setBackgroundColor(85621);} }

實現WebViewJavaScriptFunction接口，好像調用JS要


代碼如下：

package org.cocos2dx.cpp;public interface WebViewJavaScriptFunction {void onJsFunctionCalled(String tag); }

步驟5：
在 AppActivity 類中添加一個全局變量，用來記錄內核初始化狀態
再添加X5內核初始化代碼

public static boolean mX5WebViewInitState = false; //用于記錄內核是否初始化完成 package org.cocos2dx.cpp;import android.os.Bundle; import org.cocos2dx.lib.Cocos2dxActivity; import android.os.Build; import android.util.Log; import android.view.WindowManager;import com.tencent.smtt.sdk.QbSdk;public class AppActivity extends Cocos2dxActivity {public static boolean mX5WebViewInitState = false; //用于記錄內核是否初始化完成public static AppActivity mActivity;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.setEnableVirtualButton(false);super.onCreate(savedInstanceState);if (!isTaskRoot()) {return;}if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {WindowManager.LayoutParams lp = getWindow().getAttributes();lp.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;getWindow().setAttributes(lp);}mActivity = this;//初始化內核QbSdk.initX5Environment(getApplicationContext(), new QbSdk.PreInitCallback() {@Overridepublic void onCoreInitFinished() {Log.d("調試", "內核初始化完畢");mX5WebViewInitState = true;}@Overridepublic void onViewInitFinished(boolean b) {Log.d("調試", "WebView驗證完畢，狀態：" + b);mX5WebViewInitState = true;}});}}

再創建布局文件夾


再創建布局文件


創建好后如下圖：

創建X5WebViewActivity類，用于顯示X5WebView

package org.cocos2dx.cpp;import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.os.Handler; import android.util.Log; import android.view.KeyEvent; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.view.WindowManager; import android.widget.FrameLayout;import com.snail.antifake.jni.EmulatorDetectUtil; import com.tencent.smtt.export.external.interfaces.IX5WebChromeClient; import com.tencent.smtt.export.external.interfaces.JsResult; import com.tencent.smtt.sdk.CookieSyncManager; import com.tencent.smtt.sdk.WebChromeClient; import com.tencent.smtt.sdk.WebSettings; import com.tencent.smtt.sdk.WebView; import com.tencent.smtt.sdk.WebViewClient;import cocos2dx.x5webview.com.R;public class X5WebViewActivity extends Activity {private Context mContext;private Handler mHandle;private X5WebView mWebView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE); //去掉窗口標題getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); //隱藏頂部的狀態欄//如果不是模擬器才開啟硬件加速，X5WebView內核模擬器開啟硬件加速會報錯閃退if(!EmulatorDetectUtil.isEmulator(X5WebViewActivity.this)) {getWindow().setFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED, WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);}setContentView(R.layout.layout_x5webview);mContext = this;//定時檢測內核初始化狀態mHandle = new Handler();mHandle.post(new Runnable() {@Overridepublic void run() {if(AppActivity.mX5WebViewInitState){mHandle.removeCallbacks(this);Log.d("調試", "內核初始化完成..");initX5WebView();return;}//延時調用runmHandle.postDelayed(this, 500);Log.d("調試", "內核初始化中..");}});}//初始化并創建 X5WebView，必須在內核初始化完成之后，否則X5WebView是無效的或是調用系統的WebView，通常情況下內核第一次初始化在20秒左右，第二次就很快private void initX5WebView(){mWebView = new X5WebView(mContext, null);// 創建布局文件FrameLayout layout = (FrameLayout) findViewById(android.R.id.content).getRootView();layout.setBackgroundColor(0);layout.addView(mWebView, new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,FrameLayout.LayoutParams.MATCH_PARENT));mWebView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {return false;}@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);}});mWebView.setWebChromeClient(new WebChromeClient() {@Overridepublic boolean onJsConfirm(WebView arg0, String arg1, String arg2,JsResult arg3) {return super.onJsConfirm(arg0, arg1, arg2, arg3);}View myVideoView;View myNormalView;IX5WebChromeClient.CustomViewCallback callback;/*** 全屏播放配置*/@Overridepublic void onShowCustomView(View view, IX5WebChromeClient.CustomViewCallback customViewCallback) {}@Overridepublic void onHideCustomView() {if (callback != null) {callback.onCustomViewHidden();callback = null;}if (myVideoView != null) {ViewGroup viewGroup = (ViewGroup) myVideoView.getParent();viewGroup.removeView(myVideoView);viewGroup.addView(myNormalView);}}@Overridepublic boolean onJsAlert(WebView arg0, String arg1, String arg2, JsResult arg3) {//這里寫入你自定義的window alertreturn super.onJsAlert(null, arg1, arg2, arg3);}});WebSettings webSetting = mWebView.getSettings();webSetting.setAppCachePath(this.getDir("appcache", 0).getPath());webSetting.setDatabasePath(this.getDir("databases", 0).getPath());webSetting.setGeolocationDatabasePath(this.getDir("geolocation", 0).getPath());webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);CookieSyncManager.createInstance(mContext);CookieSyncManager.getInstance().sync();//打開網頁mWebView.loadUrl("https://www.hao123.com");}@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {//重寫返回鍵事件if (keyCode == KeyEvent.KEYCODE_BACK) {if (mWebView != null && mWebView.canGoBack()) {mWebView.goBack();return true;} else {mWebView.destroy();this.finish();}return true;}return super.onKeyUp(keyCode, event);} }

對上面的代碼補充說明
//補充提示：檢測模擬器 EmulatorDetectUtil類 需要引入 com.snail:antifake:1.4 依賴包

AndroidManifest添加配置

<activity android:name="org.cocos2dx.cpp.X5WebViewActivity" android:parentActivityName="org.cocos2dx.cpp.AppActivity" android:theme="@android:style/Animation.Activity" android:hardwareAccelerated="false" android:screenOrientation="portrait"> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="org.cocos2dx.cpp.AppActivity" /> </activity>

添加好后如下：

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"package="cocos2dx.x5webview.com"android:installLocation="auto"><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.READ_PHONE_STATE" /><uses-feature android:glEsVersion="0x00020000" /><applicationandroid:label="@string/app_name"android:allowBackup="true"android:icon="@mipmap/ic_launcher"android:usesCleartextTraffic="true"><!-- Tell Cocos2dxActivity the name of our .so --><meta-data android:name="android.app.lib_name"android:value="MyGame" /><activityandroid:name="org.cocos2dx.cpp.AppActivity"android:screenOrientation="landscape"android:configChanges="orientation|keyboardHidden|screenSize"android:label="@string/app_name"android:theme="@android:style/Theme.NoTitleBar.Fullscreen"android:launchMode="singleTask"android:taskAffinity="" ><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity><activityandroid:name="org.cocos2dx.cpp.X5WebViewActivity"android:parentActivityName="org.cocos2dx.cpp.AppActivity"android:theme="@android:style/Animation.Activity"android:hardwareAccelerated="false"android:screenOrientation="portrait"><meta-dataandroid:name="android.support.PARENT_ACTIVITY"android:value="org.cocos2dx.cpp.AppActivity" /></activity></application></manifest>

最后在AppActivity類中添加啟動函數

public boolean createX5WebView(){Intent intent = new Intent(this, X5WebViewActivity.class);startActivity(intent);return true;}public static boolean createHTML5WebView(){return mActivity.createX5WebView(url);}

到此就完成了

下面只需要在cpp文件中添加JNI調用即可，其他細節自行實現

#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)bool b = JniHelper::callStaticBooleanMethod("org/cocos2dx/cpp/AppActivity", "createHTML5WebView");if(!b){log("X5WebView瀏覽器創建失敗，內核還未初始化完成");} #endif #include "HelloWorldScene.h" #include "SimpleAudioEngine.h"#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID) #include "cocos/platform/android/jni/JniHelper.h" #endifUSING_NS_CC;Scene* HelloWorld::createScene() {return HelloWorld::create(); }static void problemLoading(const char* filename) {printf("Error while loading: %s\n", filename);printf("Depending on how you compiled you might have to add 'Resources/' in front of filenames in HelloWorldScene.cpp\n"); }bool HelloWorld::init() {if ( !Scene::init() ){return false;}auto visibleSize = Director::getInstance()->getVisibleSize();Vec2 origin = Director::getInstance()->getVisibleOrigin();auto closeItem = MenuItemImage::create("CloseNormal.png","CloseSelected.png",CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));if (closeItem == nullptr ||closeItem->getContentSize().width <= 0 ||closeItem->getContentSize().height <= 0){problemLoading("'CloseNormal.png' and 'CloseSelected.png'");}else{float x = origin.x + visibleSize.width - closeItem->getContentSize().width/2;float y = origin.y + closeItem->getContentSize().height/2;closeItem->setPosition(Vec2(x,y));}// create menu, it's an autorelease objectauto menu = Menu::create(closeItem, NULL);menu->setPosition(Vec2::ZERO);this->addChild(menu, 1);auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);if (label == nullptr){problemLoading("'fonts/Marker Felt.ttf'");}else{label->setPosition(Vec2(origin.x + visibleSize.width/2,origin.y + visibleSize.height - label->getContentSize().height));this->addChild(label, 1);}//打開瀏覽器按鈕auto btn = MenuItemLabel::create(Label::createWithTTF("Open X5WebView Browser", "fonts/arial.ttf", 20),[this](Ref* pSender) { #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)JniHelper::callStaticBooleanMethod("org/cocos2dx/cpp/AppActivity", "createHTML5WebView"); #endif});btn->setPosition(Vec2(Director::getInstance()->getVisibleSize().width / 2, Director::getInstance()->getVisibleSize().height * 0.8f));menu->addChild(btn);return true; }void HelloWorld::menuCloseCallback(Ref* pSender) {Director::getInstance()->end(); }

可以看到，運行后Android studio調試輸出



可以看到，現在可以播放視頻了哈哈

2021-04-02 最新補充：
經過測試，cocos2d-x 3.17.2 使用 X5WebView內核時，在模擬器中閃退的原因已解決
在項目中的Gradle.properties中修改

PROP_APP_ABI=armeabi-v7a
為
PROP_APP_ABI=armeabi-v7a:arm64-v8a:x86

即可解決在打開頁面時閃退，原來的硬件加速可設置為默認開啟
將AndroidManifest.xml文件中的
android:hardwareAccelerated=“false”
改為
android:hardwareAccelerated=“true”

X5 Activity類中的

if(!EmulatorDetectUtil.isEmulator(X5WebViewActivity.this)) {getWindow().setFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED, WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED); }

這條刪掉即可，模擬器依然可以開啟硬件加速

總結

以上是生活随笔為你收集整理的Cocos2d-x 3.17.2 集成X5WebView内核方法，完美运行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。