在 《Cordova webapp实战开发:(4)Android环境搭建》中我们搭建好了开发环境,也给大家布置了调用插件的预习作业,做得如何了呢?今天我们来学一下如何自己从头建立一个Andorid下的cordova插件。

本次练习你能学到的

  1. 学习如何实现Android下自动更新功能
  2. 学习Android下插件类的编写
  3. 学习Android下插件的配置
  4. 学习Android下插件的调用

主要内容

  • 打开APP后检查版本更新,如果有更新则弹出更新对话框

  • APP中【检查更新】显示当前版本号,并可以点击进行版本检查更新

如何实现自动更新功能

你可以自己写代码,也可以网上找代码抄一下,我之前的 敏捷个人APP 就是从网上下的一个代码片段放进我的项目中的。不过今天和大家说的不是如何编写自动更新代码,因为我们今天要做的是如何更快的用别人写好的东西来加速自己产品开发的进度和质量。

自动更新这个东西也不涉及到什么技术难度,一般第三方要是提供了也不会出什么质量问题,能够拿来就用岂不是很好呢?网上找了一下,发现 友盟提供自动更新

很好,那就直接用这个吧,Andorid和iOS都可以用。

如何集成到我们的产品中,看他们自己写的文档:自动更新android文档 ,我就不多说了,如果遇到问题,可以在咱们群里问问大家。

插件类的编写

原生Andorid中如果调用,就看上面说的他们自己写的文档。如果我们现在要在APP中【设置】中增加自动检查和显示当前版本,则需要我们开始学习如何编写cordova插件了。

这里我们会编写一个插件,两个方法,一个方法用来检测更新,另一个方法用来获得当前APP的版本号。

闲话不说了,直接来代码。

public class GCAppPlugin extends CordovaPlugin {

    @Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if ("version".equals(action)) {
version(callbackContext);
return true;
}
else if ("checkUpdate".equals(action)) {
final Context mContext = this.cordova.getActivity();
UmengUpdateAgent.setUpdateAutoPopup(false);
UmengUpdateAgent.setUpdateListener(new UmengUpdateListener() {
@Override
public void onUpdateReturned(int updateStatus, UpdateResponse updateInfo) {
switch (updateStatus) {
case UpdateStatus.Yes: // has update
UmengUpdateAgent.showUpdateDialog(mContext, updateInfo);
break;
case UpdateStatus.No: // has no update
Toast.makeText(mContext, "现在使用的已是最新版本了", Toast.LENGTH_SHORT).show();
break;
case UpdateStatus.NoneWifi: // none wifi
Toast.makeText(mContext, "没有wifi连接, 只在wifi下更新", Toast.LENGTH_SHORT).show();
break;
case UpdateStatus.Timeout: // time out
Toast.makeText(mContext, "超时", Toast.LENGTH_SHORT).show();
break;
}
}
});
UmengUpdateAgent.forceUpdate(mContext);
return true;
}
} private synchronized void version(CallbackContext callbackContext) {
  PackageInfo packInfo;
  try {
    packInfo = this.cordova.getActivity().getPackageManager().getPackageInfo(this.cordova.getActivity().getPackageName(),0);
    String version = packInfo.versionName +"("+packInfo.versionCode+")";
    callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, version));
  } catch (NameNotFoundException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
  }
}

Javascript如何得到插件调用后的返回结果?主要通过类似 callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, version)); 代码返回PluginResult,失败和成功都可以触发Javascript执行对应的自定义函数

插件的配置

插件写完了,很多人遇到的下一个问题就是怎么配置才能在Javascript中调用呢?我们今天也不解析源码,为什么呢?因为我没看:)不过,我一定要给大家说清楚如何配置,否则就永远调用不了插件。

打开res/xml/config.xml文件,添加feature,必须匹配类名,因为源码中是通过这些去配对的。上面我们写了更新插件,现在就是要配置一下这个插件类到功能名称,我在配置文件中加入了下文粗体部分内容

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.glodon.gcapp" version="2.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>掌中广材</name>
<description> 随时随地查找全国最完整最及时的信息价 </description>
<author email="22626496@qq.com" href="http://www.中国信息价.cn"> 周金根 </author>
<content src="html/scj/scj.html" />
<access origin="*" />
<access origin="tel:*" launch-external="yes"/>
<access origin="geo:*" launch-external="yes"/>
<access origin="mailto:*" launch-external="yes"/>
<access origin="sms:*" launch-external="yes"/>
<access origin="market:*" launch-external="yes"/> <preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="LoadingDialog" value="正在加载中..." /> <feature name="Device">
<param name="android-package" value="org.apache.cordova.device.Device" />
</feature>
<feature name="NetworkStatus">
<param name="android-package" value="org.apache.cordova.networkinformation.NetworkManager" />
</feature>
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
</feature>
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>
<feature name="BarcodeScanner">
<param name="android-package" value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />
</feature>
<feature name="Gcapp">
<param name="android-package" value="com.gldjc.guangcaiclient.GCAppPlugin" />
</feature>
</widget>

