从环境布署到安卓苹果双端上线,自定义插件

By admin in 4858美高梅 on 2019年4月10日

    给Ionic写一个cordova(PhoneGap)插件

    给Ionic写一个cordova(PhoneGap)插件

开始竞赛简言

自身是一名前端工程师,刚刚达成了八个依据cordova的webapp,并且安卓和苹果双端都已上线,趁热写个计算分享给我们。(也是刚起先成人的小白,恐怕写的倒霉,大家多多包括O(∩_4858美高梅 ,∩)O
~)

cordova是1套跨平台的位移端框架,基于H伍的同时又允许调用原生代码的特点使得开发和平运动转都能赶快地运行。

  在此以前由javaWeb转html5开发,由于面临新技巧,遂在适应的进度中极为挣扎,然而幸好~,这一个进程也极为短暂;现近日面临1些较为复杂的急需还会有一小点胃痛,却尚无一早先那么强烈了。。。

  之前由javaWeb转html5支付,由于面临新技巧,遂在适应的进度中极为挣扎,不过辛亏~,这么些进程也极为短暂;现近期面临一些相比较复杂的需求还会有一丢丢头疼,却尚无壹方始那么明显了。。。

大概进度

小编是先在windows上成功的品种代码,然后打包安卓端的apk包并且上传到各大利用市镇(360、应用宝等),然后把项目代码移植到mac本上,来打包ios端的ipa包并且上传出app
store的。

官方:

  在正儿八经写下文此前,小编先多谢集团大boss:王总,多谢他让我进入了叁个有挑衅性的技术公司并在这一个历程中一贯鼓励小编不止汲取新技巧,同时也指正了本人在付出中的壹些不太好的习惯,1二分多谢!

  在规范写下文从前,小编先谢谢集团大boss:王总,谢谢他让作者进入了一个有挑战性的技术公司并在这么些历程中一贯鼓励作者不止汲取新技巧,同时也指正了自个儿在付出中的一些不太好的习惯,十二分谢谢!

背景介绍

Cordova是什么?百度词条中的定义:Cordova提供了一组织设立备相关的API,通过这组API,移动采取能够以JavaScript访问原生的设施功用,如录制头、Mike风等。Cordova还提供了1组集合的JavaScript类库,以及为那几个类库所用的装置相关的原生后台代码。Cordova帮助如下移动操作系统:iOS,
Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada
和 Symbian。

简易点清楚,Cordova是多少个工具,通过它能够将您做的html网页展现在WebView里面,而你网页中用到的JS能够经过他的API去调用原生的东西,比如相机等。但它做出来的app比原生做出来的app辛亏什么地方啊?直白点说,简便,省钱。因为cordova
app显示的页面全是您做的html页面,所以说你写一套code,就能够用在Android上,IOS上,以及Web上。不用去分别找Android工程师,IOS工程师。

A plugin is a package of injected code that allows the Cordova webview
within which the app renders to communicate with the native platform
on which it runs. Plugins provide access to device and platform
functionality that is ordinarily unavailable to web-based apps.

  再~,谢谢在支付中予以小编太多支持的杜勇以及张光杰~,不论是必要琢磨也许现实开发阶段都会予以1些尤其实惠的笔触以及困难解答,尤其是面临技术瓶颈的时候~,再度谢谢他们,1贰分感激!

  再~,谢谢在支付中予以小编太多救助的杜勇以及常莎~,不论是须要商量大概现实开发阶段都会予以一些可怜有效的笔触以及困难解答,尤其是面临技术瓶颈的时候~,再度多谢他们,十二分谢谢!

环境搭建

一. 装置node.js (Node.js是三个Javascript运转条件……)

下载安装node.js,下载地址:
-v,假设看到版本号表示安装成功。

4858美高梅 1

查看node版本号

二. 安装ant (Ant是一种基于Java的build工具……)

下载地址:
-v,看到版本号则意味着成功。

4858美高梅 2

查看ant 版本号

Ps:假设是windows七系统,在添加path的值时,四个值时期要用分号隔断。

3. 安装cordova

命令行输入  npm install –g cordova

npm(node package
manager)是nodejs的包管理器,用于node插件管理(包蕴安装、卸载、管理注重等),不过因为npm安装插件是从海外服务器下载,受网络影响大,大概出现极度,消除:用Taobao团队提供的境内的cnpm,执行命令npm
install cnpm -g
–registry=
–v
,假使出现版本号则设置成功,大家就足以用cnpm安装大家所供给的事物了,比如
我们地点执行的 cnpm install –g cordova 。关于npm
和cnpm的事无巨细讲解,能够参考那篇博客。

测试安装是或不是中标,终端输入cordova -v,假诺现身版本号表示安装成功。

4858美高梅 3

查看cordova版本号

4. 安装jdk

下载地址:
,采纳自身的版本点击下载。下载下来后,依照提醒安装,安装地方比如D:\java\jdk1.8.0_13一,然后开始展览环境变量的安顿即可。(添加环境变量的步骤:右键小编的微型计算机属性高级系统装置环境变量系统变量中添加JAVA_HOME,值为D:\java\jdk1.8.0_131,在系统环境变量中的变量path中添加%JAVA_HOME%\
bin)。

5. 安装sdk

