如何將weex集成至已有項(xiàng)目
1.在app level的build.gradle中添加依賴庫(kù)
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
testCompile 'junit:junit:4.12'
compile 'com.android.support:recyclerview-v7:25.3.1'
compile 'com.android.support:support-v4:25.3.1'
compile 'com.alibaba:fastjson:1.1.57.android'
compile 'com.taobao.android:weex_sdk:0.11.0@aar'
2.實(shí)現(xiàn)IWXImgLoaderAdapter接口
package reed.demoweex;
import android.widget.ImageView;
import com.taobao.weex.adapter.IWXImgLoaderAdapter;
import com.taobao.weex.common.WXImageStrategy;
import com.taobao.weex.dom.WXImageQuality;
/**
* Created by thinkreed on 2017/5/26.
*/
public class ImageAdapter implements IWXImgLoaderAdapter {
@Override
public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
}
}
3.實(shí)現(xiàn)一個(gè)WXApplication類
package reed.demoweex;
import android.app.Application;
import com.taobao.weex.InitConfig;
import com.taobao.weex.WXSDKEngine;
/**
* Created by thinkreed on 2017/5/26.
*/
public class WXApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this, config);
}
}
4.選擇MainActivity作為weex的遠(yuǎn)程渲染頁(yè)面
package reed.demoweex;
import android.Manifest;
import android.content.pm.PackageManager;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.ActivityCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import java.util.HashMap;
import java.util.Map;
public class MainActivity extends AppCompatActivity implements IWXRenderListener {
private static final int REQUEST_CODE_FOR_MODIFY_INTERNET = 0;
private static final int REQUEST_CODE_FOR_ACCESS_NETWORK_STATE = 1;
private static String TEST_URL = "http://dotwe.org/raw/dist/6fe11640e8d25f2f98176e9643c08687.bundle.js";
WXSDKInstance mWXSDKInstance;
private FrameLayout mContainer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
checkApiVersionAndPermission();
mContainer = (FrameLayout) findViewById(R.id.container);
mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.registerRenderListener(this);
/**
* 第一個(gè)參數(shù)pageName:自定義的String類型包名浅缸,這里命名為demoweex
* 第二個(gè)參數(shù)url:遠(yuǎn)程bundle js文件既.we 文件經(jīng)過(guò)transform之后的js文件的下載地址,這里使用weex官方提供的示例
* 第三個(gè)參數(shù)options:初始化時(shí)傳入WEEX的參數(shù)残制,比如 bundle JS文件地址
* 第四個(gè)參數(shù)jsonInitData,可傳null值
* 第五個(gè)參數(shù)flag:渲染策略设江。WXRenderStrategy.APPEND_ASYNC:異步策略先返回外層View悦荒,其他View渲染完成后調(diào)用onRenderSuccess。
* WXRenderStrategy.APPEND_ONCE 所有控件渲染完后后一次性返回。
*/
Map<String, Object> options = new HashMap<>();
options.put(WXSDKInstance.BUNDLE_URL, TEST_URL);
mWXSDKInstance.renderByUrl("demoweex",TEST_URL,options,null,WXRenderStrategy.APPEND_ONCE);
}
@Override
public void onViewCreated(WXSDKInstance instance, View view) {
if (view.getParent() != null) {
((ViewGroup) view.getParent()).removeView(view);
}
mContainer.addView(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 onStart() {
super.onStart();
if (mWXSDKInstance != null) {
mWXSDKInstance.onActivityStart();
}
}
@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();
}
}
private void checkApiVersionAndPermission() {
int currentVersion = android.os.Build.VERSION.SDK_INT;
if (currentVersion >= Build.VERSION_CODES.M) {
if (ActivityCompat.checkSelfPermission(this,
Manifest.permission.INTERNET) != PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions(this,
new String[] {Manifest.permission.INTERNET},
REQUEST_CODE_FOR_MODIFY_INTERNET);
}
if (ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_NETWORK_STATE) != PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions(this,
new String[] {Manifest.permission.ACCESS_NETWORK_STATE},
REQUEST_CODE_FOR_ACCESS_NETWORK_STATE);
}
}
}
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions,
@NonNull int[] grantResults) {
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
switch (requestCode) {
case REQUEST_CODE_FOR_MODIFY_INTERNET:
if (grantResults.length <= 0
|| grantResults[0] != PackageManager.PERMISSION_GRANTED) {
// TODO: 16/5/26 not decide yet....request again or close the application
}
break;
case REQUEST_CODE_FOR_ACCESS_NETWORK_STATE:
if (grantResults.length <= 0
|| grantResults[0] != PackageManager.PERMISSION_GRANTED) {
// TODO: 16/5/26 not decide yet....request again or close the application
}
break;
default:
break;
}
}
}
activity_main布局文件如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_network"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
</RelativeLayout>
5.在AndroidManifest.xml中加上需要的INTERNET權(quán)限以及指定application為WXApplication
<uses-permission android:name="android.permission.INTERNET"/>
android:name=".WXApplication"
以上步驟完成读跷,在android studio中ctrl + r啊掏,將項(xiàng)目調(diào)試運(yùn)行蠢络,結(jié)果如下:
image.png