Cordova 学习

因为接触outline移动端的学习,所以对其中ts和原生的交互方式有些兴趣,于是对其中使用cordova进行了一点学习,因为只是demo层级的处理,所以对产品本身的特性和技术对比无法给出有深度的分析,本文算是入门级的demo,如果有不合适的地方,请大家指正。


1. Cordova创建项目

因为cordova是基于js进行开发,所以安装好node环境后,安装cordova

npm install cordova -g

使用cordova创建项目

cordova create app com.example.app myapp

关于其中参数的含义,文章中的截图说的很清晰,

cordova create参数说明

然后,进入到创建的项目中,使用cordova添加项目对android平台的支持(因为本地有android开发的环境,所以后文使用android平台进行说明)

cordova platform add android
vscode 命令行终端

可以通过 cordova platform 查看目前项目支持的平台,并通过 add 或者 remove 进行对应的平台移除,这里可以查看b站上的视频Cordova混合App入门(1)_哔哩哔哩_bilibili,其中对创建过程进行了说明,没有设计深入的讲解,不过对于初学者是有帮助的。

之后,便可以构建对应的android项目

cordova build

这里需要配置ANDROID_SDK_ROOT等环境变量,如果操作的时候出现问题,根据报错信息具体进行处理。之后,手机连接到电脑上,运行项目并安装,

cordova run
运行截图(知乎不支持缩放,有点太占空间了)

2. Plugman编写插件用于cordova项目

cordova在处理js和原生的交互上,最重要的是插件的编写,通过在js中编写对应的插件,并在原生中根据具体的需求进行逻辑上的处理。这里使用plugman进行插件的编写,具体的流程参照上述的文章 和 另一篇文章

首先,通过npm安装plugman

npm install plugman -g

然后,使用plugman创建插件项目。注意这里在demo项目外的位置,避免污染原项目的文件结构

plugman create --name PluginDemo --plugin_id cordova.plugin.demo --plugin_version 0.0.1
plugman 使用

这里的参数含义是

plugman create --name <name> --plugin_id <id> --plugin_version <version> --variable description="<description>"

然后,查看plugin.xml文件,这里js-module中的clobbers便是原生在调用时要使用的名字。一定要记住!在查看前人的文章时,看到他们有说明,结果自己还是反反复复试了几个小时纠结为什么我改了插件就是没有生效,最后才反应过来这里的重要性!

然后,plugman添加平台信息

plugman platform add --platform_name android

再者,创建对应的package.json文件,用于后面cordova项目引入该插件

 plugman createpackagejson .

接着,在cordova项目中引入该插件

cordova plugin add ..\PluginDemo\ 

至此,运行程序,一切如常,相较于之前没有任何变化,因为项目中的插件并没有使用。


3. 添加插件功能

插件的功能,因为是demo项目,所以尽可能的简单,这里参照项目cordova-plugin-hello,在程序最开始加载的时候,直接alert弹框提醒。


回到插件项目PluginDemo中,查看www内的PluginDemo,js,可以看到如下的信息。当然这里的coolMethod可以进行更改,但对应的后文原生在调用时也要同时进行修改。

PluginDemo.js

注意这里对应暴露的方法名是coolMethod,回到cordova项目demo中,修改www/js/index.js文件

最后,构建后运行

cordova build
cordova run

对应的项目源码gitee地址

祝世界地球日做个好梦~

编辑于 2022-04-22 21:19