代码贴完了,我还是要再多说一下,

  • com.gldjc.guangcaiclient.GCAppPlugin  是插件类的全面
  • Gcapp是 feature 名称,下面大家就知道在哪里会用到了

以上文件就是告诉cordova,我们新增了一个Gcapp功能,这个功能会调用我们的原生插件Java对象,接下来就是Javascript如何能调用到这个类了,最重要的就是这个Gcapp功能名称。

我们接着就要写Javascript代码来调用这个功能了,如何写呢?继续往下看,我在assets/www/plugins/下新增目录并建立了文件gcapp.js,完整路径是 assets/www/plugins/com.gldjc.guangcaiclient/www/gcapp.js,代码如下:

cordova.define('com.gldjc.guangcaiclient.gcapp', function(require, exports, module) {
var exec = require("cordova/exec"); function Gcapp() {}; Gcapp.prototype.version = function (getversion) {
exec(getversion, null, 'Gcapp', 'version', []);
};    Gcapp.prototype.checkUpdate = function () {
exec(null, null, 'Gcapp', 'checkUpdate', []);
}; var gcapp = new Gcapp();
module.exports = gcapp;
});

exec是cordova.js中内部的函数,当插件返回 PluginResult.Status.OK 时会执行exec的成功回调函数,如果插件返回的是错误,则会执行exec的错误回调函数。这里我们解释一下

 exec(null, null, 'Gcapp', 'checkUpdate', []);

其中Gcapp就是我们在上一步骤加的feature名称,大小写匹配着写,通过这个名称,cordova才能找到调用那个java插件类,然后通过checkUpdate知道调用这个插件类的哪个方法,后面[]中则是参数。因为我这个插件不需要参数,所以为空。

Javascript插件类也配对成功了,那如何调用呢?你可以直接在html中包括这个js,不过我们一般会再配置一个js,那就是assets/www/cordova_plugins.js,这样就不用对每个插件类都去写一遍了,cordova会遍历你的配置去加载它们。

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"file": "plugins/org.apache.cordova.device/www/device.js",
"id": "org.apache.cordova.device.device",
"clobbers": [
"device"
]
},
{
"file": "plugins/org.apache.cordova.networkinformation/www/network.js",
"id": "org.apache.cordova.networkinformation.network",
"clobbers": [
"navigator.connection",
"navigator.network.connection"
]
},
{
"file": "plugins/org.apache.cordova.networkinformation/www/Connection.js",
"id": "org.apache.cordova.networkinformation.Connection",
"clobbers": [
"Connection"
]
},
{
"file": "plugins/org.apache.cordova.splashscreen/www/splashscreen.js",
"id": "org.apache.cordova.splashscreen",
"clobbers": [
"navigator.splashscreen"
]
},
{
"file" : "plugins/org.apache.cordova.camera/www/CameraConstants.js",
"id" : "org.apache.cordova.camera.Camera",
"clobbers" : [ "Camera" ]
},
{
"file" : "plugins/org.apache.cordova.camera/www/CameraPopoverOptions.js",
"id" : "org.apache.cordova.camera.CameraPopoverOptions",
"clobbers" : [ "CameraPopoverOptions" ]
},
{
"file" : "plugins/org.apache.cordova.camera/www/Camera.js",
"id" : "org.apache.cordova.camera.camera",
"clobbers" : [ "navigator.camera" ]
},
{
"file" : "plugins/org.apache.cordova.camera/www/CameraPopoverHandle.js",
"id" : "org.apache.cordova.camera.CameraPopoverHandle",
"clobbers" : [ "CameraPopoverHandle" ]
},
{
"file" : "plugins/com.phonegap.plugins.barcodescanner/www/barcodescanner.js",
"id" : "com.phonegap.plugins.barcodescanner.barcodescanner",
"clobbers" : [ "barcodescanner" ]
},
{
"file": "plugins/com.gldjc.guangcaiclient/www/gcapp.js",
"id": "com.gldjc.guangcaiclient.gcapp",
"clobbers": [
"gcapp"

]
}

];
module.exports.metadata =
// TOP OF METADATA
{
"org.apache.cordova.device": "0.2.13"
}
// BOTTOM OF METADATA
});

file表示我们去哪里找脚本插件定义js,id是之前我们在gcapp.js中开头cordova.define中写的标识,cordova通过这个标志去找到我们的Javascript插件定义,而clobbers则是我们在前端通过什么对象名来调用这个插件。这里我写的是gcapp,则后面调用则只需要写成gcapp.checkUpdate 即可

插件的调用

万事俱备,只欠东风,你们可以开始看到结果了,如果从头到这里一步成功,那应该还是蛮兴奋的事情吧。

具体前端页面如何设计我就不说了,我的页面效果就如本文最前面的图片,在js中我是这些调用version的,至于checkUpdate就是一样了,在按钮的click事件中调用 gcapp.checkUpdate(); 即可

