Cordova调用Android原生方法及界面

1.安装Node.js
1.1从官网下载Node.js,下一步一键到底即可。
1.2有需要为Node.js配置淘宝网镜像的,可参考Node.js配置淘宝镜像
2.安装AndroidStudio与Jdk
2.1.从安卓开发者官网下载Studio
2.2从甲骨文官网下载jdk8或更高
2.3Studio与jdk的环境变量请自行百度。
3.正文:

3.1安装cordova使用node.js的npm工具。打开控制台输入
npm install -g cordova
3.2安装plugman,cordova需要用plugman来创建自定义插件。打开控制台输入
npm install -g plugman

-g是全局安装cordova。安装完成后就可以在命令行使用cordova命令。

3.3用cordova创建android工程

先在电脑创建一个cordova工程的目录,然后进入到创建的目录里,之后就可以开始创建cordova工程
Cordova调用Android原生方法及界面_第1张图片

cordova create ToastDemo com.msh.toast
ToastDemo: 工程名
com.msh.toast:包名

Cordova调用Android原生方法及界面_第2张图片
进入到刚刚创建的ToastDemo目录中,然后开始创建android工程。

cordova platform add android

Cordova调用Android原生方法及界面_第3张图片
查看本机安装的平台

cordova platforms list

Cordova调用Android原生方法及界面_第4张图片
将创建的安卓工程导入至AndroidStudio
Cordova调用Android原生方法及界面_第5张图片
导入后的工程目录结构
Cordova调用Android原生方法及界面_第6张图片
至此,Cordova Android工程创建结束。

3.4用Cordova创建安卓原生插件

命令行进入Cordova工程目录所在文件夹,并执行以下命令创建插件

plugman create --name toast_plugin --plugin_id cordova-plugin-toastdemo --plugin_version 1.0.0

–name toast_plugin --> 插件名 (注意起名,不要和原生方法冲突)
–plugin_id cordova-plugin-toastdemo --> 插件Id
–plugin_version 1.0.0 --> 插件版本号
Cordova调用Android原生方法及界面_第7张图片
进入插件目录,添加插件支持的平台环境

plugman platform add --platform_name android

下图为当前插件目录结构
Cordova调用Android原生方法及界面_第8张图片
然后再根据你当前需要引用的layout,java,activity,utils,common或jar,aar,so等相关文件在插件android目录下创建文件,结构
Cordova调用Android原生方法及界面_第9张图片
将相应的文件放入对应目录,并开始在plugin.xml文件中添加配置信息

<?xml version='1.0' encoding='utf-8'?>
<plugin xmlns:android="http://schemas.android.com/apk/res/android" id="cordova-plugin-toastdemo"
    version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0">
	<!--插件名-->
    <name>toast_plugin</name>
	<!--js调用模块:src为调用插件的js文件路径-->
    <js-module name="toast_plugin" src="www/toast_plugin.js">
		<!--target 为插件安装后调用方法前缀 如:cordova.plugins.toast_plugin.[插件方法名]-->
        <!-- <clobbers target="cordova.plugins.toast_plugin" /> -->
		<!--可以自定义 调用时:ToastDemo.[插件方法名]-->
		<clobbers target="ToastDemo" />
    </js-module>
	<!-- android 环境配置 -->
    <platform name="android">
		<!-- 插件安装时会将config-file标签中的内容添加至res/xml/config.xml文件中 -->
        <config-file parent="/*" target="res/xml/config.xml">
			<!-- name 为对应www/toast_plugin.js文件中的调用名称 -->
            <feature name="ToastDemo">
				<!-- value 为插件安装到项目中后ToastDemo.java的文件路径,即包路径 -->
                <param name="android-package" value="com.msh.toastdemo.ToastDemo" />
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml"></config-file>
        <!-- src 为插件目录中Java源文件路径,

你可能感兴趣的:(教学,cordova,plugin)