Phonegap 是不是支持根相对路径?最佳实践是啥?

Posted

技术标签:

【中文标题】Phonegap 是不是支持根相对路径?最佳实践是啥?【英文标题】:Does Phonegap support root relative path? What are the best practices?Phonegap 是否支持根相对路径?最佳实践是什么? 【发布时间】:2014-09-22 01:31:17 【问题描述】:

读完PhoneGap on ios with absolute path URLs for assets后我真的很困惑 还有几个问题:

Phonegap 是否支持根相对路径?例如,用于混合移动开发的Ionic framework 在其samples 中有这样的路径:

<script src="//ionic/js/ionic.bundle.min.js"></script>

Phonegap 路径的最佳实践是什么?

【问题讨论】:

【参考方案1】:

基本上,在电话间隙开发中,与您的代码有关的所有内容都位于 www 文件夹中。

-myApp
   -www
      -index.html
      -img
      -js
      -css
      -libraries
      -templates

最好只将文件称为js/file.jscss/file.css,即相对于 index.html。

根相对路径可能会因平台而发生冲突,因此会造成不必要的麻烦。

根相对路径:

做这样的事情:

<link href="/css/app.css">

如果您有本地服务器设置并将您的 myApp/www 文件夹设置为根目录,这将在您的浏览器中运行。

但是,当您在 cordova 中构建应用并在手机上对其进行测试时,它会显示不正确,因为它没有对该服务器根目录的任何引用,并且会将其引用为 file:///

绝对路径

绝对路径需要您提及完整地址。创建应用程序时,您的代码位于myApp/www 文件夹中。但是当您构建应用程序(假设是 android)时,它会被移动到 platforms/android/assets/www 文件夹。所以你的绝对路径会再次出错。

远程服务器

您的应用显然与远程服务器交互。如果您将图像存储在远程服务器上,则必须在应用程序中使用绝对路径引用它们。

【讨论】:

感谢您的回答。但是,它主要涵盖了第二个问题。你能给我更多关于根相对路径的怪癖的细节吗?我找不到任何关于它的文档。那么 src="//ionic/js/ionic.bundle.min.js" 的 Ionic 风格呢? @natvarun 所以,Ionic 的家伙把事情搞砸了,现在就修复它;) 在我的情况下,将路径 relativd 设置为 index.html 不起作用。 library/css/libs/slick/slick.js 导致 file:///library/css/libs/slick/slick.js 一旦封装在 Android 应用程序中,显然找不到。你明白我为什么会面临这种行为吗? 我想你应该开始一个新线程 - 不太可能有人会在评论中回答 + 这是一种不好的做法,并不真正符合堆栈规则【参考方案2】:

我在尝试解决相同/类似的挑战时偶然发现了这个旧线程,图像不在设备上呈现,但奇怪的是,在使用实时服务器或 Chrome 浏览器运行时会呈现。

如果您正在阅读本文,则图像的文件规范也是区分大小写的。 Chrome 不在乎,但 Cordova (Phonegap) 会!

【讨论】:

【参考方案3】:

参考这个链接 https://github.com/apache/cordova-ios/issues/883#issuecomment-643657781

你可以像这样在config.xml中添加prefrence标签

<preference name="scheme" value="app" />

在 cardova 和 phonegap 中,他们使用自定义协议 (app://) 来引用本地可用的文件。

【讨论】:

以上是关于Phonegap 是不是支持根相对路径?最佳实践是啥?的主要内容,如果未能解决你的问题,请参考以下文章

Web 服务和 phonegap:最佳实践

Phonegap 保存数据超过 5mb 限制的最佳实践

使用 PhoneGap/Cordova 时应用程序和服务器之间通信的最佳实践

在 Phonegap / Sencha 中观看 YouTube 的最佳实践

PhoneGap 上页眉和页脚的最佳实践

PhoneGap Build 和 CLI 的相对图标路径