開發原生安卓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:\project\201712cordovaTest\code\capp1\act1-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'

 

解決後再插上手機調試，此次終於成功了

點擊左上角按鈕

會跳轉到下個界面

 

到此開發完成