下载地址:
,建议大家下载.zip文件不要下载.exe文件。反正自身下载.exe文件就装不上。下载下来.zip文件后解压缩,根据提醒安装,然后依照安装的岗位展开环境变量的配置。(添加环境变量的手续:右键笔者的微处理器属性高级系统装置环境变量系统变量中添加ANDROID_SDK_HOME,值为D:\android\android-sdk-windows,在系统环境变量中的变量path中添加%ANDROID_SDK_HOME%\platform-tools和%ANDROID_SDK_HOME%\
tools)。

4858美高梅 4

下载sdk

走到近来,开发所需的环境铺排进度已经基本到位了!!


简短地说插件是提供了webview访问原毕生台的输入,cordova提供了一名目繁多最常用的插件用于获取装备新闻,访问通信录、文件系统等。你也足以在插件搜索平台上找到您要求的插件
@插件库

  对于新手,提议准备好相应的IDE及环境:webstrom、google
chrome、eclipse(可能 idea),android SDK ; webstrom
用于合作页面js以及插件开发,eclipse用于app插件调节和测试。

  对于新手,提议准备好相应的IDE及环境:webstrom、google
chrome、eclipse(只怕 idea),android SDK ; webstrom
用于合营页面js以及插件开发,eclipse用于app插件调节和测试。

创制第3个应用

创造基于cordova平台的hybrid app,有上面三种境况:

  1. 原生cordova app(能够相配自个儿公司付出的框架)

  2. 使用ionic框架(个人驾驭ionic=angular+cordova)

  3. 选用vue、react等别的框架,小编还尚未研商过。上面只介绍前三种。


===1 . 原生cordova app===


  a) 在有个别目录下创设cordova项目(cordova create <文件夹名>
<包名> < app 名>)。

一声令下行输入 cordova create test com.cordova.test test

4858美高梅 5

创建cordova项目

创建成功后,打开文件目录如下:

4858美高梅 6

新建的cordova项目目录

hooks寄存自定义cordova命令的台本文件。

platforms阳台目录,各自的平台代码就置身那里,能够放一下平台隶属的代码,今后那几个目录应当是空的,后边会介绍怎样制造平台。

plugins插件目录,安装的插件会放在那边。后边会介绍如何设置插件。

从环境布署到安卓苹果双端上线,自定义插件。www最根本的目录,存放项指标HTML5和JS代码的目录。app1始发打开的正是以此目录中index.html文件,也正是类其余输入文件。

config.xml驷不如舌是cordova的一部分配置,比如:项目应用了什么样插件、应用图标icon和起步页面SplashScreen,修改app的版本,名字等新闻,还有平台的配置。

package.json一个JSON对象,该目的的每2个成员纵然日前项指标1项设置。比如name便是项目名称,version是本子(遵从“大版本.次要版本.小本子”的格式)。

  b) 添加平台

进去到刚刚创立的种类文件目录下,命令行输入:

cd test (退出当前目录输入: cd .. )

cordova platform add android(添加安卓平台)

*cordova platform add
ios
(那句添加苹果平台要求在mac上推行。假使该项目须求在苹果端上线,后边会讲到代码移植到mac本上打包ios包的手续。再一次先忽略)*

从未报错的话就是添加成功了,此时开拓项目文件夹里的platforms文件之中有android文件夹了。

4858美高梅 7

执行命令 cordova platform add android

假定要移除该平台,命令是:cordova platform rm android

到那边大家就把准备工作都办好了,今后能够起来写js 和html代码了。

  c)添加和删除项目必要的codova插件

# 添加插件 #

命令行输入:cordova plugin add cordova-plugin-camera (cordova
plugin add <插件官方名称>),如下则申明添加成功。

4858美高梅 8

添加插件成功

纵然报错则可以尝试:移除android平台,再另行添加低版本的android平台(命令行输入cordova
platform add android@陆安装陆.多版本的android,因为后天添加android平台种类暗中同意添加最新的
7.多版本的,可是某个cordova插件恐怕还不能合作。)

去cordova官网找插件:http://cordova.apache.org/

也足以去github上找插件:

# 删除插件 #

命令行输入:cordova plugin rm
cordova-plugin-camera
 (使用rm和remove都可以)

4858美高梅 9

除去插件成功

 # 查看已经添加了的插件列表 #

命令行输入:cordova plugin list(查看当前设置了那3个插件)

也得以平素打开项目文件夹下的plugins文件夹查看(android.json和fetch.json都应该存在)

4858美高梅 10

plugins插件文件夹

  d)编写翻译调节和测试程序

上面包车型大巴不是每一句代码都须求周转,依照自身的必要开始展览采纳。

cordova install android //将编写翻译好的应用程序安装到模拟器上。

cordova emulate android //在模拟器上运转(前提是创建好AVD)

cordova serve //在浏览器运维

cordova build android //打包cordova项目到android平台。

cordova run android
//通过USB直接设置到真机(该语句已经席卷了build命令,固然你手提式有线话机处理器延续好,并且打开了手机里的usb调节和测试方式,就能够这么直接run)

终极出现BUILD SUCCESSFUL 则成功。

4858美高梅 11

build打包成功

实施完后到上海教室中最终壹行格外路径中去找我们的apk包,这几个apk包正是我们打出去的app的debug形式也正是开发环境下的包,放到手提式有线话机上就能运作了。不过正式上线到应用市场的包不可能如此打,后边讲。第二次run/build时间会比较长。最终出现BUILD SUCCESSFUL
则表达成功。

