cordova 自定义插件之完整流程--转

本文详细介绍了如何创建Cordova项目、自定义插件,并提供了Android和iOS平台的配置步骤。从开发环境的搭建,如Android Studio、Xcode、Node.js和Sublime Text,到使用命令行工具创建工程,再到自定义插件的结构配置,包括plugin.xml、源代码、www目录的js文件,以及本地代码创建和插件调用。此外,还涉及了第三方库的配置,以微信支付为例,展示了如何在plugin.xml中添加相关配置。
摘要由CSDN通过智能技术生成

一.前期开发环境

1.android studio和xcode开发环境

2.安装node.js 

3.安装plugman

4.命令工具环境(可以安装git也可以使用系统自带的工具,window的dos,ios的终端)

5.subline text3 主要用于编辑插件的的文件(当然也可以用notepad 看个人喜好 也可以用一些其它编辑工具)

二.创建工程

1.安装cordova和plugman

使用npm命令:npm install -g cordova 

                         npm install -g plugman

如果是mac上有可能安装失败,这是因为读写权限问题,在命令前面加上sudo就好。

cordova安装的是最新版本。

2.创建android或ios的cordova项目

 虽然这一步没必要写 ,网上也有很多教程 ,但是为了整个流程的完整性 ,还是写出来

命令步骤如下:

在这之前有一点细碎的事,个人习惯一定要把工程放在合适的位置

例如在window 的DOS 环境下,cd到相应的磁盘目录在使用下面的命令(ios则直接在Desktop目录下就可以了 也就是桌面上)

    2.1 创建Hello工程

          cordova create hello  com.moke.hello  Hello 

          第一个hello是创建的工程文件夹名 中间的com.moke.hello就不用多说了,Hello,工程名

    2.2 添加开发环境平台

         首先得切换命令目录到工程目录,例如本例子就需要 cd hello到工程目录中,然后执行 以下命令:  

         android环境:cordova platform add android ,ios环境:cordova platform add ios 

        会生出如下目录(ios为例): 

 

         2.3 添加插件

          这一步可做可不做 ,但是命令还是要写出来。 cordova plugin add  ********* ,星号部分为插件的地址 或者 自定义插件的目录地址

          可以添加也可以删除 cordova plugin rm ******** ,星号为插件名 如果不知道插件名 可以用命令查看当前工程的插件列表 cordova plugin list

       2.4 最后就是编译 

          cordova build ios或者android

三 自定义插件

     有时候github或者npm上的插件不能满足项目需求时 就需要自己自定义插件

     3.1创建插件基本结构

     先cmd到桌面或者任意磁盘目录执行以下命令:

    输入 plugman create --name com.moke.TestPlugin --plugin_id com.moke.testPlugin --plugin_version 0.0.1

  生成一个名字为com.moke.TestPlugin的插件文件夹以及目录为下:

   

     

         3.2 插件目录配置

         plugin.xml 是配置相关android ios  wp等平台的信息,这是一个非常重要的配置文件,在js中能否调用到插件中的本地方法就需要看这个文件中是否配置正确。

         src文件夹:里面放置的是各个平台的类文件以及一些lib库,但是需要注意在src目录下 要新建例如 命名为ios的文件夹 这个文件夹就放置的ios的.h 和.m的文件以及ios环境下插件所需要的第三方库等,同等,放置android的java文件需要创建命名为android的文件夹。

         www文件夹:这个文件夹里面有一个js文件,是在3.1中创建插件文件时自动生成的。这个js的主要作用就是链接本地代码的接口 通过访问该js接口来调用src文件夹中不同平台的本地方法        

         3.3 插件配置详细

             3.3.1 以一个简单demo为例子来表示相应配置信息 在这创建了相应android平台的hello.java 和ios平台的HVPhello.h HVPhello.m文件 主要实现了字符串的显示

          hello.java文件:

package com.moke.testPlugin;

import org.apache.cordova.*;
import org.json.JSONArray;
import org.json.JSONException;

public class Hello extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray data, CallbackContext callbackContext) throws JSONException {

        if (action.equals("greet")) {

            String name = data.getString(0);
            String message = "Hello, " + name;
            callbackContext.success(message);

            return true;

        } else {
            
            return false;

        }
    }
}
            HVPhello.h HVPhello.m文件

#import <Cordova/CDV.h>

@interface HWPHello : CDVPlugin

- (void) greet:(CDVInvokedUrlCommand*)command;

@end


#import "HWPHello.h"

@implementation HWPHello

- (void)greet:(CDVInvokedUrlCommand*)command
{

    NSString* name = [[command arguments] objectAtIndex:0];
    NSString* msg = [NSString stringWithFormat: @"Hello, %@", name];

    C

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值