2013-03-06 37 views
8

Tôi đang phát triển một ứng dụng bằng PhoneGap & jQuery Mobile.jQuery Mobile không hoạt động trong PhoneGap Windows Phone 8

Tôi đã hoàn thành phiên bản ứng dụng Android. Tôi đang sử dụng Adobe PhoneGap để xây dựng ứng dụng của mình. Phiên bản Android hoạt động hoàn hảo. Nhưng bây giờ tôi đang cố gắng thử nghiệm phiên bản Windows Phone 8 của ứng dụng.

Tôi đã thử nghiệm phiên bản PhoneGap app.xap trong trình mô phỏng Visual Studio 2012. Có vẻ như điện thoại di động jQuery không hoạt động. Đối với mục đích thử nghiệm, tôi đã tạo một ứng dụng mẫu. với hai trang jQuery mobile. Điều đó cũng không hiệu quả.

Hãy giúp tôi. Bất kỳ sự giúp đỡ nào sẽ được đánh giá cao. Cảm ơn, =) Xin vui lòng cho tôi biết nơi đã đi sai.

Dán mã mẫu của tôi:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]--> 
    <link rel="stylesheet" href="css/index.css" /> 
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" /> 

    <title>Hello World</title> 
</head> 
<body> 
    <div data-role="page" id="page1"> 
<div data-theme="a" data-role="header"> 
    <h3> 
     Header 
    </h3> 
</div> 
<div data-role="content"> 
    <a data-role="button" href="#page2"> 
     Button 
    </a> 
</div> 
<div data-theme="a" data-role="footer" data-position="fixed"> 
    <h3> 
     Footer 
    </h3> 
</div> 
</div> 

    <div data-role="page" id="page2"> 
<div data-role="content"> 
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false" 
    width="288" height="200"> 
    <a data-role="button" href="#page1"> 
     Button 
    </a> 
    <div data-role="navbar" data-iconpos="top"> 
     <ul> 
      <li> 
       <a href="#page1" data-transition="fade" data-theme="" data-icon=""> 
        Button 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 
</div> 
    <script type="text/javascript" src="cordova-2.5.0.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body> 
</html> 

Đây là những gì tôi nhận được là đầu ra:

enter image description here

Đây là những gì tôi cần:

enter image description here

Trả lời

5

jQuery Mobile không hỗ trợ Windows Phone 8 ficially. Xem những nền tảng được hỗ trợ: http://jquerymobile.com/gbs/

+0

cảm ơn bạn đã trả lời. bạn có thể cho tôi biết một số khung công tác khác tương tự như jQuery Mobile, tương thích với 'IOS, Android, BB & Win' –

+0

có khung nào để tôi có thể dễ dàng di chuyển ứng dụng của mình không? hãy giúp đỡ –

+0

Mặc dù jQuery Mobile không hỗ trợ Windows Phone 8, nhưng nó sẽ hoạt động với các chỉnh sửa nhỏ. Dường như có thứ gì đó đang chặn chạy jQM. Bạn có chắc chắn không có vấn đề gì trong index.js? – Whizkid747

0

thay đổi trang của bạn như dưới đây và chắc chắn rằng giả lập có quyền truy cập vào internet

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]--> 
    <link rel="stylesheet" href="css/index.css" /> 
    <link rel="stylesheet" href="http://jquery.mobile/jquery.mobile-1.1.0.css" /> 
    <script type="text/javascript" src="http://jquery.mobile/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="http://jquery.mobile/jquery.mobile-1.2.0.js"></script> 
    <script type="text/javascript" src="cordova-2.5.0.js"></script> 

    <title>Hello World</title> 
</head> 
<body> 
    <div data-role="page" id="page1"> 
<div data-theme="a" data-role="header"> 
    <h3> 
     Header 
    </h3> 
</div> 
<div data-role="content"> 
    <a data-role="button" href="#page2"> 
     Button 
    </a> 
