备案控制台
文档
产品文档
输入文档关键字查找
首页 移动研发平台 云发布 开发参考 接入发布H5应用的SDK Android端接入

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());

文档推荐
  • 本页导读 （0）
文档反馈