• 开发原生安卓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'

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

    点击左上角按钮

    会跳转到下个界面

    到此开发完成

  • 相关阅读:
    asp.net的处理机制(.ashx/.aspx)
    docker使用记录二:mysql安装与配置
    docker使用记录一日常使用的命令
    git笔记十:本地仓库同步到gitlab
    git使用记录九:开发中临时加塞了紧急任务怎么处理
    git使用记录八:不同提交的指定文件的差异
    git使用记录七:对工作区和暂存区的一些操作场景
    git使用记录六:对commit的message做处理
    git使用记录四:.git分析
    git使用记录三:查看日志
  • 原文地址:https://www.cnblogs.com/cannel/p/11074383.html
Copyright © 2020-2023  润新知