</div> 
<div data-theme="a" data-role="footer" data-position="fixed"> 
    <h3> 
     Footer 
    </h3> 
</div> 
</div> 

    <div data-role="page" id="page2"> 
<div data-role="content"> 
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false" 
    width="288" height="200"> 
    <a data-role="button" href="#page1"> 
     Button 
    </a> 
    <div data-role="navbar" data-iconpos="top"> 
     <ul> 
      <li> 
       <a href="#page1" data-transition="fade" data-theme="" data-icon=""> 
        Button 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 
</div> 

    <script type="text/javascript" src="js/index.js"></script> 

    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body> 
</html> 
+0

cảm ơn bạn đã trả lời. Nhưng vẫn không làm việc ..: ( –

+0

nhìn tôi như thể phong cách không được áp dụng. Điều đó có nghĩa là các tập tin thư viện jQuery Mobile không được nhập vì một lý do nào đó. U tốt hơn hãy thử nó trên một thiết bị thực để xem thực tế –

+0

cảm ơn bro, leme kiểm tra xem nó :) –

0

Đặt file Cordova các HEAD và đảm bảo nó là file JS đầu tiên trong trang:

JQM hoạt động tốt trên Windows Phone ... tôi gặp sự cố tương tự với sự cố của bạn và điều này đã khắc phục được sự cố.

0

Trong thực tế JQuery tốt công việc di động với windows phone 8.

Trình tự đúng để tải file js là:

tải JQuery bản thân; chỉ tải các tệp css Mobile jQuery; tải tập lệnh tùy chỉnh và css của bạn; tải phonegap (cordova) nếu cần; tải JQuery Mobile làm ứng dụng cuối cùng.

Đơn đặt hàng này hoạt động tốt cho tôi trên mọi thiết bị, bao gồm cả cửa sổ điện thoại 8 (thiết bị hoặc giả lập VS2012) Thông thường tôi đang tải tất cả nội dung này trong phần HEAD của index.html của tôi. Nếu bạn có bất kỳ nghi ngờ nào, bạn có thể kiểm tra dự án của mình trực tiếp trong VS2012 bằng mẫu Cordova như được mô tả here

Hy vọng trợ giúp này.

0

Tôi thấy cùng một vấn đề trong trình mô phỏng WP8 trong VS2012 trên Windows8. Nếu tôi tạo một bản sao cục bộ của các tệp jQuery nó hoạt động. Nếu tôi cố gắng tải chúng từ CDN thì không.

<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script> 

HOẠT ĐỘNG.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

Không hoạt động và không bị cản trở.

Tôi đã tạo bản sao cục bộ của tất cả các tệp jquery và Jquery trên thiết bị di động và tệp CSS và giao diện người dùng JQM của tôi trông giống hệt như tôi mong đợi.

Mặc dù, tôi vẫn tò mò nếu có một số tính năng danh sách trắng của trình mô phỏng không hoạt động đúng. hoặc nếu có cấu hình cho trình quản lý chuyển đổi hyper-v không hoạt động đúng cách trong hộp.

0

Tôi đã theo dõi số link này và cài đặt mẫu điện thoại trong VS 2013. Sau đó, tôi tạo một dự án sử dụng mẫu điện thoại và tệp jquery đã tải xuống và đưa chúng vào tệp html của tôi và nó hoạt động như một nét duyên dáng :) Vì lý do nào đó, CDN tham chiếu đến Jquery không hoạt động với trình mô phỏng điện thoại Windows.

Dưới đây là thứ tự bạn có thể tham khảo Jquery,

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 

    <link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" /> 
    <!--<script type="text/javascript" src="cordova.js"></script>--> 
    <script src="js/jquery-1.11.1.js"></script> 
    <script src="js/jquery.mobile-1.4.2.js"></script> 
    <title>Hello World</title> 
</head> 
Các vấn đề liên quan