Android端接入

EMAS提供WindVane供您集成应用,以实现通过WindVane集成H5应用。本文介绍如何在Android端集成WindVane。

初始化

  1. app/build.gradle文件中添加依赖。

    implementation ('com.emas.hybrid:emas-hybrid-android:1.1.0.2-public') {transitive true}

  2. 添加权限activity

    <activity android:name="android.taobao.windvane.runtimepermission.PermissionActivity" />
  3. Application中合适的位置(一般是在onCreate方法中)初始化EmasHybrid。

    // 自定制适配器(可选)
    EmasHybrid.Config.Builder builder = new EmasHybrid.Config.Builder();
        builder.setNavigatorAdapter(new INavigatorAdapter() {
        
        }).setStorageAdapter(new IStorageAdapter() {
         
        });
    
    EmasHybrid.getInstance()
        .setOpenLog(true)
        .setAppKey(mAppkey)
        .setAppSecret(mAppSecret)
        .setTtid(mChannelID)
        .setAppVersion(BuildConfig.VERSION_NAME)
        .setZcacheEnable(true)// 如果需要开启zcache预加载
        .setZcacheUrl(mCacheURL)// zcache预加载拉取地址前缀
        .setConfig(builder.build())//自定制适配器,可选
        .init(application);
    说明
    • INavigatorAdapter Navigator模块,系统提供了pop/push的实现,也可以自定义。

    • IStorageAdatper Storage模块,系统提供了setItem/getItem/removeItem的默认实现,也可以自定义。

撰写容器Activity

为保证最大的集成灵活性,本SDK提供Fragment形式的H5容器,可以借助所提供的EmasHybridInstance将H5容器Fragment渲染至您的Activity任意合适的位置。示例代码如下:

public class WebViewSampleActivity extends BaseActivity {
    private Fragment webViewFragment;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview_sample);
  
        webViewFragment = EmasHybridWebViewHelper.getInstance().installWebView(
            this,
            Uri.parse("https://emas.xxx.com/"),
            R.id.root,
            new WVWebViewClient(this) {
                @Override
                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);
                }
            }, 
            null);
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && webViewFragment != null) {
            boolean result = EmasHybrid.getInstance().isUseUc()
                ? ((WVUCWebViewFragment) webViewFragment).onBackPressed()
                : ((WVWebViewFragment) webViewFragment).onBackPressed();
            return result || super.onKeyDown(keyCode, event);
        }
        return super.onKeyDown(keyCode, event);
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        webViewFragment.onActivityResult(requestCode, resultCode, data);
    }

    @Override
    protected void onPause() {
        webViewFragment.onPause();
        super.onPause();
    }

    @Override
    protected void onResume() {
        webViewFragment.onResume();
        super.onResume();
    }

    @Override
    protected void onDestroy() {
        webViewFragment.onDestroy();
        super.onDestroy();
    }
}

注册Activity

为保证内置的Navigator模块生效,请将您的Activity加入如下IntentFilter配置。

<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.BROWSABLE" />
    <category android:name="com.emas.android.intent.category.HYBRID" />
    <category android:name="android.intent.category.DEFAULT"/>

    <data android:scheme="http"/>
    <data android:scheme="https"/>
</intent-filter>
说明

data标签中的scheme取决于Navigator模块所需要跳转的scheme,您可以自定义更多。