到那边大家差不多形成了android端的付出。

Ps:大家以往打开项目文件发现目录中多了个node_modules文件夹,那里面是大家项目所用到的倚重包,是系统基于package.json中的配置对应生成的。假若我们去下载旁人的支付好的类型代码时,下载下来后率先件事正是履行npm
install

来安装package.json中的配置和重视性,生成node_modules文件。然后再cordova
platform  add android添加平台。


上面说一下大家在www文件里写代码时或然必要使用的片段知识:

1. 用到less 写样式文件:(作者用的编辑器是webstorm)

    1. 命令行输入:npm install –g less

    2.
找到C:\Users\用户名\AppData\Roaming\npm\lessc.cmd,打开webstorm
> file > settings

4858美高梅 12

在webstorm中配置less(1)

    3.点击
“+”,在下拉菜单中精选less,然后把刚刚的不行路径填到下图中的红框中。ok达成。接下来大家在开立less文件时,就会自动生成2个css文件跟随。

4858美高梅 13

在webstorm中配置less(2)

二. 运动端设备大小适配难题rem转px

在www/js中引进rem.js 只怕flexible.js
(网上有),但本身用的温馨写的1段代码,效果壹样的,只是逻辑上不太一致。笔者的形式如下:

新建rem.js,引进到www下的index.html那些进口文件中,然后写入以下代码:

!function(n){

    var e=n.document,t=e.documentElement,i=720,d=i/100,

         o=”orientationchange”inn?”orientationchange”:”resize”,

         a=function(){

             varn=t.clientWidth||320;n>720&&(n=720);

             t.style.fontSize=n/d+”px”

         };

        e.addEventListener&&     
 (n.addEventListener(o,a,!1),e.addEventListener(“DOMContentLoaded”,a,!1))

}(window);

那段代码的逻辑是:美术工作给的图一般是720px宽的,(假如你的图画给的不是720得以修改下边包车型地铁代码中的720改成你的),在开发的长河中,执行cordova
serve运行在chrome浏览器后,F1二 > 手机格局 >
设备宽度设置成responsive
720宽,在此界面下进展开发调节和测试,假若美术工作图上十0px的因素,大家在写less/css时,该成分div的宽就写一rem,即壹rem=十0px。


===2 . 选用ionic框架做hybrid app===


恰好讲了cordova
原生app的步调,上面不难讲一下选用ionic框架的做法。命令行基本1致。

Ionic的一多元命令:(类似corodva原生app)

1.npm安装ionic:npm install –g cordova ionic

2.创造项目:ionic start myproject
–type=ionic1
(myproject是种类名,前边—type=ionic一是无人不知创造哪个版本用的的,不写的话默许是当下风靡的叁版本)

创立成功,项目文件目录如图:

4858美高梅 14

刚创建的ionic项目目录

  1. 就像上面讲到的一文山会海命令

cd myproject

ionic cordova platform add android

ionic serve // 浏览器调节和测试

ionic cordova build android            

 ionic cordova emulate android // 模拟器运转ionic cordova run
android  // 连接上手机械运输营,等同于build+emulate

肆.设置插件 命令行输入:ionic plugin add
cordova-plugin-shake(插件名)

ionic结合cordova 调用1些原生的api
如摄像头等,需求引入ng-cordova,具体参考:那篇文章


有时候无论是官方提供仍然插件库都并未满意你必要的插件,那么你能够品尝以上面包车型大巴诀窍自定义性格化插件

  就拿近来八个急需来说呢,须要:未防止第二方破解app,客户找了3个康宁公司做个评估,当中一个安然无恙题材是安卓apk的包经过改动后照旧得以设置运转(ios由于安全部制存在不设有那个标题),项目组内部切磋出二个比较好的缓解方案是用户登六前验证app包的hashcode值,并与后台交互验证当前批发版app的hashcode的实用,以杜绝破解。

  就拿近日一个要求来说吧,必要:未防止第一方破解app,客户找了二个保山公司做个评估,在这之中3个康宁难点是安卓apk的包经过修改后照旧可以安装运营(ios由于安全机制存在不存在这几个题材),项目组内部研究出二个相比好的消除方案是用户登陆前验证app包的hashcode值,并与后台交互验证当前发行版app的hashcode的可行,以堵塞破解。

类型上线

项目源代码写完后,那么该上线了。上面分别讲一下
上线到安卓各大利用市集。(360有线电话帮手、应用宝等等) 和上线到苹果的app
store的步调!


android 端上线 ==> 以360手提式有线电话机帮手为例。

一. 将应用打包 命令行输入:cordova build –release android

此番的打包不相同于用地点讲到的用cordova build android
打出去的包,那三个是debug的包,是调节和测试版,是半自动签名的。(那里解释一下“签名”:能在大哥伦比亚大学上运维的apk都是透过签字的,没有签定的apk是跑不起来的,debug包也是系统自动签的名,是用debugkeystore签过名的,但它不是正经的大家采纳唯壹的签字,所以大家必要给大家使用唯壹的署名,所以我们在那步打包时打不签字的包,如上命令
加 –release,方便下一步签app专属的名)。

2. 转变签名文件
(首先找到jdk安装的地方(如笔者的D:\java\jdk1.8.0_13一),命令行进入到jdk文件下的bin目录下,在命令行顺序输入如下几条命令,成立test.keystore)

