Android+H5开发

安卓和h5混合开发(这里只是记录一下这几天的成果,有的逻辑自己也不太清楚,只是记录一下流程,其他的一些解释什么的等弄明白了再回来补上),这里参考的是appcan官网(吐槽一下,文档写的真不咋地)
1.新建一个安卓项目
2.修改目录结构如下
Android+H5开发_第1张图片
3.将html文件放到assets下,并且将官方demo中的idea文件夹和config.xml(主要目的是设置进入的主页面)拷贝过来
Android+H5开发_第2张图片
4.添加arr依赖(直接从官网拷贝)
这里写图片描述
5.将demo中的xml文件夹拷贝到res目录下(plugin.xml主要是对继承自EUExBase的类中的方法进行注册)
Android+H5开发_第3张图片
plugin.xml代码为


<uexplugins>
    <plugin
        //className:项目的主类,继承EUExBase;uexName:插件名称,可以随意取
        className="main.java.com.ysg.myapplication.EUExMyDemo" uexName="uexDemo" >
        //EUExMyDemo中添加的方法
        <method name = "test_startActivityForResult" />
    plugin>
uexplugins>

6.配置build.gradle如下

apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion "25.0.2"
    defaultConfig {
        //根据官网提示这里建议都是14
        minSdkVersion 14
        targetSdkVersion 14
        multiDexEnabled true
    }
    lintOptions {
        abortOnError false
    }
    packagingOptions {
        exclude 'META-INF/LICENSE.txt'
        exclude 'META-INF/NOTICE.txt'
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    sourceSets {
        main {
            manifest.srcFile 'AndroidManifest.xml'
            java.srcDirs = ['src']
            resources.srcDirs = ['src']
            aidl.srcDirs = ['src']
            renderscript.srcDirs = ['src']
            res.srcDirs = ['res']
            assets.srcDirs = ['assets']
            jniLibs.srcDirs = ['libs']
        }
        // Move the tests to tests/java, tests/res, etc...
        instrumentTest.setRoot('tests')

        // Move the build types to build-types/
        // For instance, build-types/debug/java, build-types/debug/AndroidManifest.xml, ...
        // This moves them out of them default location under src//... which would
        // conflict with src/ being used by the main source set.
        // Adding new build types or product flavors should be accompanied
        // by a similar customization.
        debug.setRoot('build-types/debug')
        release.setRoot('build-types/release')
    }
    dexOptions {
        jumboMode true
    }
    productFlavors {
    }

}
repositories {
    flatDir {
        dirs 'libs'
    }
    jcenter()
     maven {
        url 'https://raw.githubusercontent.com/android-plugin/mvn-repo/master/' //引擎aar仓库地址
    }
}

dependencies {
    compile fileTree(include: '*.jar', dir: 'libs')
    compile(name: 'engine-4.0.0-systemRelease', ext: 'aar')
//    防止v4和v7冲突
    compile('com.android.support:appcompat-v7:23.4.0') {
        exclude module: 'support-v4'
    }
}
apply from: "https://raw.githubusercontent.com/android-plugin/gradle-plugin/master/buildPlugin.gradle"

7.配置AndroidManifest.xml


<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="org.zywx.wbpalmstar.widgetone.dataservice"
    android:versionCode="1"
    android:versionName="3.0"
    tools:overrideLibrary="org.zywx.wbpalmstar.widgetone.uex">

    <application android:label="@string/app_name">
    
        <activity
            android:name="org.zywx.wbpalmstar.engine.LoadingActivity"
            android:configChanges="keyboardHidden|orientation"
            android:launchMode="standard"
            android:screenOrientation="portrait"
            android:theme="@style/browser_loading_theme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            intent-filter>
        activity>
        <activity android:name="main.java.com.ysg.myapplication.MainActivity">activity>
    application>

manifest>

8.在src的包下新建一个类继承EUExBase(这个类主要是执行html页面中点击方法的逻辑)

public class EUExMyDemo extends EUExBase {
    private static final int mMyActivityRequestCode = 1000;
    private int mFuncActivityCallback;

    public EUExMyDemo(Context context, EBrowserView eBrowserView) {
        super(context, eBrowserView);
    }

    // this case start a Activity: HelloAppCanNativeActivity
    public void test_startActivityForResult(String[] parm) {
        if (parm.length > 0) {
            mFuncActivityCallback = Integer.parseInt(parm[0]);
        }
        Intent intent = new Intent();
        intent.setClass(mContext, MainActivity.class);
        try {
            startActivityForResult(intent, mMyActivityRequestCode);
        } catch (Exception e) {
            Toast.makeText(mContext, "找不到此Activity!!", Toast.LENGTH_LONG)
                    .show();
        }
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == mMyActivityRequestCode) {
            JSONObject jsonObject = new JSONObject();
            try {
                if (resultCode == Activity.RESULT_OK) {
                    String ret = data.getStringExtra("result");
                    jsonObject.put("result", ret);
                } else {
                    jsonObject.put("result", "cancel");
                }
            } catch (JSONException e) {
                e.printStackTrace();
            }
            callbackToJs(mFuncActivityCallback, false, 0, jsonObject);
        }
    }
    @Override
    protected boolean clean() {
        return true;
    }
}

注释:这里我新建一个方法test_startActivityForResult(),该方法执行跳转到另一个页面并执行回调操作。并且这里每增加一个方法都需要在第五步的plugin.xml中进行注册
9.在html中添加功能

  <span>1.test_startActivityForResult接口span>
        
        <input class="btn" type="button" value="test_startActivityForResult"
               onclick="test_startActivityForResult()"><br>
<script>
 function test_startActivityForResult() {
        uexDemo.test_startActivityForResult(function (error, data) {
            if (!error){
                alert("返回结果是:"+data.result);
            }
        });
    }
script>

到此已经可以实现混合开发的基本流程了,以后还会继续完善的

荆轲刺秦王

你可能感兴趣的:(混合开发移动应用)