ionic4中文教程 如何为ionic webapp开发自定义外挂

如何为ionic webapp开发自定义外挂  

如何为ionic webapp开发自定义外挂

安装cordova外挂管理工具，plugman
在终端中输入：
npm install -g plugman
安装命令与安装结果如下：
2
新建一个外挂myEcho，用弹出框来显示我们的内容。
plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
把其中的<pluginName>替换为 myEcho;
<pluginID> 替换为 .lulee007.myEcho
<version> 替换为 0.0.1
[--path <directory>] [--variable NAME=VALUE] 这两个是可选引数，这里不写了。这样会在当前目录下（desk）建立一个新的目录myEcho
在终端中输入：
plugman create --name myEcho --plugin_id .lulee007.myEcho --plugin_version 0.0.1
执行命令后会在当前目录下生成一个资料夹，我这里的目录是在桌面下的myEcho.
3
向myEcho专案中新增一个android平台
plugman platform add --platform_name <platform>
把<platform>替换为 android
接着在终端中继续输入：
cd myEcho
然后输入：
plugman platform add --platform_name android
这时候检视我们的myEcho目录下的 src会新增一个目录android里面会有一个java档案：myEcho.java
END
外挂专案修改配置
专案结构组成：
src 对应不同的平台， 放我们的 javascript 档案，plugin.xml 是外挂的配置档案。
2
先来看看配置档案：plugin.xml
解释一下关键的几个元素：
id: 外挂的标识，即一开始我们新建外挂输入的 ID，.lulee007.myEcho
name：外挂的名称，新建外挂时输入的名称，myEcho
description：描述资讯
js-module：对应我们的 javascript 档案，src 属性指向 /myEcho.js
platform：支援的平台，这里仅有一个 android，这是刚才我们通过“ plugman platform add --platform_name android ”新增进来的。
其中android下的config-file：
这里是android外挂的配置资讯，当安装到应用时，会新增到目标平台android下的 res/xml/config.xml 档案中，并将 src/android/myEcho.java，复制到 android 的 package 包中。
3
看下javascript档案：myEcho.js
档案内容很简单，第一句是引入cordova下的exec库
第二句是我们外挂的执行外挂方法，
exec(suess, error, "myEcho", "coolMethod", [arg0]);
suess:呼叫成功时的回拨函式，
error:调用出错时的回拨函式，
"myEcho"：外挂名称，
"coolMethod"：执行外挂里的方法，
[arg0]：可选引数，执行方法的引数阵列。
这里我们把“exports.coolMethod”改为“window.plugins.myEcho”
并在“exports.coolMethod”上面新增一行：
window.plugins = window.plugins || {};
同样把“coolMethod”也改为“echo”。
最终修改后的js档案内容如图：
4
接着修改myEcho.java档案
可以看到myEcho继承自CordovaPlugin，并重载了execute方法。
在execute方法里有个判断，action.equals("coolMethod")，这表示如果执行的是我们的方法那就继续执行内部的逻辑并返回true，如果不是则直接返回false结束。
这里我们修改下方法：“coolMethod”为“echo”,并把方法coolMethod名称修改为echo。
最终修改后的java档案内容如下：
END
安装测试外挂
这里用事先准备好的ionic专案myFirstApp来测试我们的外挂。
这里不再赘述ionic专案的建立，具体可以参考我的另一篇经验。
直接在百度经验里搜寻：如何用ionicframework进行混合移动应用开发
第一篇就是。
开启终端，在终端中输入：
cd myFirstApp
切换到myFirstApp目录下
输入：
cordova plugin add ../myEcho
显示已经安装myEcho外挂到ios和android平台下
开启myFirstApp目录，可以看到在plugins目录下多了一个.lulee007.myEcho目录。
开启myFirstApp目录下的/js/controllers.js
新增如下程式码到最后“PlaylistCtrl”位置：
window.plugins.myEcho("echo my text",
function(data){
alert(data);
},
function(error){
alert(error);
});
重新build然后run进行除错：
在终端里输入：
ionic build android
然后输入：
ionic run --device android
执行命令后结果如下图：
这时android装置上已经运行了我们的应用：
随便点选list的一个项，会弹出一个对话方块，内容是“echo my text”
最后如果我们在测试中需要对外挂进行更新，这时候只需要执行命令：
cordova plugin remove .lulee007.myEcho
这里的“.lulee007.myEcho”就是我们最开始新建外挂的时候的外挂ID。
重新安装还是这个命令：
cordova plugin add path/to/your/plugin/dir
把“path/to/your/plugin/dir”替换为自己的外挂的目录就好了。

ionic是一款基于angularjs的5移动app开发框架phonegap就是一款可以打包并且可以让js呼叫原生的移动app框架。

ionic实现自定义外挂

环境配置

Node.js的安装，ionic的安装这里不再赘述，预设大家都安装配置好了环境。
1.1. 安装plugman新建外挂,终端输入。

新建一个自定义外挂DZFPlugin。

接下来向DZFPlugin专案中新增Android和ios平台，把platform替换为android和ios即可，首先进入外挂档案路径，cd DZFPlugin。

.安装自定义外挂

用事先建立好的ionic专案进行自定义外挂的测试，具体ionic专案的建立。

此时工程专案的plugins下会看到自己的外挂，前提是已经安装成功了。