将Fragment添加至Activity

  1. 在您布局文件中添加一个Framelayout,示例如下:

    <FrameLayout
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_content">
    </FrameLayout>
  2. 在Activity中使用EmasHybridInstance渲染Fragment。

    webViewFragment = EmasHybridWebViewHelper.getInstance().installWebView(this,
        getIntent().getData(),
        R.id.root,
        new WVWebViewClient(this){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }
        }, 
        null);
    说明

    渲染的URL保存在Intent的data中。

  3. 在Activity中添加返回键和回调处理。

    @Override
    public boolean onKeyDown(int keyCode, KeyEventevent) {
        if (keyCode == KeyEvent.KEYCODE_BACK&& webViewFragment != null) {
            boolean result = EmasHybrid.getInstance().isUseUc() ? ((WVUCWebViewFragment) webViewFragment).onBackPressed() : ((WVWebViewFragment) webViewFragment).onBackPressed();
            return result ||super.onKeyDown(keyCode, event);
        }
        return super.onKeyDown(keyCode,event);
    }
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (EmasHybrid.getInstance().isUseUc()) {
            ((WVUCWebViewFragment) webViewFragment).onActivityResult(requestCode, resultCode, data);
        } else {
            ((WVWebViewFragment) webViewFragment).onActivityResult(requestCode, resultCode, data);
        }
    }
    @Override
    protected void onPause() {
        if (EmasHybrid.getInstance().isUseUc()) {
            ((WVUCWebViewFragment) webViewFragment).onPause();
        } else {
            ((WVWebViewFragment) webViewFragment).onPause();
        }
        super.onPause();
    }
    @Override
    protected void onResume() {
        if (EmasHybrid.getInstance().isUseUc()) {
            ((WVUCWebViewFragment) webViewFragment).onResume();
        } else {
            ((WVWebViewFragment) webViewFragment).onResume();
        }
        super.onResume();
    }
    
    @Override
    protected void onDestroy() {
        if (EmasHybrid.getInstance().isUseUc()) {
            ((WVUCWebViewFragment) webViewFragment).onDestroy();
        } else {
            ((WVWebViewFragment) webViewFragment).onDestroy();
        }
        super.onDestroy();
    }

接入灰度SDK

app/build.gradle文件中添加依赖。

implementation "com.alibaba.mtl:dynamicconfigadapter:1.0.3-public"

标准事件机制

提供了Native和H5之间互发事件的标准通讯接口,便于各业务场景下的基于统一的事件模型来通讯。

  • Native向H5发送事件

    EMAS Hybrid提供了WVStandardEventCenter类,供Native向H5发送事件:

    参数中,webView是要发送事件的目标WebView,eventName是事件的名称(字符串),eventData是事件的数据(iOS是NSDictionary *,Android是一个JSON Object格式的String)。

    // 向指定WebView发送事件。
    WVStandardEventCenter.postNotificationToJS(webView,eventName, eventData);
    // 向所有 WebView 发送事件,请谨慎使用。
    WVStandardEventCenter.postNotificationToJS(eventName, eventData);

    随后前端中使用W3C的标准形式来接收事件。

    document.addEventListener('eventName', function(data) {
        // 这里要注意,Native传递过来的事件参数是在data的param属性中。
        alert(data.param);
    }, false);
  • H5向Native发送事件

    EMAS Hybrid提供了发送事件的JS API供前端调用。

    var params = {
        event: 'eventName',
        param: {
            // 事件要传递的数据。
        }
    }
    
    window.WindVane.call('WVStandardEventCenter','postNotificationToNative',params, function(e) {
        alert('success');
    }, function(e) {
        alert('failure: ' + JSON.stringify(e));
    });

    或者使用lib-emas的调用方式。

    emas.WVStandardEventCenter.postNotificationToNative({...})

    原生若需要接受事件,需要注册WVEventListener监听器。

    // 首先,需要自己实现监听用的 Listener。
    public class JsEventListener implementsWVEventListener {
    
        @Override
        public WVEventResult onEvent(int id, WVEventContext ctx, Object... obj) {
            // 所有事件均派发到这里,WVEventId.H5TONATIVE_EVENT表示 H5 发送过来的事件。
            if (id == WVEventId.H5TONATIVE_EVENT) {
                if (obj[0] instanceof String) {
                    String params = (String)obj[0];
                    // 这里的 params 是包含 event 和 param 的JSON String,需要自行反序列化。
                }
            }
            return null;
        }
    }
    
    // 然后,注册监听器。
    WVEventService.getInstance().addEventListener(new JsEventListener());