$(document).on("PG_pageinit", function(event) {
gcapp.version(function(version){
$("#version").html(version);
});
});

PhoneGap App开发 477842664  

Cordova webapp实战开发:(5)如何写一个Andorid下自动更新的插件?的更多相关文章

  1. Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?

    上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的 学习如何获取 ...

  2. Cordova webapp实战开发:(7)如何通过简单的方法做到,不重新发布APP来修复bug、增加功能、或者躲开苹果的一些严格审核?

    到<Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?>为止,我们已经大体学会了如何使用Cordova了,那些都是使用Cordova的开发者必备的技能. ...

  3. Cordova webapp实战开发:(4)Android环境搭建

    在<Cordova webapp实战开发:(3)后面可能会学到的东西>中我们说了一下后续大致包括的内容,今天我们继续.上周我在掌中广材集成了友盟的社交分享,今天想集成iOS应该很顺利的,但 ...

  4. Cordova webapp实战开发:(3)后面可能会学到的东西

    在<Cordova webapp实战开发:(2)认识一下Cordova>中我们了解了Cordova和Phonegap的关系,并简要介绍了一下它的架构,以及多平台性,并给大家留了一些作业.我 ...

  5. Cordova webapp实战开发:(2)认识一下Cordova

    昨天写了第一篇 <Cordova webapp实战开发:(1)为什么选择 Cordova webapp?>,意料中看到大家对这个主题的兴趣,我新建的PhoneGap App开发 34819 ...

  6. Cordova webapp实战开发:(1)为什么选择 Cordova webapp?

    很长时间没有专注写代码了,即使写点代码也主要是写写敏捷个人app,这个App主体内容是我用了一周的时间,使用PhoneGap+JQueryMobile搭建的,之所以会比较快的完成,是因为11年我在做建 ...

  7. Cordova webapp实战开发(20161207 )

    http://www.cnblogs.com/zhoujg/archive/2015/05/28/4534932.html 1.https://www.jetbrains.com/idea/downl ...

  8. Python+Flask+Gunicorn 项目实战(一) 从零开始,写一个Markdown解析器 —— 初体验

    (一)前言 在开始学习之前,你需要确保你对Python, JavaScript, HTML, Markdown语法有非常基础的了解.项目的源码你可以在 https://github.com/zhu-y ...

  9. 如何手动写一个Python脚本自动爬取Bilibili小视频

    如何手动写一个Python脚本自动爬取Bilibili小视频 国庆结束之余,某个不务正业的码农不好好干活,在B站瞎逛着,毕竟国庆嘛,还让不让人休息了诶-- 我身边的很多小伙伴们在朋友圈里面晒着出去游玩 ...

随机推荐

  1. 使用T-SQL找出执行时间过长的作业

        有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下:   SELECT sj.name , ...

  2. Jsoup 使用教程:数据抽取

    1.使用DOM方法来遍历一个文档 问题 你有一个HTML文档要从中提取数据,并了解这个HTML文档的结构. 方法 将HTML解析成一个Document之后,就可以使用类似于DOM的方法进行操作.示例代 ...

  3. Spring集成MyBatis完整示例

    该文详细的通过Spring IOC.MyBatis.Servlet.Maven及Spring整合MyBatis的等技术完成一个简单的图书管理功能,实现图书列表.删除.多删除.编辑.新增功能.梳理前面学 ...

  4. JS常用语句

    JavaScript常用语句 1.document.write("");    输出语句 2.JS中的注释为   // 3.传统的HTML文档顺序是:     document-& ...

  5. 重温吕鑫MFC教学视频(一)

    重温吕鑫MFC教学视频(一)1. picture控件的使用,可以显示icon和bitmap2. WM_Create窗口的创建3. 创建的销毁消息及区别WM_SYSCOMMAND WM_CLOSE WM ...

  6. 发现一个强大的可视化第三方库pyecharts

    pyecharts 目前尚在不断的更新中,值得重点研究和学习的图表库

  7. Kong安装教程(v1.0.2)

    使用的软件 Unbuntu 虚拟机(有自己的服务器更好) PostgreSQL kong kong-dashboard docker spring boot 安装 PostgreSQL kong 需要 ...

  8. d2-admin中那些不错的技巧

    d2-admin基于vue-cli3 路由相关 刷新路由,参照官方  组件内的守卫 但是搞不明白为何加了句 render:h => h() { path: 'refresh', name: 'r ...

  9. [Hinton] Neural Networks for Machine Learning - RNN

    Link: Neural Networks for Machine Learning - 多伦多大学 Link: Hinton的CSC321课程笔记 补充: 参见cs231n 2017版本,ppt写得 ...

  10. [Node.js] 3、搭建hexo博客

      一.安装新版本的nodejs和npm 安装n模块: npm install -g n 升级node.js到最新稳定版 n stable   二.安装hexo note: 参考github,不要去其 ...