EMAS提供WindVane供您集成应用,以实现通过WindVane集成H5应用。本文介绍如何在Android端集成WindVane。
初始化
在
app/build.gradle
文件中添加依赖。implementation ('com.emas.hybrid:emas-hybrid-android:1.1.0.2-public') {transitive true}
添加权限
activity
。<activity android:name="android.taobao.windvane.runtimepermission.PermissionActivity" />
在
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
在您布局文件中添加一个Framelayout,示例如下:
<FrameLayout android:id="@+id/root" android:layout_width="match_parent" android:layout_height="match_content"> </FrameLayout>
在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中。
在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());