Weex入门教程之6，Weex与Native（原生开发）混合开发

代码示例

BaseActivity.java

package com.weex.activity;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKInstance;

/**
*
* Created by aaron on 2017/2/6.
*/

public class BaseActivity extends AppCompatActivity implements IWXRenderListener {

WXSDKInstance mWXSDKInstance;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.registerRenderListener(this);
}

@Override
public void onViewCreated(WXSDKInstance instance, View view) {
setContentView(view);
}

@Override
public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
}

@Override
public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
}

@Override
public void onException(WXSDKInstance instance, String errCode, String msg) {
}

@Override
protected void onResume() {
super.onResume();
if (mWXSDKInstance != null) {
mWXSDKInstance.onActivityResume();
}
}

@Override
protected void onPause() {
super.onPause();
if (mWXSDKInstance != null) {
mWXSDKInstance.onActivityPause();
}
}

@Override
protected void onStop() {
super.onStop();
if (mWXSDKInstance != null) {
mWXSDKInstance.onActivityStop();
}
}

@Override
protected void onDestroy() {
super.onDestroy();
if (mWXSDKInstance != null) {
mWXSDKInstance.onActivityDestroy();
}
}
}

WXPageActivity.java

package com.weex.activity;

import android.app.Activity;
import android.graphics.Rect;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.ActionBar;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.taobao.weex.RenderContainer;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import com.taobao.weex.utils.WXFileUtils;
import com.weex.R;

import org.xutils.common.Callback;
import org.xutils.http.RequestParams;
import org.xutils.x;

/**
*
* Created by aaron on 2017/2/21.
*/

public class WXPageActivity extends  BaseActivity{

private static final String TAG = "WXPageActivity";
private ViewGroup mContainer;
private ProgressBar mProgressBar;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_wxpage);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setTitle("layout与weex混合使用");
mContainer = (ViewGroup) findViewById(R.id.container);
mProgressBar = (ProgressBar) findViewById(R.id.progress);
loadWXfromLocal(true);

}

private void loadWXfromService(final String url) {
mProgressBar.setVisibility(View.VISIBLE);
if (mWXSDKInstance != null) {
mWXSDKInstance.destroy();
}
RenderContainer renderContainer = new RenderContainer(this);
mContainer.addView(renderContainer);
mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.setRenderContainer(renderContainer);
mWXSDKInstance.registerRenderListener(this);
mWXSDKInstance.setBundleUrl(url);
mWXSDKInstance.setTrackComponent(true);
RequestParams params = new RequestParams(url);
x.http().get(params, new Callback.CommonCallback<String>() {
@Override
public void onSuccess(String result) {
Toast.makeText(x.app(), result, Toast.LENGTH_LONG).show();
Log.i(TAG, "into--[http:onSuccess] url:" + url);
mWXSDKInstance.render("WXSample", result, null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
}

@Override
public void onError(Throwable ex, boolean isOnCallback) {
mProgressBar.setVisibility(View.GONE);
Toast.makeText(x.app(), ex.getMessage(), Toast.LENGTH_LONG).show();
}

@Override
public void onCancelled(CancelledException cex) {
Toast.makeText(x.app(), "cancelled", Toast.LENGTH_LONG).show();
}

@Override
public void onFinished() {
}
});
}

@Override
public void onViewCreated(WXSDKInstance instance, View view) {
//重点在这里，加载js引擎解析js成view到mContainer容器
if(view.getParent() == null) {
mContainer.addView(view);
}
mContainer.requestLayout();
Log.d("WARenderListener", "renderSuccess");
}

@Override
public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
mProgressBar.setVisibility(View.INVISIBLE);
}

@Override
public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
mProgressBar.setVisibility(View.GONE);
}

@Override
public void onException(WXSDKInstance instance, String errCode,
String msg) {
mProgressBar.setVisibility(View.GONE);
}

private void loadWXfromLocal(boolean reload) {
if (reload && mWXSDKInstance != null) {
mWXSDKInstance.destroy();
mWXSDKInstance = null;
}
if (mWXSDKInstance == null) {
RenderContainer renderContainer = new RenderContainer(this);
mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.setRenderContainer(renderContainer);
mWXSDKInstance.registerRenderListener(this);
mWXSDKInstance.setTrackComponent(true);
}
mContainer.post(new Runnable() {
@Override
public void run() {
Activity ctx = WXPageActivity.this;
Rect outRect = new Rect();
ctx.getWindow().getDecorView().getWindowVisibleDisplayFrame(outRect);
mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("build/mainTest.js", WXPageActivity.this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
}
});
}

}

activity_wxpage.xml

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"/>

</android.support.design.widget.AppBarLayout>

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<!--这里加载js文件编译成的view-->
</FrameLayout>

<ProgressBar
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone"/>

</FrameLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="400dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="hello word!"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="我是原生的啊"/>
</LinearLayout>

</android.support.design.widget.CoordinatorLayout>

styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

</resources>

效果图