已有Android工程集成DCloud页面

DCloud

本文的合集已经编著成书,高级Android开发强化实战,欢迎各位读友的建议和指导。在京东即可购买:https://item.jd.com/12385680.html

Android

DCloud是HTML5开发App的一个模式, 由国人开发的, 介绍就不多说了, 直接官网看吧.
网址: http://www.dcloud.io/

优势呢, 就是支持一些常见的国产第三方库, 如微信, 微博, 高德一类的.
劣势呢, 竟然不能直接用gradle加载库, 没有使用maven管理! 文档也不是很详细.

那么我们怎么集成到项目里呢? 我们就拿HelloWorld来测试一下.

1. 准备

首先下载SDK代码
http://download.dcloud.net.cn/Android-SDK@1.9.6.19855_20150921.zip

直接解压就行, 我们需要熟悉的是HBuilder-Integrate这个工程.

新建一个崭新的HelloWorld工程.
依次需要添加libs, assets, jniLibs, 没有则在工程内创建对应的文件夹.
加载依赖Jar包, 把HBuilder-Integrate的libs的内容全部复制到新的工程.

加载libs库(build.gradle, 默认): compile fileTree(dir: 'libs', include: ['*.jar'])
注意: 如果类出现冗余冲突, 则把jar包删掉即可. 因为库较多, 所以必然会和已有的库冲突, 删掉冲突的即可. 当然在实际的开发中, 也不必全部引入, 需要什么加载什么就行.

把assets的内容全部复制到新的工程.

assets内容就是H5的页面, 在main下新建assets文件夹就行.

把jniLibs的内容全部复制到新的工程.

在AndroidManifest中添加权限, 因为Demo用的功能较多, 权限特别多!

准备工作已经完成.

2. 修改工程

修改项目的layout, 添加一个FrameLayout, 用来加载H5页面.

<RelativeLayout...>

    ...
    
    <FrameLayout
        android:id="@+id/js_contaner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

MainActivity中添加H5的内容.
先复制WebAppMode类, 用于连接Activity和H5页面, 不用修改.

再添加代理

    private EntryProxy mEntryProxy;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ...

        if (mEntryProxy == null) {
            FrameLayout f = (FrameLayout) findViewById(R.id.js_contaner);
            wm = new WebappMode(this, f);
            mEntryProxy = EntryProxy.init(this, wm);
            mEntryProxy.onCreate(savedInstanceState, SDK.IntegratedMode.WEBAPP, wm);
        }
    }

    @Override
    public void onPause() {
        mEntryProxy.onPause(this);
        super.onPause();
    }

    @Override
    public void onResume() {
        super.onResume();
        mEntryProxy.onResume(this);
    }

    @Override
    protected void onDestroy() {
        mEntryProxy.onStop(this);
        super.onDestroy();
    }

注意: onDestroy调用的是onStop, 这样在后退时不会完全关闭连接, 启动时就可以直接加载. 否则会出现后退之后, 无法加载, 空页面的情况.

3. 效果

OK, 启动一下看看效果吧!

HTC5.0测试效果

DCloud的Demo写的还可以, 里面的功能比较丰富.

OK, enjoy it.

推荐阅读更多精彩内容