(①)命令行输入:cd D:\java\jdk1.8.0_131\bin

(二)命令行输入:keytool -genkey -alias test.keystore -keyalg RSA
-validity 40000 -keystore test.keystore
(参数表明:-genkey
生成文件  -alias 别称  -keyalg 加密算法  -validity 有效期  -keystore
文件名 )

(三)然后依据提醒设置keystore密码以及你的消息,接下去不报错的话就意味着曾经成形了test.keystore文件,在jdk的bin目录下。

三. 到360平移开放平台 上注册账号。

4. 签名,加固。

下载360巩固帮手,下载地址,里面有使用手册,依据提醒操作,完成里面音讯的填写。重要的:里面供给填写签名文件路径,那么就填写上边步骤第22中学最终生成的签名文件路径,那样大家就布署好了。接下来就是把步子壹生成的未被活动签名的release包放进来,上传、签名、加固。然后最终生成的apk包正是大家得以上传到360使用市集的包了。

5.
进入
360付出平台 。

报到 > 管理基本 >
填写1四种的app新闻和公司消息,填写完整点击提交审查,一个工作日内就获取结果了。壹般审查批准都能由此,假设没经过会唤醒给你原因,依据她说的改动在交付就行,可能直接给他俩的客服邮箱发邮件交换即可。总之android应用市集很好通过,不像苹果app
store那么严(shi)谨(er)。哈哈哈~


ios上线 。。

———————小说太长了,请看 (下)篇。——————–


  那么些要求的困难在于供给拜访手机的内部存款和储蓄器读取安装包文件,倘若是一般的供给就能够一个html、3个JS(controller)外加启程由布置就
so easy~

  这些须求的难处在于需求拜访手提式有线电话机的内部存款和储蓄器读取安装包文件,假设是常见的要求就可以3个html、二个JS(controller)外加出发由安插就
so easy~

Android

本身常常使用Android
Studio来支付插件,那么开发的前提正是把cordova集成到IDE中,可以参考《将cordova集成到Android
studio的特级办法》

要么能够尝尝上面包车型地铁措施让IDE具备最中央的自动补全功能

  • 从github上下载开发源码并解压
  • Android
    Studio下新建1个空的工程,将解压目录下的framework/src/org全体拷贝到工程目录下app/src/main目录下
  • 将cordova-js-src拷贝到WebIDE下(作者用的是PhpStorm)

  首先叁个行业内部的cordova插件是那样子的(那里本人写的3个插件的名字是
cordova-plugin-integrity-checking):

  首先1个标准的cordova插件是那样子的(那里笔者写的二个插件的名字是
cordova-plugin-integrity-checking):

壹.创建目录结构

在WebIDE根目录下自家创设了2个索引cordoin,那么目录结构应该如下:(Cordoin是本身自定义的称号)

cordoin
    ├── src     # 插件原生实现的源码目录
    |    ├── android
    |    |    └── Cordoin.java  # Android平台下实现类
    |    ├── ios
    |    └── ...
    ├── www
    |    └── Cordoin.js #   Javascript 调用接口
    └── plugin.xml      #   插件的清单文件

 4858美高梅 15

 4858美高梅 16

二.创办清单文件

以下边包车型客车plugin.xml为例

<?xml version="1.0" encoding="utf-8"?>
<plugin id="win.wshore.cordo.plugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <name>Cordoin</name>
    <author>Linzh</author>
    <description>This is a demo plugin for cordova</description>
    <js-module name="Cordoin" src="www/Cordoin.js">
        <clobbers target="Cordoin"/>
    </js-module>
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="Cordoin">
                <param name="android-package" value="win.wshore.cordo.plugin.Cordoin"/>
            </feature>
        </config-file>
        <source-file src="src/android/Cordoin.java" target-dir="src/win/wshore/cordo/plugin"/>
    </platform>
</plugin>

plugin标签的id属性定义了插件的唯1标识符,那么未来就足以由此命令cordova
plugin rm
win.wshore.cordo.plugin
删除那一个插件,version定义了那一个插件的版本号用于更新插件

plugin标签下的name,author和description分别定义了插件的名称,小编和插件描述

js-module标签定义了js接口的寄放位置,name属性指的是以此功效模块的称谓,src只想那一个js接口的源码文件地方,clobbers属性表示访问对象的名目,那个指标足以一贯通过窗口对象window调用

platform定义了对应平台的安排,如android下config-file表示将feature成分放到res/xml/config.xml文件中,source-file代表就爱嗯源码从src/android/Cordoin.java拷贝到src/win/wshore/cordo/plugin目录下

  插件的主目录上面有四个文本夹(src和www)以及三个公文(LICENSE、package.json、plugin.xml、README.md),插件内部的排列是依照cordova规范来的,那里不多解释,请看上海体育场所:

  插件的主目录下边有八个文本夹(src和www)以及七个文本(LICENSE、package.json、plugin.xml、README.md),插件内部的排列是依据cordova规范来的,那里不多解释,请看上航海用体育场合:

3.创建 JavaScript 接口

js接口决定了该插件的功能要求和调用情势,编辑Cordoin.js如下:

var exec = require('cordova/exec');
var CORDOIN_SERVICE = "Cordoin";
var CORDOIN_ACTION = "test";
/**
 * Cordoin.test方法
 * @param params {[]} 参数列表
 * @param success {function} 成功时回调
 * @param error {function}  错误时候回调
 */
