手游《我叫MT》一开始会弹出一个游戏公告，有玩过的肯定都蛮熟悉的，这就是webview，就是一个网页。由于webview和平台相关，这里就介绍下cocos2d-x如何嵌入andorid的webview控件，在cocos2d-x中显示网页。

1.Jni

Jni这里我就不再多说了。可用参考，或者。通过Jni，可以实现在cocos2d-x中调用Android的API，当然也可以进行传值。

2.Android使用webview

直接上代码。主要是处理布局和webview使用的问题。这里采用代码布局。以下操作在android的主类（cocos2dxActivity）中处理。

2.1.添加成员变量

整个布局的结构是最底层一个FrameLayout，ImageView控件放置在FrameLayout上。然后之上是一个LinearLayout用来放置关闭按钮，LinearLayout往下是Webview控件。

 

1     static Test test  = null;//Test实例2     WebView m_webView;//WebView控件3     ImageView m_imageView;//ImageView控件4     FrameLayout m_webLayout;//FrameLayout布局5     LinearLayout m_topLayout;//LinearLayout布局6     Button m_backButton;//关闭按钮

2.2.OnCreate中添加FrameLayout布局

1     protected void onCreate(Bundle savedInstanceState){ 2         super.onCreate(savedInstanceState); 3         test=this; 4          5         //初始化一个空布局 6         m_webLayout = new FrameLayout(this); 7         FrameLayout.LayoutParams lytp = new FrameLayout.LayoutParams(800,640); 8         lytp .gravity = Gravity.CENTER; 9         addContentView(m_webLayout, lytp);10     }

2.3.返回实例

1     public static Test getInstance() {2         Log.v("TestJacky","getInstance");3         return test;4     }

2.4.显示webview

1     public void openWebview() { 2         Log.v("TestJacky", "openWebView"); 3         this.runOnUiThread(new Runnable() {
    //在主线程里添加别的控件 4             public void run() {    5                 //初始化webView 6                 m_webView = new WebView(test); 7                 //设置webView能够执行javascript脚本 8                 m_webView.getSettings().setJavaScriptEnabled(true);             9                 //设置可以支持缩放10                 m_webView.getSettings().setSupportZoom(true);//设置出现缩放工具11                 m_webView.getSettings().setBuiltInZoomControls(true);12                 //载入URL13                 m_webView.loadUrl("http://m.blog.csdn.net/blog/jackyvincefu/");14                 //使页面获得焦点15                 m_webView.requestFocus();16                 //如果页面中链接，如果希望点击链接继续在当前browser中响应17                 m_webView.setWebViewClient(new WebViewClient(){       18                     public boolean shouldOverrideUrlLoading(WebView view, String url) {   19                         if(url.indexOf("tel:")<0){20                             view.loadUrl(url); 21                         }22                         return true;       23                     }    24                 });25                 26                 //背景图27                 m_imageView = new ImageView(test);28                 m_imageView.setImageResource(R.drawable.bkgnd);29                 m_imageView.setScaleType(ImageView.ScaleType.FIT_XY);30                 //初始化线性布局 里面加按钮和webView31                 m_topLayout = new LinearLayout(test);      32                 m_topLayout.setOrientation(LinearLayout.VERTICAL);33                 //初始化返回按钮34                 m_backButton = new Button(test);35                 m_backButton.setBackgroundResource(R.drawable.btn);36                 LinearLayout.LayoutParams lypt=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);37                 lypt.gravity=Gravity.RIGHT;38                 m_backButton.setLayoutParams(lypt);            39                 m_backButton.setOnClickListener(new OnClickListener() {                    40                     public void onClick(View v) {41                         removeWebView();42                     }43                 });44                 //把image加到主布局里45                 m_webLayout.addView(m_imageView);46                 //把webView加入到线性布局47                 m_topLayout.addView(m_backButton);48                 m_topLayout.addView(m_webView);                49                 //再把线性布局加入到主布局50                 m_webLayout.addView(m_topLayout);51             }52         });53     }

2.5.移除webview

1     public void removeWebView() {               2         m_webLayout.removeView(m_imageView); 3         m_imageView.destroyDrawingCache(); 4          5         m_webLayout.removeView(m_topLayout); 6         m_topLayout.destroyDrawingCache(); 7                  8         m_topLayout.removeView(m_webView); 9         m_webView.destroy();10                 11         m_topLayout.removeView(m_backButton);12         m_backButton.destroyDrawingCache();13     }

2.6.重写返回键

1     public boolean onKeyDown(int keyCoder,KeyEvent event) 2     { 3         //如果网页能回退则后退，如果不能后退移除WebView 4         if(m_webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){ 5             m_webView.goBack(); 6         }else{ 7             removeWebView(); 8         } 9         return false;      10     }

3.cocos2d-x使用Jni

这里直接使用HelloWorld的示例，修改了close按钮的回调函数。

3.1.jni头文件

1 #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)2 #include 
     
      3 #include "platform/android/jni/JniHelper.h"4 #endif
     

3.2.Jni调用打开webview

1 void HelloWorld::menuCloseCallback(CCObject* pSender) 2 { 3 #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID) 4     JniMethodInfo minfo; 5     //getStaticMethodInfo，判断Java静态函数是否存在，并且把信息保存到minfo里 6     //参数1：JniMethodInfo 7     //参数2：Java类包名+类名 8     //参数3：Java函数名称 9     //参数4：函数参数类型和返回值类型10     bool isHave = JniHelper::getStaticMethodInfo(minfo,"com/jacky/test/Test","getInstance","()Lcom/jacky/test/Test;");11     jobject jobj;//存对象12     if (isHave) {13         //这里的调用getInstance，返回Test类的对象。14         jobj = minfo.env->CallStaticObjectMethod(minfo.classID, minfo.methodID);15 16         isHave = JniHelper::getMethodInfo(minfo,"com/jacky/test/Test","openWebview","()V");17         if (isHave) {18             //调用openWebview, 参数1：Test对象   参数2：方法ID19             minfo.env->CallVoidMethod(jobj, minfo.methodID);20         }21     }22 #else23     CCDirector::sharedDirector()->end();24 #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)25     exit(0);26 #endif27 #endif28 }

4.效果图

爪机截屏的。

 

ps：这里没有处理多次打开webview的情况。可以采用Jni方法来通知cocos2d-x，也可以直接在主类中设置一个成员变量标志位，调用openWebview时设置为true，removeWebView时设置为false，在调用openWebview时检测这个标志位来决定是否打开即可。

5.源码下载

包含win32，android代码，拿掉了android交叉编译生成的obj，保留so和apk文件。

下载地址：

 

 

原文链接：http://blog.csdn.net/jackystudio/article/details/17576995