html打包apk_cordova 打包APK加载远程服务

目录

• 开发环境
• 最佳实践
• 爬坑记录
• 启动模板
• 参考资料

开发环境

MacOS Mojave 10.14.5
Android SDK API 27
Node 12.6.0

最佳实践

Cordova 应用通常由嵌入在应用本身中的html，css和javascript组成。但是，可以创建可从Web服务器远程加载内容的Cordova应用程序。这不是最佳实践，也不建议这样做，但这并不意味着它不能完成。

除非你必须这样的理由

为Web浏览器和移动应用程序使用单一代码库的想法很诱人。跨平台的功能可能是最大的好处。想象一下，将功能添加到Web浏览器使用的网站上，移动应用程序也毫不费力地获得了该功能-无需更新应用程序。

爬坑记录

URL 地址无法访问

1. html 注释或删除 <meta http-equiv 标签，禁用安全策略
2. 由于 Android9.0 不再支持http,需要代码加设置用程序。可将构建环境降低到 Android API 27 及以下版本
3. 通过`cordova-plugin-inappbrowser`插件加载浏览器，细节可看官方文档，该方案可绕过系统安全策略，但实际操作起来过程并不顺利。最终在GitHub找到一个可运行模板，此基础上进行简单改动，实现了 android 和 ios 加载远程服务效果
4. 运行系统 Adnroid 9+ 由于默认启用更高一级安全策略，导致 http 请求无法运行，需在 platforms/android/app/src/main/AndroidManifest.xml/文件中`application节点加入 `android:usesCleartextTraffic="true"` 以启用明文传输

<application android:usesCleartextTraffic="true">

3.中可运行模板 安装细节值得注意

项目介绍包含以下功能，我们在下载该项目后需手动 npm 安装系列插件进项目

• cordova-plugin-dialogs
• cordova-plugin-email-composer
• cordova-plugin-inappbrowser
• cordova-plugin-native-spinner
• cordova-plugin-nativestorage
• cordova-plugin-network-information
• cordova-plugin-splashscreen
• cordova-sqlite-ext

其次，找到 www 目录下 index.js 文件的 onDeviceReady 方法最后插入代码，实现加载远程web 服务

...
  app_setup();
+ cordova.InAppBrowser.open('http://www.baidu.com', '_blank', 'location=no');
}

webview 避免系统浏览器打开需在 config.xml 配置

<access origin="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

cordova-plugin-inappbrowser 细节

1.隐藏浏览器地址输入栏

var ref = cordova.InAppBrowser.open(..., ..., 'location=no')

2.隐藏 Android 加载时放大缩小按钮

var ref = cordova.InAppBrowser.open(..., ..., 'location=no,zoom=no')

3.退出 webview 时直接退出 app 而非停留在 index.html 加载白屏

ref.addEventListener('exit', function () {
        // Android
	navigator.app.exitApp();
});

启动模板

免去繁琐配置，可直接运行模板，该项目托管于GitHub

shitaozhang/cordova-app-start​github.com

参考资料

加载远程服务

cordova启动首页，访问远程服务器web_app

Cordova/Phonegap load external site in main Cordova webview

将Cordova应用指向网站【墙】

URL地址无法请求

cordova打包之后，不能跟服务器请求数据了

Cordova打包成apk后url地址无法请求

扩展知识

从网站导航到本地内容【墙】