Cordova 运行 Web 应用
Cordova 运行 Web 应用
Cordova 简介
Cordova 非常的流行,因为它可以让 Web 开发人员来创建移动应用, 而且还可以通过 JavaScript 来调用设备硬件 API (GPS、蓝牙等)。
通常 Cordova 的做法是把应用的 Web 内容 (HTML, JavaScript, CSS) 打包到移动应用中, 这样看起来更像是一个本地应用, 即使在离线的情况下也可以使用。
其实还可以使用 Cordova 为现有的 Web 应用提供设备 API , 增强现有 Web 应用的功能。 这样做不仅可以使用服务端技术(aspx, cshtml, php等), 还可以随时更新 Web 应用, 只有在需要新的设备功能(Cordova 插件)时才更新客户端。
这样的应用架构看起来是这样子的:
个人认为, 这才是真混合开发!
新建一个 Cordova 应用
按照 Cordova 的文档说明, 创建一个测试应用, 并添加 Android 平台, 指令如下:
cordova create myApp org.apache.cordova.myApp myApp
cordova platform add android
然后先编译一次,确认可以生成 Android 应用:
cordova build android
第一次编译时, 会下载特定版本的 gradle , 需要一些时间。 一切顺利的话, 最终可以看到如下输出:
BUILD SUCCESSFUL in 19s
44 actionable tasks: 44 executed
Built the following apk(s):
~/platforms/android/app/build/outputs/apk/debug/app-debug.apk
看到最后生成了 app-debug.apk ,就算是编译成功了。
添加并使用 Cordova 原生插件
以 cordova-plugin-app-version
为例, 通过这个插件可以获取到客户端 app 的包名称以及版本等扩展:
cordova plugin add cordova-plugin-app-version
修改 index.js
文件中的 onDeviceReady
方法, 代码如下所示:
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
this.receivedEvent('deviceready');
// 启动时访问服务器上的文件
if (location.href.startsWith('file://')) {
var url = 'http://10.0.2.2/cdvtest/index.html?_t=';
var date = new Date();
url += date.toISOString();
// 注意, 一定要用 replace 方法, 否则会打开新浏览器窗口, 而不是在 Cordova 应用的 WebView 中打开。
location.replace(url);
}
else {
// 这段代码在 web 服务器上才能执行。
cordova.getAppVersion.getAppName().then(
name => {
document.getElementById('version').innerHTML = name;
},
err => {
console.error(err);
}
)
}
}
修改 config.xml
, 允许访问服务器地址:
<allow-navigation href="http://10.0.2.2" />
对于比较新的 Android 版本 (据说是 7.0 以上), 默认是不允许访问 HTTP 服务器的, 需要再修改一个配置, 允许 HTTP 访问:
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:usesCleartextTraffic="true" />
</edit-config>
修改 index.html
, 将服务器的URL添加至 CSP (Content-Security-Policy) 元数据:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://10.0.2.2 https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
最后, 再运行一次 cordova build android
, 确认重新生成了对应的 apk 文件。
安卓模拟器访问本机时的地址是
10.0.2.2
, 可以根据实际的服务器地址进行修改。
部署 Web 内容至服务器
本文的目的是在 Web 服务器上的脚本中使用 Cordova 的插件功能, 因此需要把 Cordova 的插件脚本也部署到服务器上:
cordova build android
cp -r platforms/android/app/src/main/assets/www/* /usr/share/nginx/html/cdvtest/
运行测试程序
最后, 运行一下生成的应用, 确认可以在服务器上的脚本中使用 Cordova 插件!
- C++:istreambuf_iterator与istream_iterator的区别
- 【直播】我的基因组81:看看我的vcf文件的vaf分布情况
- c语言中函数参数处理顺序-从右向左
- HERD--位运算
- 一篇文章学会miRNA-seq分析
- HERD--GCC宏
- C++拷贝构造函数(深拷贝,浅拷贝)
- 安装glog和gflags
- FFmpeg_3.2.4+SDL_2.0.5学习(1)音视频解码帧及显示/播放数据
- FFmpeg_3.2.4+SDL_2.0.5学习(2)视频同步基础
- ubuntu17.04更换主题
- ubuntu17.04新安装之后的软件准备
- 打造一流编辑器vimplus
- ffmpeg+sdl播放类
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入探究Immutable.js的实现机制(一)
- 深入探究immutable.js的实现机制(二)
- ES6 Promise 的最佳实践
- 「 Map最佳实践」什么时候适合使用 Map 而不是 Object
- ES2017 异步函数的最佳实践(`async` /`await`)
- React Hooks中这样写HTTP请求可以避免内存泄漏
- 用了这 7 个 VS Code 插件,想写一辈子代码
- 听说你还不知道Promise的allSettled()和all()的区别?
- React 条件渲染最佳实践(7 种方法)
- 一文带你层层解锁「文件下载」的奥秘
- Android实现简单C/S聊天室应用
- Android仿IOS回弹效果 支持任何控件
- 送你一道字节前端原题(Add sumOf)|文末送红宝书
- xadmin使用formfield_for_dbfield函数过滤下拉表单实例
- Python3之外部文件调用Django程序操作model等文件实现方式