自定义Cordova插件-SweetAlertDialogPlugin

男娘i 2022-09-26 02:53 164阅读 0赞

最近公司把我从android组调到前端组来开发前端，公司用的框架是angularJS+ionic+cordova，我们知道用js写移动端，需求中免不了要调用android的相机、GPS、音频播放等功能，这时候我们就需要js和Java交互了，通过这个办法来调用android API。因此cordova给我提供了丰富的插件库，对于常用的插件我们可以去ngcordova官网看plugins，但是性能优化，很多的插件是满足不了我们实际开发的需要的，这时候我们怎么办呢，最好的办法就是自定义属于我们自己的插件。本篇博客为自定义插件抛砖引玉，来了解一下plugin到底是怎么写出来的。因为我主要做android，对于Java代码还是比较熟悉的，在开发过程中，通过使用

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ cordova plugin add xxx.xx.xx.cordova-plugin.imagePicker</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

cordova的插件时，在已添加的android platform中竟然插件完全变得跟android中library，这个让我很振奋，我想这样的话，我倒推回去，我写了很多的比较好的android library 按照道理同样可以写成插件来给自己用。所以经过我深入研究，发现这个是可以很容易实现的。恩恩，看到博客标题就知道我带着大家来实现一个关于dialog的plugin。

首先，我们来观察这个插件的构成。

