phonegap插件：android toast顯示以及phonegap與js互相傳值

時間 2019-12-01

標籤 phonegap 插件 android toast 顯示以及互相欄目 Android 简体版

原文原文鏈接

本文使用的phonegap版本爲2.9.0，sencha touch爲2.4.0，phonegap jar包能夠去官網下載。javascript

以android toast做爲例子：java

首先在st項目中建一個viewandroid

Ext.define('HelloWorld.view.Main', {
    extend: 'Ext.form.Panel',
    xtype: 'main',
    requires: [
       'Ext.field.Text','Ext.form.Panel'
    ],
    config: {
    	fullscreen: true,
        items:[{
        	xtype:'fieldset',
        	title:'輸入顯示內容',
        	items:[{
        		xtype:'textfield',
        		label:'內容',
        		name: 'content'
       	 	},{
       	 		xtype:'button',
       	 		itemId:'ST_TO_PG_BTN',
       	 		text:'肯定'
       	 	}]
        },{
        	xtype:'button',
        	text:'顯示pg傳過來的數據',
        	itemId:'pg_TO_PG_BTN'
        }]
    }
});

效果圖：apache

編寫phonegap插件json

package com.tonghui.toast;
import org.apache.cordova.api.CallbackContext;
import org.apache.cordova.api.CordovaPlugin;
import org.apache.cordova.api.PluginResult;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.widget.Toast;

public class ToastPlugin extends CordovaPlugin{
     private static final String ST_TO_PG="atoast";
     private static final String PG_TO_ST="btoast";
     private String message="";
     private int toastLength=0;
     CallbackContext callbackContext;
     private Toast toast=null;
     private JSONObject s=new JSONObject();
     @SuppressWarnings("unused")
    private PluginResult result = null;
     public boolean execute(String action, JSONArray args,
                CallbackContext callbackContext) throws JSONException{
         this.callbackContext=callbackContext;
                 if(action.equals(ST_TO_PG)){
                     message=args.getString(0);
                     toastLength=args.getInt(1); 
                     showToast(message, toastLength);
                     return true;
                 }
                 if(action.equals(PG_TO_ST)){
                    s.put("PG_TO_ST", "我是從phonegap傳遞過來的數據");
                    result = new PluginResult(PluginResult.Status.OK, s);
                    ToastPlugin.this.callbackContext.success(s);
                    return true;
                }
         return false;
     }
     
    
     
     
     private void showToast(final String message, final int length) {
            cordova.getActivity().runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    toast = Toast.makeText(cordova.getActivity(), message, length);
                    toast.show();
                }
            });
        }

}

execute方法是與js交互的接口，參數action是phonegap與js要執行的動做。
st傳值到phonegap主要參數:JsonArray參數是接收st傳過來參數的容器集合。
phonegap傳值到st主要參數：JsonObject爲傳給st的參數集合，put是加入要傳的值，st經過獲取put方法參數裏的key來獲取對應value。經過PluginResult來傳參數，PluginResult.Status.OK表示傳遞成功，而後進行callbackContext回調。

phonegap插件註冊：
在config.xml中加入相對應插件的路徑。


js插件編寫：

在st項目根目錄下建立一個toastplugin.js文件。



打開toastplugin.js,加入插件代碼

cordova.define("cordova/plugins/toastplugin", function(require, exports, module) {/*global cordova, module*/
     var exec = require("cordova/exec");
      var ToastPlugin = function() {};
        ToastPlugin.prototype.
    atoast=function (message,length,successCallback, errorCallback) {
        
        exec(successCallback, errorCallback, "ToastPlugin", "atoast",[message,length]);
    };
        ToastPlugin.prototype.
    btoast=function (successCallback, errorCallback) {
        
        exec(successCallback, errorCallback, "ToastPlugin", "btoast",[]);
    };
   
 var toastplugin = new ToastPlugin();
    module.exports = toastplugin;
});
var ToastPlugin = cordova.require('cordova/plugins/toastplugin');

if(!window.plugins) {
    window.plugins = {};
}
if (!window.plugins.toastplugin) {
    window.plugins.toastplugin = cordova.require("cordova/plugins/toastplugin");
}

atoast方法爲st向phonegap傳值----方法中的message,length就是phonegap插件中JsonArray須要獲取的參數。api

btoast方法爲phonegap向st傳值。app

exec參數：第一個參數爲傳遞成功方法，第二個爲傳遞失敗方法，第三個爲phonegap插件的類名，第四個爲插件執行的動做，第五個爲st傳給phonegap的參數。ide

註冊js插件：測試

先把官網下載的cordova.js放到st根目錄下。ui

在app.json中加入註冊，cordova.js必定要放在phonegap的js插件的前面哦。

st調用插件：

Ext.define('HelloWorld.view.Main', {
    extend: 'Ext.form.Panel',
    xtype: 'main',
    requires: [
       'Ext.field.Text','Ext.form.Panel'
    ],
    config: {
        fullscreen: true,
        items:[{
            xtype:'fieldset',
            title:'輸入顯示內容',
            items:[{
                xtype:'textfield',
                label:'內容',
                name: 'content'
                },{
                    xtype:'button',
                    itemId:'ST_TO_PG_BTN',
                    text:'肯定'
                }]
        },{
            xtype:'button',
            text:'顯示pg傳過來的數據',
            itemId:'pg_TO_PG_BTN'
        }]
    },
    initialize:function(){
        var me=this;
        var textfeld=me.down('textfield');
        var ST_TO_PG_BTN=me.down('button[itemId=ST_TO_PG_BTN]');
        var pg_TO_PG_BTN=me.down('button[itemId=pg_TO_PG_BTN]');
        ST_TO_PG_BTN.on('tap',function(){
            var textfieldValue=textfeld.getValue();
             window.plugins.toastplugin.atoast(textfieldValue,1);
        });
        pg_TO_PG_BTN.on('tap',function(){
            
             window.plugins.toastplugin.btoast(function(data){
                 alert(data.PG_TO_ST)
             },
             function(error){}
             );
        });
    }
});