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.js
和css/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 是不是支持根相对路径?最佳实践是啥?的主要内容,如果未能解决你的问题,请参考以下文章
使用 PhoneGap/Cordova 时应用程序和服务器之间通信的最佳实践