exports.test = function (params, success, error) {
    exec(success, error, CORDOIN_SERVICE, CORDOIN_ACTION, params || []);
};

上面包车型大巴代码表示为window.Cordoin对象创造test方法,CO本田CR-VDOIN_SE帕杰罗VICE代表以前加到res/xml/config.xml中的feature的名称,CO帕杰罗DOIN_ACTION表示操作名称

src:是停放安卓,ios,wp八等原生代指标地点,一般为了分化各类平台的代码都会先建二个文本夹(以上是android),文件夹上边是代码文件。

src:是停放安卓,ios,wp八等原生代目标地方,壹般为了分化种种平台的代码都会先建二个文书夹(以上是android),文件夹上面是代码文件。

4.原生实现

先上示例代码如下:

package win.wshore.cordo.plugin;

import android.app.Activity;
import android.content.Intent;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

public class Cordoin extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("test")) {
            if (args.length() > 0) {
                String params = args.toString();
                callbackContext.success(params);
            } else {
                callbackContext.error("no params");
            }
            return true;
        }
        return false;
    }
}

参数表达:

  • action 代表这些操作的名号,对应于js接口中CO大切诺基DOIN_ACTION变量
  • args 代表那几个操作的参数列表,也正是js接口中的param参数
  • callbackContext
    变量设置js接口的success和error的回调,通过原生的调用结果能够透过它回到给webview

原生完结的成效相当粗略,正是只要操作名称是”test”的时候,有参数时再次回到参数的json字符串,不然重临“no
params”错误提醒

到次结束Android平台的插件算是达成了,可是还无法平昔用,还索要成立package.json文件

进去到插件目录下执行命令

plugman createpackagejson ./

一只回车之后这些插件便得以选拔了
因为插件的职分是在该地,所以能够通过相对路径(只怕相对路径)添加到cordova项目中

cd cordova_project && cordova plugin add /path-to-you-plugin-parent-dir/cordoin

观看下边包车型地铁输出时得以说是设置成功了

Installing "win.wshore.cordo.plugin" for android
ANDROID_HOME=/home/mint/soft/sdk
JAVA_HOME=/home/mint/soft/jdk
Subproject Path: CordovaLib
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
        at build_dg1xzarrrmkc1xymj1x40eddf.run(/home/mint/workspace/wshore/cordo/platforms/android/build.gradle:138)
Incremental java compilation is an incubating feature.
:clean
:CordovaLib:clean

BUILD SUCCESSFUL

Total time: 1.507 secs
Adding win.wshore.cordo.plugin to package.json
Saved plugin info for "win.wshore.cordo.plugin" to config.xml

借使您改改了插件,那么能够通过删除+安装来使修改生效

页面调用demo:

<!DOCTYPE html>
<html>
<head>
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport"content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
</head>
<body>
<script src="cordova.js"></script>
<script>
    document.addEventListener('deviceready', function () {
        // 获取Cordoin对象
        var Cordoin = cordova.require('win.wshore.cordo.plugin.Cordoin');
        // 传递参数时弹出调用成功
        Cordoin.test(["hello world"], function (message) {
            alert("success:" + message);
        }, function (message) {});
        // 传递空参数时弹出调用失败
        Cordoin.test([], function (message) {[]}, function (message) {
            alert("failure:" + message);
        });
    });
</script>
</body>
</html>

www:这里放置的是js调用原生代码的api,里面有调用方法和重临对象(可无)。

www:那里放置的是js调用原生代码的api,里面有调用方法和再次回到对象(可无)。

LICENSE:是壹对开源表明,1般宣称的开源协议有GNU、BSD、Apache等~ 

LICENSE:是部分开源表达,1般宣称的开源协议有GNU、BSD、Apache等~ 

package.json:那其间用贰个json注脚了当下插件的文本结构,当然那些不是给开发者用的,是为着将此插件添加到项目中时打cordova命令用的,请不要忽略~

package.json:这么些中用一个json申明了现阶段插件的公文结构,当然那几个不是给开发者用的,是为了将此插件添加到项目中时打cordova命令用的,请不要忽视~

plugin.xml:那么些文件之中是以xml的款型定义了包的路径以及api(js)对应原生的调用方法…,以及插件要求的权位评释(比如相机权限、地方权限、联系人权限等~),打apk及ipa包后此文件会被融合~

plugin.xml:那个文件之中是以xml的款型定义了包的门道以及api(js)对应原生的调用方法…,以及插件供给的权杖评释(比如相机权限、地方权限、联系人权限等~),打apk及ipa包后此文件会被融合~

README.md:这里是部分行使验证、注意事项等~,1般你将支付的插件共享在github上的时候会须求那个,如涉及版权及项目安全此文件可忽略~

README.md:那里是局地采纳表达、注意事项等~,1般你将开发的插件共享在github上的时候会须求这么些,如涉及版权及项目安全此文件可忽略~

  好了,大家初阶了~,首先按以上造型建文件和文书夹,作者能说那是抄么-_-|||
 

  好了,我们初步了~,首先按以上造型建文件和文件夹,笔者能说那是抄么-_-|||
 

  达成,先写个原生的android代码吧(反正小编不会写oc
d=====( ̄▽ ̄*)b), 一下样例是CordovaApkValidte.java =>

  完结,先写个原生的android代码吧(反正小编不会写oc
d=====( ̄▽ ̄*)b), 一下样例是CordovaApkValidte.java =>

