有時(shí)cordova和npm上提供的插件都不能滿足我們的項(xiàng)目需求素标,這時(shí)候就要自己定義插件并將原生接口暴露給cordova了
開(kāi)發(fā)插件
現(xiàn)在我們開(kāi)發(fā)一個(gè)Android平臺(tái)中彈出Toast的插件始绍,創(chuàng)建一個(gè)文件夾cordova-plugin-toast作為toast插件的根目錄猩系,其他需要?jiǎng)?chuàng)建的文件和文件夾如下铸敏,
cordova-plugin-toast
-src
--android
---Toast.java//Android插件實(shí)現(xiàn)
--ios//如果要提供ios插件的話孤紧,要在里面放上.h的toast的實(shí)現(xiàn)
-pulgin.xml //插件配置文件,主要通過(guò)該文件將原生接口暴露給cordova
Toast.java文件要繼承CordovaPlugin類胧沫,然后重寫execute()方法茅坛,代碼如下:
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
public class Toast extends CordovaPlugin
{
@Override
public boolean execute(String action, JSONArray data, CallbackContext callbackContext) throws JSONException
{
if (action.equals("toast"))
{
toast(data);
return true;
}
else
{
return false;
}
}
public void toast(JSONArray data)
{
android.widget.Toast.makeText(this.cordova.getActivity(), data.getString(0), android.widget.Toast.LENGTH_SHORT).show();
}
}
execut()其實(shí)是個(gè)分發(fā)器,根據(jù)不同的action調(diào)用不同的方法弄喘,方便以后跟新維護(hù)玖喘。
接下來(lái),我們就要配置plugin.xml文件了
<plugin xmlns="http://www.phonegap.com/ns/plugins/1.0" //命名空間蘑志,默認(rèn)為該值
id="cordova-plugin-toast" //npm類型的標(biāo)識(shí)符累奈,一般與根目錄保持一致
version="0.7.0">//版本號(hào)
<name>Toast</name>//插件名稱
<engines>
<engine name="cordova" version=">=3.4.0"/>//支持的cordova版本
</engines>
<platform name="android">//Android平臺(tái)
<config-file target="res/xml/config.xml" parent="/*">
<feature name="Toast">//服務(wù)名稱,后面在js中對(duì)應(yīng)service這個(gè)參數(shù)
<param name="android-package" value="com.whr.demo.Toast"/>//value為完整的類名
</feature>
</config-file>
<source-file src="src/android/Toast.java" target-dir="src/com/whr/demo/"/>//src為源文件位置急但,target-dir為解壓到目標(biāo)位置澎媒,為上面類的包名
</platform>
//ios的有些不同,以后補(bǔ)充...
</plugin>
添加插件
plugin.xml配置好之后波桩,我們將cordova這個(gè)文件夾拷貝到我們的cordova工程下的plugins文件夾下
然后呢戒努,通過(guò)下面的命令行將我們自定義的插件添加到cordova。
cordova plugin add cordova-plugin-toast
這邊的名稱為文件夾的名稱镐躲。提示安裝成功之后储玫,我們就可以在js中使用該插件了
//Toast為我們?cè)趐lugin.xml中feature元素里name的名稱,它對(duì)應(yīng)com.whr.demo.Toast這個(gè)類
//toast為action名稱萤皂,我們?cè)赥oast.java文件中通過(guò)action名稱識(shí)別前端要請(qǐng)求的方法撒穷。
cordova.exec(onSuccess, onFail, "Toast", "toast", ["123"]);
補(bǔ)充
- 我們可以使用corodova這個(gè)全局變量的前提,是我們的html引入cordova.js文件
<script type="text/javascript" src="cordova.js"></script>
- 為了方便后期的維護(hù),我們一般在js中會(huì)cordova.exec(onSuccess, onFail, "Toast", "toast", ["123"])再進(jìn)行封裝一層
在插件根目錄下添加www文件夾
cordova-plugin-toast
-www
--toast.js
tost.js中的代碼為
module.exports = {
toast: function (name, successCallback, errorCallback) {
cordova.exec(successCallback, errorCallback, "Toast", "toast", [name]);
}
};
然后在上面plugin.xml中添加
<asset src="www/toast.js" target="js/toast.js"/>
<js-module src="www/toast.js" name="toast">
<clobbers target="toast" />
</js-module>
更新插件后裆熙,我們就可以這樣使用啦端礼,后面插件有更新改動(dòng)什么的,前端也不用改啦
toast.toast(['1213'],onSuccess, onFail);