Cordova 运行 Web 应用
小编:管理员 633阅读 2022.09.13
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, 允许访问服务器地址:
复制
对于比较新的 Android 版本 (据说是 7.0 以上), 默认是不允许访问 HTTP 服务器的, 需要再修改一个配置, 允许 HTTP 访问:
复制
修改index.html, 将服务器的URL添加至 CSP (Content-Security-Policy) 元数据:
复制最后, 再运行一次cordova build android, 确认重新生成了对应的 apk 文件。
部署 Web 内容至服务器安卓模拟器访问本机时的地址是10.0.2.2, 可以根据实际的服务器地址进行修改。
本文的目的是在 Web 服务器上的脚本中使用 Cordova 的插件功能, 因此需要把 Cordova 的插件脚本也部署到服务器上:
cordova build android cp -r platforms/android/app/src/main/assets/www/* /usr/share/nginx/html/cdvtest/复制运行测试程序
最后, 运行一下生成的应用, 确认可以在服务器上的脚本中使用 Cordova 插件!
相关推荐
- Cordova 什么是Cordova? Cordova是用于使用HTML,CSS和JS构建移动应用的平台。我们可以认为Cordova是一个容器,用于将我们的网络应用程序与本机移动功能连接。默认情况下,Web应用程序不能使用本机移动功能。这就是Cordova进来的地方。它为网络应用和移动设备之间的连…
- 3DMAX提示和技巧 本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时,一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面,请在单个视口中工作并关闭 3ds Max 命令面…