android + cordova开发以toast为例

本文链接： https://blog.csdn.net/weixin_40420578/article/details/102624207

在此之前你可能需要看一下我的另外一篇博客：https://blog.csdn.net/weixin_40420578/article/details/102610618

用Android studio打开hello——platforms——android（hello的由来从前面博客可知），此时你打卡的项目目录应该跟下图一样的（重点已用红色框出来）,最后效果图如右边所示：

按以下步骤实现toast插件

一.为了更好管理，在com.example.hello下建立plugins包，在plugins下建立ToastPlugins.java

package com.example.hello.plugins;

import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaArgs;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;

/**
 * Created by Administrator on 2019/10/18
 *
 * @author mcl
 */
public class ToastPlugin extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext){
        if ("showToast".equals(action)) {//前端回调的方法
            return executeShowToast(args, callbackContext);
        } else {
            callbackContext.error("方法异常");
            return false;
        }
    }

    /**
     * 显示toast的原生方法
     */
    private boolean executeShowToast(JSONArray args, CallbackContext callbackContext) {
        try {
            CordovaArgs cordovaArgs = new CordovaArgs(args);
            String text = cordovaArgs.getJSONObject(0).getString("text");//custom.js中的text内容
            android.widget.Toast.makeText(cordova.getActivity(), text, Toast.LENGTH_LONG).show();
            callbackContext.success();
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            callbackContext.error("toast显示异常");
            return false;
        }
    }
}

二. 在config.xml添加如下代码：

<widget
  ……………………
    <feature name="ToastPlugin">
        <param name="android-package" value="com.example.hello.plugins.ToastPlugin"/>
    </feature>
</widget>

三.在assets——www——js下建立custom.js

function showToast(){
   android.cordova.showToast(function(result){
               alert("success:"+result);
          },function(err){
              alert("error:"+err);
          },{
              text:'Toast',
          });
}
document.getElementById("btToast" ).addEventListener("click", showToast);

四.在assets——www——plugins下建立文件夹cordova-plugin-toast，并在其下建立toast.js

cordova.define( "com.example.hello.plugins.ToastPlugin" , function(require, exports, module) {
        var exec = require('cordova/exec');

        module.exports = {
        showToast:function(successCallback,errorCallback,content){
           exec(successCallback, errorCallback, "ToastPlugin", "showToast", [content]);
        },
        };
    });

五.在cordova_plugins.js中添加如下代码：

 module.exports = [
    ……………………
    
    ,{
             "file" : "plugins/cordova-plugin-toast/toast.js",
             "id" : "com.example.hello.plugins.ToastPlugin",
             "clobbers" : ["android.cordova"]//定义调用的方法，跟custom.js对应上
         }
 ];

六.在index.html中添加如下代码：

<!DOCTYPE html>
<html>
    ………………………………
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
               ……………………………………
                <button id="btToast" >Toast</button>
            </div>
        </div>
        …………………………………………………………………………………………
        <script type= "text/javascript" src="js/custom.js"></script>
    </body>
</html>

非常感谢“那一年的梧桐雨”的博客，这篇博客参考了他的：https://blog.csdn.net/liugang921118/article/details/82345435，由于第一次愣是没有运行起来，所以去官网看了，写了开头那篇博客后有些灵感了，再从新做一次就出现了，从新进行整理得出的本篇博客。

android + cordova开发以toast为例

猜你喜欢