Adobe Dreamweaver CC Phonegap 构建服务问题

Posted

技术标签:

【中文标题】Adobe Dreamweaver CC Phonegap 构建服务问题【英文标题】：Adobe Dreamweaver CC Phonegap Build Service Issue 【发布时间】：2013-06-27 04:21:33 【问题描述】：

我正在尝试在 Adob​​e Dreamweaver CC 中使用 jQuery mobile，然后使用 phonegap 构建服务将应用程序部署到我的手机。这里的问题是 Dreamweaver 设计面板显示 jQuery Mobile UI，但通过电话部署的应用程序 APK 却没有。 :(

请在下面找到带有设计和代码面板的 Dreamweaver CC 屏幕截图。

在下面找到整个 index.html 代码：

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">
<script src="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.accordion.custom.min.js" type="text/javascript"></script>
</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview">
            <li><a href="#page2">Accenture</a></li>
            <li><a href="#page3">Digital</a></li>
            <li><a href="#page4">CASF RIA</a></li>
            <li><a href="#page5">Hybrid Applications using PhoneGap</a></li>
        </ul>       
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header">
        <a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>ACCENTURE Page</h1>
    </div>
    <div data-role="content">
      <div data-role="fieldcontain">
        <label for="selectmenu" class="select">Select Technology Areas:</label>
        <select name="selectmenu" id="selectmenu">
          <option value="option1">Digital</option>
          <option value="option2">Oracle</option>
          <option value="option3">Mobile</option>
        </select>
      </div>
      <div data-role="fieldcontain">
        <label for="slider">Value:</label>
        <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
      </div>
      <div data-role="fieldcontain">
        <label for="flipswitch">Option:</label>
        <select name="flipswitch" id="flipswitch" data-role="slider">
          <option value="off">Off</option>
          <option value="on">On</option>
        </select>
      </div>
      <div data-role="collapsible-set">
        <div data-role="collapsible">
          <h3>Header</h3>
          <p>Content</p>
        </div>
        <div data-role="collapsible" data-collapsed="true">
          <h3>Header</h3>
          <p>Content</p>
        </div>
        <div data-role="collapsible" data-collapsed="true">
          <h3>Header</h3>
          <p>Content</p>
        </div>
      </div>




    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="page3">
    <div data-role="header">
        <a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>DIGITAL Page</h1>
    </div>
    <div data-role="content">   

    <div id="Accordion1">
      <h3><a href="#">Section 1</a></h3>
      <div>
        <p>Content 1</p>
      </div>
      <h3><a href="#">Section 2</a></h3>
      <div>
        <p>Content 2</p>
      </div>
      <h3><a href="#">Section 3</a></h3>
      <div>
        <p>Content 3</p>
      </div>
    </div>
Content </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="page4">
    <div data-role="header">
        <a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>CASF RIA</h1>
    </div>
    <div data-role="content">
      <ol data-role="listview" data-inset="true" data-split-icon="arrow-d">
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
      </ol>
Content </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="page5">
    <div data-role="header">
        <a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>HYBRID APPLICATIONS using PhoneGap</h1>
    </div>
    <div data-role="content">
      <div data-role="fieldcontain">
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" value=""  />
      </div>
Content </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
<script type="text/javascript">
$(function() 
    $( "#Accordion1" ).accordion(); 
);
</script>
</body>
</html>

这是它在移动设备中的外观：

任何帮助将不胜感激:)

谢谢。

【问题讨论】：

【参考方案1】：

浏览了 APK 后，才发现 Dreamweaver CC 在从 Macintosh 打包 APK 时存在错误。 jQuery mobile 的主题 CSS 文件被作为默认的 Macintosh 硬盘路径。因此，您需要稍微调整一下相对文件路径。

Macintosh 文件路径：

<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>

而是将主题复制到以下文件夹并使用相对文件路径：

<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">

效果很好:)

【讨论】：

以上是关于Adobe Dreamweaver CC Phonegap 构建服务问题的主要内容，如果未能解决你的问题，请参考以下文章

Adobe Dreamweaver CC Phonegap 构建服务问题

《Adobe Dreamweaver Cc帮助和教程（中文)》高清pdf下载链接

《Adobe Dreamweaver Cc帮助和教程（中文)》高清pdf下载链接

adobe cc最新版 软件安装与激活

修改Dreamweaver CC 2017 代码背景颜色

Dreamweaver各版本下载（另附带SubLime，HBuilder）