概念多少个包名称(尽管文件最终都以汇聚停放的,但请记挂大热天壹个人穿着裤衩在溜街多辣眼睛啊(● ̄(エ) ̄●)),命名如下,写java的童鞋大概都掌握,那里就不表明啊~:

概念贰个包名称(固然文件最终都是集聚停放的,但请思量大热天一位穿着裤衩在溜街多辣眼睛啊(● ̄(エ) ̄●)),命名如下,写java的童鞋大概都晓得,那里就不表明啊~:

package com.funnyZpC.integrityChecking.plugin;
package com.funnyZpC.integrityChecking.plugin;

下一场正是cordova规范固定的写法,继承CordovaPlugin重写execute方法,你可以改,结果本来是不可能用<( ̄ˇ ̄)/,exceute方法的形参图上业已注明,那儿就不要缀诉啦~

然后正是cordova规范固定的写法,继承CordovaPlugin重写execute方法,你能够改,结果自然是无法用<( ̄ˇ ̄)/,exceute方法的形参图上曾经证实,那儿就不必缀诉啦~

    /**
     * Apk integrity checking
     * @author funnyZpC
     */
    public class CordovaApkValidate extends CordovaPlugin {
        /**
         * action:方法的动作,根据动作走相应的处理逻辑
         * args:js调用方法时传的参数,均以json的形式读入(这里未使用)
         * callbackContext:方法返回的对象,对象里面包好两个变量success和error,js的回调函数会用到
         * 
         */
        @Override
        public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    /**
     * Apk integrity checking
     * @author funnyZpC
     */
    public class CordovaApkValidate extends CordovaPlugin {
        /**
         * action:方法的动作,根据动作走相应的处理逻辑
         * args:js调用方法时传的参数,均以json的形式读入(这里未使用)
         * callbackContext:方法返回的对象,对象里面包好两个变量success和error,js的回调函数会用到
         * 
         */
        @Override
        public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

以下是代码的关键性部分,那只是3个异常的粗略的插件,逻辑表明已经写进去了,自行阅读哈~

以下是代码的大旨部分,那只是一个很简短的插件,逻辑表明已经写进去了,自行阅读哈~

            /**
             * 思路:根据cordova对象获取包的路径
             *             然实例化MessageDigest对象的SHA-1算法
             *             再讲当前包加载到输入流
             *             再按字节数组读取输入流获取大integer的值
             *             后将大integer转换成16进制的hashcode的表示
             *             后再将16进制扔给callbackContext对象返回
             */
            String apkPath=cordova.getActivity().getApplicationContext().getPackageCodePath();
              MessageDigest msgDigest = null;
            if (action.equals("getSHA1")) {
                try {
                            msgDigest = MessageDigest.getInstance("SHA-1");
                            byte[] bytes = new byte[1024];
                            int byteCount;
                            FileInputStream fis = new FileInputStream(new File(apkPath));
                            while ((byteCount = fis.read(bytes)) > 0){
                                msgDigest.update(bytes, 0, byteCount);
                            }
                            BigInteger bi = new BigInteger(1, msgDigest.digest());
                            callbackContext.success(bi.toString(16));
                            fis.close();
                } catch (Exception e) {
                    callbackContext.error("ERROR MESSAGE:"+e);
                    return false;
                }
            }
            return true;
            /**
             * 思路:根据cordova对象获取包的路径
             *             然实例化MessageDigest对象的SHA-1算法
             *             再讲当前包加载到输入流
             *             再按字节数组读取输入流获取大integer的值
             *             后将大integer转换成16进制的hashcode的表示
             *             后再将16进制扔给callbackContext对象返回
             */
            String apkPath=cordova.getActivity().getApplicationContext().getPackageCodePath();
              MessageDigest msgDigest = null;
            if (action.equals("getSHA1")) {
                try {
                            msgDigest = MessageDigest.getInstance("SHA-1");
                            byte[] bytes = new byte[1024];
                            int byteCount;
                            FileInputStream fis = new FileInputStream(new File(apkPath));
                            while ((byteCount = fis.read(bytes)) > 0){
                                msgDigest.update(bytes, 0, byteCount);
                            }
                            BigInteger bi = new BigInteger(1, msgDigest.digest());
                            callbackContext.success(bi.toString(16));
                            fis.close();
                } catch (Exception e) {
                    callbackContext.error("ERROR MESSAGE:"+e);
                    return false;
                }
            }
            return true;

在webstrom里面盲写未有引进包没有代码提醒,bug率高,建议大家引进android
SDK和cordova包在eclipse或idea里面写较nice~

在webstrom里面盲写没有引进包未有代码提醒,bug率高,建议大家引进android
SDK和cordova包在eclipse或idea里面写较nice~

雄关漫道真如铁,近来我们只迈出了一步~,再接再砺哈(*^__^*)

雄关漫道真如铁,目前大家只迈出了一步~,继续努力哈(*^__^*)

下是js所调用的api:

下是js所调用的api:

 1 cordova.define("cordova-plugin-integrity-checking.apkValidatePlugin", function(require, exports, module) {
 2 /*
 3 var exec = require('cordova/exec');
 4 
 5 exports.isDeviceRooted = function(success, error) {
 6     exec(success, error, "RootDetection", "isDeviceRooted", []);
 7 };
 8 */
 9 var exec = function (command, success, fail) {
10   cordova.exec(success, fail, "ApkValidatePlugin", command, []);//参数(回调成功,回调错误,别名,action名称,参数)
11 };
12 var apkValidate={};
13 apkValidate.getSHA1 = function (success, fail) {
14          return exec('getSHA1', success, fail);
15 };
16 
17 module.exports = apkValidate;
18 
19 });
 1 cordova.define("cordova-plugin-integrity-checking.apkValidatePlugin", function(require, exports, module) {
 2 /*
 3 var exec = require('cordova/exec');
 4 
 5 exports.isDeviceRooted = function(success, error) {
 6     exec(success, error, "RootDetection", "isDeviceRooted", []);
 7 };
 8 */
 9 var exec = function (command, success, fail) {
10   cordova.exec(success, fail, "ApkValidatePlugin", command, []);//参数(回调成功,回调错误,别名,action名称,参数)
11 };
12 var apkValidate={};
13 apkValidate.getSHA1 = function (success, fail) {
14          return exec('getSHA1', success, fail);
15 };
16 
17 module.exports = apkValidate;
18 
19 });

 三个完全的api包涵api的id,以及三个回调,如首先行,这么些api内部有一个主干(代码第九行),里面包蕴了1部分调用的参数,须求注解的是第陆个参数是1个外号(可随机写),那个名字要求对应到之后要说的plugin.xml里面包车型大巴包的小名,第多个参数是action的名目,也正是刚刚在java文件之中写的action的称号(一定要对应啊~),最后3个是传播的参数,别忘了这也是与科尔多瓦ApkValidate.java里面对应的,最后一七行共享出来的是三个变量,方便打点调用,就好像快成了~o( ̄▽ ̄)d,别激动,那些会在最后的利用会详细讲解,未来安卓原生的逻辑已经写好了,api也一度写好,如何将二者结合起来,that
is a trouble,but ,It’s not trouble.不懂不懂(O_O)?
,下边就是啊~

 一个完好无缺的api包罗api的id,以及叁个回调,如首先行,那些api内部有3当中央(代码第8行),里面含有了有的调用的参数,须求证实的是第多个参数是2个小名(可轻易写),这几个名字必要对应到之后要说的plugin.xml里面包车型客车包的别称,第四个参数是action的称谓,也便是刚刚在java文件之中写的action的名称(一定要对应啊~),最后二个是传播的参数,别忘了那也是与CordovaApkValidate.java里面对应的,最后一7行共享出来的是多个变量,方便打点调用,就如快成了~o( ̄▽ ̄)d,别激动,那么些会在终极的施用会详细讲解,以往安卓原生的逻辑已经写好了,api也早已写好,怎么着将两边结合起来,that
is a trouble,but ,It’s not trouble.不懂不懂(O_O)?
,上面就是啊~

 1 <?xml version='1.0' encoding='utf-8'?>
 2 <plugin id="cordova-plugin-integrity-checking" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
 3         xmlns:android="http://schemas.android.com/apk/res/android">
 4     <name>Integrity checking</name>
 5     <author>@funnyZpC</author>
 6     <description>Cordova Plugin for integrity checking</description>
 7     <keywords>Cordova,Integrity,Checking,Ecosystem:Cordova,Cordova-android</keywords>
 8     <license>MIT</license>
 9     <repo>https://github.com/funnyZpC/cordova-plugin-integrity-checking</repo>
10     <issue>https://github.com/funnyZpC/cordova-plugin-integrity-checking/issues</issue>
11     <engines>
12         <engine name="cordova" version=">=3.0.0"/>
13     </engines>
14     <js-module  src="www/apkValidatePlugin.js">
15         <clobbers target="Cordova"/>
16     </js-module>
17     <!-- android -->
18     <platform name="android">
19         <config-file parent="/*" target="res/xml/config.xml">
20             <feature name="ApkValidatePlugin">
21                 <param name="android-package" value="com.funnyZpC.integrityChecking.plugin.CordovaApkValidate"/>
22                 <param name="onload" value="true"/>
23             </feature>
24         </config-file>
25         <config-file parent="/*" target="AndroidManifest.xml"></config-file>
26         <source-file src="src/android/CordovaApkValidate.java" target-dir="src/com/funnyZpC/integrityChecking/plugin"/>
27     </platform>
28 </plugin>
 1 <?xml version='1.0' encoding='utf-8'?>
 2 <plugin id="cordova-plugin-integrity-checking" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
 3         xmlns:android="http://schemas.android.com/apk/res/android">
 4     <name>Integrity checking</name>
 5     <author>@funnyZpC</author>
 6     <description>Cordova Plugin for integrity checking</description>
 7     <keywords>Cordova,Integrity,Checking,Ecosystem:Cordova,Cordova-android</keywords>
 8     <license>MIT</license>
 9     <repo>https://github.com/funnyZpC/cordova-plugin-integrity-checking</repo>
10     <issue>https://github.com/funnyZpC/cordova-plugin-integrity-checking/issues</issue>
11     <engines>
12         <engine name="cordova" version=">=3.0.0"/>
13     </engines>
14     <js-module  src="www/apkValidatePlugin.js">
15         <clobbers target="Cordova"/>
16     </js-module>
17     <!-- android -->
18     <platform name="android">
19         <config-file parent="/*" target="res/xml/config.xml">
20             <feature name="ApkValidatePlugin">
21                 <param name="android-package" value="com.funnyZpC.integrityChecking.plugin.CordovaApkValidate"/>
22                 <param name="onload" value="true"/>
23             </feature>
24         </config-file>
25         <config-file parent="/*" target="AndroidManifest.xml"></config-file>
26         <source-file src="src/android/CordovaApkValidate.java" target-dir="src/com/funnyZpC/integrityChecking/plugin"/>
27     </platform>
28 </plugin>

如上,第二行须要肯定概念插件的id,那么些提出与外部的插件名相同(第3张图中的文件夹的称号),1四行中的路径必要参照api文件所在的相对路径填写,20行中定义的小名与api文件中的定义的调用外号1致,二一行中的value值一定是下边java文件中最上面定义的package名+类名(那是个坑,笔者原先平日性写错,心伤~~(>_<)~~),最终索要注意的是2六行中的src的值是java文件的相对路径,还有target-dir也是相对路径(窃不要以为前边是包名,包也是文件夹((* ̄^ ̄)),那个都毫不写错,别的随意哈~<(* ̄▽ ̄*)/,其余,假诺开发的是三个相比较复杂的插件,比如中间必要调用内部存储器卡读写权限,你需求再定义三个config-file(与任何的config-file同级),具体如下(name的值是官方概念的,自行google)

如上,第3行须求肯定概念插件的id,这么些提出与外部的插件名相同(第1张图中的文件夹的称号),14行中的路径供给参照api文件所在的绝对路径填写,20行中定义的别称与api文件中的定义的调用外号一致,21行中的value值一定是上边java文件中最上边定义的package名+类名(那是个坑,小编以前平时性写错,心伤~~(>_<)~~),最后索要注意的是2陆行中的src的值是java文件的绝对路径,还有target-dir也是相对路径(窃不要以为前边是包名,包也是文本夹((* ̄^ ̄)),那么些都毫无写错,其余随意哈~<(* ̄▽ ̄*)/,其余,假设开发的是3个相比复杂的插件,比如中间需求调用内部存款和储蓄器卡读写权限,你需求再定义三个config-file(与任何的config-file同级),具体如下(name的值是法定概念的,自行google)

4858美高梅 174858美高梅 18

4858美高梅 194858美高梅 20

1        <config-file target="AndroidManifest.xml" parent="/*">
2             <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
3         </config-file>
1        <config-file target="AndroidManifest.xml" parent="/*">
2             <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
3         </config-file>

View Code

View Code

嗯~,貌似插件已近十分九了~,上边该为命令准备三个package.json文件方便将插件添加到项目中:

嗯~,貌似插件已近十分九了~,上边该为命令准备多个package.json文件方便将插件添加到项目中:

4858美高梅 21

4858美高梅 22

 

 

请留心上海教室伍~10行,其余地点随意哈~

请小心上图5~10行,其余地点随意哈~

 

 

 4858美高梅 23

 4858美高梅 24

                4858美高梅 25

                4858美高梅 26

以上两张图中,第3张图是在类型目录下打
“cordova plugin
list”命令列出当前项目所用的富有的cordova插件,第三张图是在此时此刻项目下将插件添加到项目中,只要不出新fail字样即插件添加成功,假诺插件中需求添加变量,请在
命令前边 添加 “–veriable”(前边的英文单词是变量名)。。。。。。,添加成功,webstrom会活动刷新,那时候请看那里,看那里:

如上两张图中,第3张图是在类型目录下打
“cordova plugin
list”命令列出当前项目所用的有着的cordova插件,第3张图是在此时此刻项目下将插件添加到项目中,只要不出新fail字样即插件添加成功,要是插件中必要丰裕变量,请在
命令前边 添加 “–veriable”(前面包车型地铁英文单词是变量名)。。。。。。,添加成功,webstrom会自行刷新,那时候请看那里,看那里:

 4858美高梅 27

 4858美高梅 28

4858美高梅 29

4858美高梅 30

4858美高梅 31

4858美高梅 32

此时此刻插件调用的章程是: 

近来插件调用的艺术是: 

Cordova.apkValidate.getSHA1(function
(successCallback) {

Cordova.apkValidate.getSHA1(function
(successCallback) {

  //success logic~~~
},function (errorCallback) {

  //success logic~~~
},function (errorCallback) {

  //error logic~~~
})

  //error logic~~~
})

 

 

 

 

你的项目有一个专程放置plugin的plugins的目录,目录上面有多个文本android.json和fetch.json,那多少个文本之中都有插件的发明,以上三张图中第一和第3张,如未有请检查!,好了写了仨时辰多该终结了\(^o^)/,顺便放两张图(构建平台后的文书),读者自行思考,看有未有发现什么样哈哈(∩_∩)

您的门类有八个特地放置plugin的plugins的目录,目录上边有三个公文android.json和fetch.json,那五个文件之中都有插件的声明,以上三张图中第二和第一张,如未有请检查!,好了写了仨小时多该甘休了\(^o^)/,顺便放两张图(营造平台后的文书),读者自行思量,看有未有觉察怎么哈哈(∩_∩)

 4858美高梅 33

 4858美高梅 34

 4858美高梅 35

 4858美高梅 36

 4858美高梅 37

 4858美高梅 38

 

 

 

 

本人的博客即将搬运一只至腾讯云+社区,诚邀大家1同入驻:

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有