\[SweetAlertDialogPlugin github地址\]  
([https://github.com/Eddieyuan123/SweetAlertDialog][https_github.com_Eddieyuan123_SweetAlertDialog])

![这里写图片描述][20151127085629709]  
src目录下有 android platform，android下有SweetAlertDialogPlugin.java文件，www下有SweetAlertDialogPlugin.js，根目录下有plugin.xml。因此得出结论插件必须要有这个文件。

plugin.xml

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><?xml version='1.0' encoding='utf-8'?>
 <plugin id="cn.pedant.sweetalert" version="1.0.0"
 xmlns="http://apache.org/cordova/ns/plugins/1.0"
 xmlns:android="http://schemas.android.com/apk/res/android">
 <name>SweetAlertDialog</name>
 
 <js-module name="SweetAlertDialog" src="www/SweetAlertDialog.js">
 <clobbers target="window.plugins.SweetAlertDialogPlugin" />
 </js-module><platform name="android">
 
 <config-file parent="/*" target="res/xml/config.xml">
 <feature name="SweetAlertDialogPlugin">
 <param name="android-package" value="cn.pedant.sweetalert.SweetAlertDialogPlugin" />
 </feature>
 </config-file>
 
 <config-file parent="/*" target="AndroidManifest.xml"></config-file>
 
 <source-file src="src/android/SweetAlertDialogPlugin.java" target-dir="src/cn/pedant/sweetalert" />
 <source-file src="src/android/OptAnimationLoader.java" target-dir="src/cn/pedant/sweetalert" />
 <source-file src="src/android/Rotate3dAnimation.java" target-dir="src/cn/pedant/sweetalert" />
 <source-file src="src/android/SuccessTickView.java" target-dir="src/cn/pedant/sweetalert" />
 <source-file src="src/android/SweetAlertDialog.java" target-dir="src/cn/pedant/sweetalert" />
 
 <source-file src="src/android/anim/dialog_scale_in.xml" target-dir="res/anim" />
 <source-file src="src/android/anim/dialog_scale_out.xml" target-dir="res/anim" />
 <source-file src="src/android/anim/error_frame_in.xml" target-dir="res/anim" />
 <source-file src="src/android/anim/error_x_in.xml" target-dir="res/anim" />
 <source-file src="src/android/anim/success_bow_roate.xml" target-dir="res/anim" />
 <source-file src="src/android/anim/success_mask_layout.xml" target-dir="res/anim" />
 
 <source-file src="src/android/drawable/blue_button_background.xml" target-dir="res/drawable" />
 <source-file src="src/android/drawable/custom_img.jpg" target-dir="res/drawable" />
 <source-file src="src/android/drawable/dialog_background.xml" target-dir="res/drawable" />
 <source-file src="src/android/drawable/error_center_x.xml" target-dir="res/drawable" />
 <source-file src="src/android/drawable/error_circle.xml" target-dir="res/drawable" />
 <source-file src="src/android/drawable/gray_button_background.xml" target-dir="res/drawable" />
 <source-file src="src/android/drawable/red_button_background.xml" target-dir="res/drawable" />
 <source-file src="src/android/drawable/success_bow.xml" target-dir="res/drawable" />
 <source-file src="src/android/drawable/success_circle.xml" target-dir="res/drawable" />
 <source-file src="src/android/drawable/warning_circle.xml" target-dir="res/drawable" />
 <source-file src="src/android/drawable/warning_sigh.xml" target-dir="res/drawable" />
 
 <source-file src="src/android/values/alert_strings.xml" target-dir="res/values" />
 <source-file src="src/android/values/alert_styles.xml" target-dir="res/values" />
 <source-file src="src/android/values/attrs.xml" target-dir="res/values" />
 <source-file src="src/android/values/alert_colors.xml" target-dir="res/values" />
 
 <source-file src="src/android/layout/alert_dialog.xml" target-dir="res/layout" />
 
 
 </platform>
 </plugin>
 </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li></ul>

这个文件的作用就是js和android的一些配置。下面慢慢来解释：

和Java交互的js文件，clobbers属性在angularJS中引用的名字。如何使用下面会详细说。

param属性的value值代表的是包下的class文件，名字是SweetAlertDialogPlugin，这里要特别注意，因为我刚刚开始写插件的时候这里犯错了。

下面的一些代码就是把src中的这些文件添加到android platform中各个文件夹中，学过android的一看就懂。比如

就是把alert\_dialog.xml 这个布局文件复制到layout文件下。

SweetAlertDialogPlugin.java

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">package cn.pedant.sweetalert;
 
 import com.ionicframework.tradeweb716543.TradeApp;
 
 import org.apache.cordova.CordovaPlugin;
 import org.apache.cordova.CallbackContext;
 
 import org.json.JSONArray;
 import org.json.JSONException;
 import org.json.JSONObject;
 
 /**
 * This class echoes a string called from JavaScript.
 */
 public class SweetAlertDialogPlugin extends CordovaPlugin {
 
 @Override
 public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
 if (action.equals("createNomalDialog")) {
 String message = args.getString(0);
 this.createNomalDialog(message, callbackContext);
 return true;
 }
 return false;
 }
 
 private void createNomalDialog(String message, CallbackContext callbackContext) {
 if (message != null && message.length() > 0) {
 new SweetAlertDialog(TradeApp.getInstance().getActivity(),
 SweetAlertDialog.NORMAL_TYPE)
 .showCancelButton(true)
 .setTitleText("sweet love")
 .setContentText("sweet sweet love")
 .show();
 
 callbackContext.success(message);
 } else {
 callbackContext.error("Expected one non-empty string argument.");
 }
 }
 }
 </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li></ul>

SweetAlertDialogPlugin.js

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var exec = require('cordova/exec');
 
 var SweetAlertDialogPlugin = function(){
 };
 
 SweetAlertDialogPlugin.prototype.createNomalDialog = function(arg0, success, error) {
 return exec(success, error, "SweetAlertDialogPlugin", "createNomalDialog", [arg0]);
 };
 
 var sweetAlertDialogPlugin = new SweetAlertDialogPlugin();
 module.exports = sweetAlertDialogPlugin;
 
 if(!window.plugins){
 window.plugins = {};
 }
 if(!window.plugins.SweetAlertDialogPlugin){
 window.plugins.SweetAlertDialogPlugin = sweetAlertDialogPlugin;
 }
 </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>

这两个文件要一起看，过程是这样的，我们用js这个createNomalDialog函数通过exec函数映射到sweetAlertDialogPlugin.java，找到sweetAlertDialogPlugin这类和createNomalDialog方法来执行，然后类通过callbackContext.success(message)，callback回来。

整个插件的结构就是这样，分析清楚了，如何做才是重点，有两种方式，第一种肯定手写这3个文件。第二种可以通过plugman命令来管理插件。

1】执行安装命令，这个要在安装了nodeJS,cordova后才有用。

<code class="hljs cmake has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">npm install -g plugman</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

2】新建一个插件SweetAlertDialogPlugin  
plugman create –name –plugin\_id –plugin\_version \[–path \] \[–variable NAME=VALUE\]  
把其中的替换为 SweetAlertDialogPlugin;  
替换为 cn.pedant.sweetalert  
替换为 1.0.0  
在终端中输入：  
plugman create –name SweetAlertDialogPlugin –plugin\_id cn.pedant.sweetalert –plugin\_version 1.0.0  
执行命令后会在当前目录下生成一个文件夹SweetAlertDialog。这里id和version对应上面plugin.xml中的id和version。

3】接着在终端中继续输入：  
cd SweetAlertDialogPlugin  
然后输入：  
plugman platform add –platform\_name android  
这时候查看我们的SweetAlertDialog目录下的 src会新增一个目录android里面会有一个java文件：SweetAlertDialogPlugin .java  
，当然这是一个生成的文件，因此我修改了成自己的Java代码。  
上面我贴出来的代码就是我修改过的。

4】测试，添加插件

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">cordova plugin add SweetAlertDialog</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

这时在cordova自动帮你把src中的文件复制一份到android和iOS。继续看代码

<code class="hljs lua has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">window.plugins.SweetAlertDialogPlugin.createNomalDialog("messge",function(success){
 alert(success);
 },function(error){
 alert(error);
 })</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

上面提到

在前端代码中就是这样用的。

好了，插件就这样可以用了。

[https_github.com_Eddieyuan123_SweetAlertDialog]: https://github.com/Eddieyuan123/SweetAlertDialog
[20151127085629709]: /images/20220717/d1411cd694ab4cabbaaaeadfdf499922.png