zoukankan      html  css  js  c++  java
  • 开发原生安卓cordova插件(有原生界面)

    上文开发的插件没有调用原生界面,本文介绍开发带有activity的插件

    本文很多操作与上文重复,重复部分会省略

    首先打开plug1,先开发插件的原生代码

    在以下命名空间创建一个activity

    名称为Act1Activity

    添加成功后,修改此文件

    内容如下:

    package com.cesc.ewater.cordovaPlugin;

    import android.support.v7.app.AppCompatActivity;

    import android.os.Bundle;

    import android.widget.TextView;

    import com.cesc.ewater.plug1.R;

    public class Act1Activity extends AppCompatActivity {

        @Override

        protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.activity_act1);

            //以下实现获取打开此Activity时传进来的参数值(参数的key是thisText),并显示到一个TextView

            TextView txt = (TextView) this.findViewById(R.id.txtInput);

            txt.setText(this.getIntent().getStringExtra("thisText"));

        }

    }

    再修改他的layout,文件在此

    内容如下:

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:app="http://schemas.android.com/apk/res-auto"

        xmlns:tools="http://schemas.android.com/tools"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        tools:context="com.cesc.ewater.cordovaPlugin.Act1Activity">

        <LinearLayout

            android:layout_width="368dp"

            android:layout_height="495dp"

            android:orientation="vertical"

            tools:layout_editor_absoluteX="8dp"

            tools:layout_editor_absoluteY="8dp">

            <TextView

                android:id="@+id/textView"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:text="下面是传入参数例子" />

            <TextView

                android:id="@+id/txtInput"

                android:layout_width="match_parent"

                android:layout_height="wrap_content" />

        </LinearLayout>

    </android.support.constraint.ConstraintLayout>

    再创建plugin,类名为Act1Plugin,新建成功如下:

    把文件内容修改为:

    package com.cesc.ewater.cordovaPlugin;

    import android.content.Intent;

    import org.apache.cordova.CallbackContext;

    import org.apache.cordova.CordovaArgs;

    import org.apache.cordova.CordovaPlugin;

    import org.json.JSONArray;

    import org.json.JSONException;

    public class Act1Plugin extends CordovaPlugin {

        @Override

        public boolean execute(String action, String rawArgs, CallbackContext callbackContext) throws JSONException {

            return super.execute(action, rawArgs, callbackContext);

        }

        @Override

        public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

            return super.execute(action, args, callbackContext);

        }

        @Override

        public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {

            if (action.equals("show")) {

                //以下用原生代码打开一个Act1Activity(可以理解为让界面跳转到Act1Activity这个界面)

                //PS:原生很多地方都要获取当前Activity的实例对象(如果在Activity里就用this),在CordovaPlugin用的是cordova.getActivity()

                Intent intent = new Intent(cordova.getActivity(), Act1Activity.class);

                //传入参数,参数分别是key和value

                intent.putExtra("thisText", "哈哈哈");

                cordova.getActivity().startActivity(intent);

                return true;

            }

            return false;

        }

    }

    到此插件编码完成,以上编码的功能意思为,调用插件Act1Plugin时,会跳转到原生安卓界面Act1Activity

    回到capp1,开始创建插件

    命令行进入capp1目录,执行以下命令创建插件,插件命名为act1-plugin

    plugman create --name act1-plugin --plugin_id act1-plugin --plugin_version 1.0.0

    在新建的插件文件夹下创建android文件夹

    把插件相关的类文件和layout文件都拷到此目录下

    PS:不用管原来的文件目录结构,都放在此目录下就行

    然后开始编辑plugin.xml ,修改成以下的内容(提供全文内容可以直接复制)

    <?xml version='1.0' encoding='utf-8'?>

    <plugin id="act1-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

        <!--插件名-->

           <name>act1-plugin</name>

           <!--js部分配置-->

        <js-module name="Act1Plugin" src="www/act1-plugin.js">

                  <!--js调用的对象名-->

            <clobbers target="Act1Plugin" />

        </js-module>

          

           <!--添加安卓平台-->

        <platform name="android">

            <config-file target="res/xml/config.xml" parent="/*"> 

                         <!--js调用的对象名-->

                <feature name="Act1Plugin">

                                <!-- value=java类名全路径-->

                    <param name="android-package" value="com.cesc.ewater.cordovaPlugin.Act1Plugin"/>

                </feature> 

            </config-file> 

                  <!-- src:java源文件的路径, target-dir:插件安装好后,源文件的位置,要和上面的包名对应 -->

                  <!--跟插件所有有关的类文件,layout文件等等都要一一配置在下方-->

            <source-file src="src/android/Act1Plugin.java" target-dir="src/com/cesc/ewater/cordovaPlugin" /> 

                  <source-file src="src/android/Act1Activity.java" target-dir="src/com/cesc/ewater/cordovaPlugin" /> 

                  <!--添加layout文件的例子,注意target-dir的值与改文件在as的目录是一样的-->

                  <source-file src="src/android/activity_act1.xml" target-dir="res/layout" />    

        </platform>

    </plugin>

    然后开始编辑此文件

    内容如下,可以直接复制进去,

    var exec = require('cordova/exec');

    //一个exports.XXX代表插件的一个方法,exports后面和exec方法的参数4都是方法名称(此例都是show)

    var exec = require('cordova/exec');

    //一个exports.XXX代表插件的一个方法,exports后面和exec方法的参数4都是方法名称(此例都是show)

    exports.show = function (arg0, success, error) {

           //参数1和参数2分别是调用插件成功和失败的回调方法(js)

           //参数3是插件名

           //参数4是方法名

           //参数5是js的传参

        exec(success, error, 'Act1Plugin', 'show', [arg0]);

    };

    打开控制台,进入插件目录,执行npm init

    完成后插件目录多了个package.json文件,开始编辑他

    添加此部分,下面有文本内容

    PS:id是插件名称

      "cordova": {

        "id": "act1-plugin",

        "platforms": [

          "android"

        ]

      },

    插件修改到此结束,开始把插件添加到cordova应用

    控制台进入capp1的安卓平台目录,输入以下命令cordova plugin add E:project201712cordovaTestcodecapp1act1-plugin,命令中的路径是插件的目录

    PS:此命令意思是把某个目录的插件添加capp1的cordova应用

    成功后capp1会多了如下文件,可以见到插件的文件

    到此完成添加插件到cordova应用

    接下来开始修改h5应用代码,在h5应用中使用js调用插件

    打开vue1

    找到主页的js文件

    添加代码:Act1Plugin.show();

    修改代码完毕,npm build一下

    PS:从这段操作开始,在之前的 使用cordova把h5应用打包成apk 已经有说明,也就是h5应用修改后,通过一系列操作把他打包成apk,但在此也重复说明一次

    打开www(用webstrom打开,之前有说过),把刚才生成的文件拷过去

    PS:注意每次build生成的文件都会有一堆随机数,如果随机数变了就说明该文件内容有修改所以重新生成,反之就没变

    然后修改indel.html文件里引用文件的文件名

    然后开始cordova打包apk,命令行进入capp1的目录,运行命令cordova build android

    然后build一下,会发现很多报错

    这是因为capp1只有cordova的基础引用,跟完整的安卓应用的代码还是缺少很多引用

    例如Act1Activity会报不能引用android.support.v7.app.AppCompatActivity

    PS:以下解决编译错误的方法,估计不具有普遍性,解决以下问题需要一定的原生安卓开发能力

    把基类改为Activity

    然后import com.cesc.ewater.plug1.R有错

    把import com.cesc.ewater.plug1.R删掉,对R使用alt+enter import class

    此时build没错了,插上手机,开始调试

    PS:其实还有问题的,只是暂时还看不出来

    手机开始调试,点击左上角的按钮,但是没有效果,在logcat发现报错

    错误大意是找不到Act1Activity,后面还提示是否在AndroidManifest.xml里配置了此Activity

    于是去capp1的AndroidManifest.xml,配置Act1Activity

    <activity android:name="com.cesc.ewater.cordovaPlugin.Act1Activity" />

    然后再次调试,这次app直接崩掉,logcat报错,其中看到Didn't find class "android.support.constraint.ConstraintLayout,意思是找不到ConstraintLayout

    回到plug1,可以发现上面的类的引用配置

    把这行拷到capp1的相同文件的相同位置

    拷完后build一下,发现报错

    这原因是plug1的gradle是4.1,而capp1是2.14.1,不同版本的gradle配置文件语法不同,因此这行应该修改成

    compile  'com.android.support.constraint:constraint-layout:1.0.2'

    解决后再插上手机调试,这次终于成功了

    点击左上角按钮

    会跳转到下个界面

    到此开发完成

  • 相关阅读:
    elasticsearch 中的Multi Match Query
    activiti 流程部署的各种方式
    elasticsearch 嵌套对象之嵌套类型
    elasticsearch Java High Level REST 相关操作封装
    elasticsearch 字段数据类型
    ubuntu 安装 docker
    elasticsearch 通过HTTP RESTful API 操作数据
    facenet 人脸识别(二)——创建人脸库搭建人脸识别系统
    POJ 3093 Margaritas(Kind of wine) on the River Walk (背包方案统计)
    墨卡托投影, GPS 坐标转像素, GPS 坐标转距离
  • 原文地址:https://www.cnblogs.com/cannel/p/11074383.html
Copyright © 2011-2022 走看看