Fatal编程技术网
  • cordova/
  • 在Cordova应用程序中使用RequireJS配置Onsen UI

在Cordova应用程序中使用RequireJS配置Onsen UI

cordova requirejs

在Cordova应用程序中使用RequireJS配置Onsen UI,cordova,requirejs,onsen-ui,Cordova,Requirejs,Onsen Ui,我不熟悉requireJS和Onsen UI。我正在将一个现有的HTML5应用程序迁移到cordova，一切都很好。现有代码使用requireJS加载模块，现在我尝试添加Onsen UI以提供更好的移动UI。我已经运行了Onsen UI示例模板，它们工作得很好，但是当我试图在现有的requireJS配置中包含Onsen UI模块时，页面无法正确加载 以前有人做过这种配置吗？或者有人能给我指一些文件吗？我试图在这个项目（）中为ionic+angular+require遵循类似的配置，但没有任何运气

我不熟悉requireJS和Onsen UI。我正在将一个现有的HTML5应用程序迁移到cordova，一切都很好。现有代码使用requireJS加载模块，现在我尝试添加Onsen UI以提供更好的移动UI。我已经运行了Onsen UI示例模板，它们工作得很好，但是当我试图在现有的requireJS配置中包含Onsen UI模块时，页面无法正确加载

以前有人做过这种配置吗？或者有人能给我指一些文件吗？我试图在这个项目（）中为ionic+angular+require遵循类似的配置，但没有任何运气

这是我的index.html

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="stylesheet" type="text/css" href="css/app.css" />
  <!-- Onsenui CSS -->
  <link rel="stylesheet" type="text/css" href="css/lib/onsenui.css" />
  <link rel="stylesheet" type="text/css" href="css/lib/onsen-css-components.css" />
</head>
<body>
  <ons-split-view 
    secondary-page="menu.html" 
    main-page="page1.html" 
    main-page-width="70%" 
    collapse="portrait">
  </ons-split-view>
  <ons-template id="page1.html">
    <ons-page class="center">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="ons.splitView.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Page 1</div>
      </ons-toolbar>
      <div class="content-padded" style="font-size: 13px; text-align: center; color: #999;">
        <p>Rotate the device to landscape/portrait see the views split/collapse.</p>
        <p>Or resize the window so that the width is larger than the height (landscape)/smaller than the height (portrait).</p> 
      </div>
      <ons-bottom-toolbar>
      </ons-bottom-toolbar>
    </ons-page>
  </ons-template>
  <ons-template id="page2.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">Page 2</div>
      </ons-toolbar>
      <div class="content-padded" style="font-size: 13px; text-align: center; color: #999;">
        <p>Rotate the device to landscape/portrait see the views split/collapse.</p>
        <p>Or resize the window so that the width is larger than the height (landscape)/smaller than the height (portrait).</p> 
      </div>
      <ons-bottom-toolbar>
      </ons-bottom-toolbar>
    </ons-page>
  </ons-template>
  <ons-template id="menu.html">
    <ons-page modifier="menu-page">
      <ons-toolbar modifier="transparent"></ons-toolbar>
      <ons-list class="menu-list">
        <ons-list-item class="menu-item" ng-click="ons.splitView.setMainPage('page1.html', {closeMenu: true})">
          <ons-icon icon="fa-plus"></ons-icon>
          New Post
        </ons-list-item>
        <ons-list-item class="menu-item" ng-click="ons.splitView.setMainPage('page2.html', {closeMenu: true})">
          <ons-icon icon="fa-bookmark"></ons-icon>
          Bookmark
        </ons-list-item>
        <ons-list-item class="menu-item" ng-click="ons.splitView.setMainPage('page1.html', {closeMenu: true})">
          <ons-icon icon="fa-twitter"></ons-icon>
          Official Twitter
        </ons-list-item>
      </ons-list>
      <br>
      <ons-list class="bottom-menu-list">
        <ons-list-item class="bottom-menu-item" ng-click="ons.splitView.setMainPage('page2.html', {closeMenu: true})">
          Settings
          <div class="notification menu-notification">3</div>
        </ons-list-item>
        <ons-list-item class="bottom-menu-item" ng-click="ons.splitView.setMainPage('page1.html', {closeMenu: true})">
          Help
        </ons-list-item>
        <ons-list-item class="bottom-menu-item" ng-click="ons.splitView.setMainPage('page2.html', {closeMenu: true})">
          Send feedback
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>
  <script data-main="js/main" src="js/lib/require.js"></script>
</body>
</html>
页面加载正常一秒钟，然后我在javascript控制台中得到一个空白页面和下面的错误

Error: This function is not registered in the lock list.
at Object.window.DoorLock.DoorLock._unlock (http://localhost:8383/project/js/lib/onsenui.js:4112:15)
at unlock (http://localhost:8383/project/js/lib/onsenui.js:4100:14)
at h.$broadcast (http://localhost:8383/project/js/lib/angular.min.js:104:521)
at link.post (http://localhost:8383/project/js/lib/onsenui.js:9143:24)
at E (http://localhost:8383/project/js/lib/angular.min.js:49:345)
at f (http://localhost:8383/project/js/lib/angular.min.js:42:399)
at f (http://localhost:8383/project/js/lib/angular.min.js:42:416)
at f (http://localhost:8383/project/js/lib/angular.min.js:42:416)
at http://localhost:8383/project/js/lib/angular.min.js:42:67
at http://localhost:8383/project/js/lib/angular.min.js:18:67 angular.min.js:84(anonymous function) angular.min.js:84(anonymous function) 
GET http://localhost:8383/project/page1.html net::ERR_EMPTY_RESPONSE angular.min.js:72
Error: Page is not found: page1.html
非常感谢您的帮助

Error: This function is not registered in the lock list.
at Object.window.DoorLock.DoorLock._unlock (http://localhost:8383/project/js/lib/onsenui.js:4112:15)
at unlock (http://localhost:8383/project/js/lib/onsenui.js:4100:14)
at h.$broadcast (http://localhost:8383/project/js/lib/angular.min.js:104:521)
at link.post (http://localhost:8383/project/js/lib/onsenui.js:9143:24)
at E (http://localhost:8383/project/js/lib/angular.min.js:49:345)
at f (http://localhost:8383/project/js/lib/angular.min.js:42:399)
at f (http://localhost:8383/project/js/lib/angular.min.js:42:416)
at f (http://localhost:8383/project/js/lib/angular.min.js:42:416)
at http://localhost:8383/project/js/lib/angular.min.js:42:67
at http://localhost:8383/project/js/lib/angular.min.js:18:67 angular.min.js:84(anonymous function) angular.min.js:84(anonymous function) 
GET http://localhost:8383/project/page1.html net::ERR_EMPTY_RESPONSE angular.min.js:72
Error: Page is not found: page1.html