Javascript 不在 Cordova with Onsen 工作

Question

我正在尝试调用 Javascript 中的一个函数，但它不起作用。

我没有在 Onsen 网站和 Google 上找到任何参考资料。

谁能告诉我在 Javascript 中调用函数的具体步骤是什么？

我是否需要在 index.js 文件中定义函数，或者我可以在脚本标签内的同一文件中编写函数吗？

我正在使用温泉2

My Project Link

我也问过一个关于 JQuery 的类似问题，但还没有解决方案。

p1.html

<body  onload="onLoad()">

<ons-page>
<ons-button id="demo" onclick="printMsg()">Click Me</ons-button>
</ons-page>

index.js

 function onLoad() {
   document.addEventListener("deviceready", onDeviceReady, false);

  }


function onDeviceReady() {

    document.getElementById('demo').addEventListener("click", printMsg,   
    false);
   document.getElementById('btnNext').addEventListener("click",   
   callNextPage, false);
   document.addEventListener("pause", onPause, false);
   document.addEventListener("resume", onResume, false);
   document.addEventListener("menubutton", onMenuKeyDown, false);

 }


 function printMsg() {
     ons.notification.alert('Hello'):
     //alert('hello'); 
     //document.addEventListener("deviceready", onDeviceReady, false);

 }

输出错误信息：

"Uncaught ReferenceError: printMsg is not defined"，来源：file:///android_asset/www/index.html

编辑：

我已经在 FileDropper

上传了我的项目

Answer 1

您正在组合多种方式来调用可能会相互冲突的函数。此外，您无需遍历用于显示警报的所有 JS。此代码以最简单的形式执行此操作：

 <ons-page>
  <ons-toolbar>
    <div class="center">My app</div>
  </ons-toolbar>

  <p style="text-align: center">
    <ons-button onclick="ons.notification.alert('Hello world!')">Click me!</ons-button>
  </p>
</ons-page>

开始学习温泉的最佳新方法是通过他们的新教程网站：http://tutorial.onsen.io/

如您所问的附加说明，您所有的 JS 都必须在 index.html 文件中，直接或通过脚本标记链接到 JS 文件。

为了用一个函数来演示上面的内容，提供如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI 2.0 Quickstart</title>

    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.2/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.2/css/onsen-css-components.css">
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.2/js/onsenui.js"></script>
    <script src="components/loader.js"></script>

    <script>
        function sampleAlert(){
            ons.notification.alert('Hello world!');
        }
    </script>
</head>

<body>

<ons-page>
  <ons-toolbar>
    <div class="center">My app</div>
  </ons-toolbar>

  <p style="text-align: center">
    <ons-button onclick="sampleAlert()">Click me!</ons-button>
  </p>
</ons-page>

</body>
</html>

只需将其复制到温泉项目中并确认 loader.js 文件位于正确的文件夹中，它将运行。

希望对您有所帮助！

编辑：

在审查您的项目时，您没有正确使用温泉。 index.html 以外的任何页面都不包含 html head 标记、css 或 JS。您必须将您的应用程序视为一个巨大的单页网站。将所有内容重新定位到 index.html 文件，这将解决您的问题。

目前您有（为了简洁和保护您的代码而减少）：

Menus.html

   <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/onsenui.css">
    <link rel="stylesheet" type="text/css" href="css/onsen-css-components.css">
    <link rel="stylesheet" type="text/css" href="css/sliding_menu.css">
    <link rel="stylesheet" type="text/css" href="css/index.css"> 

    <script type="text/javascript" src="js/angular/angular.min.js"></script>
    <script type="text/javascript" src="js/jquery/dist/jquery.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/onsenui.min.js"></script>
    <script type="text/javascript" src="js/angular-onsenui.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>   
    <script type="text/javascript" src="js/index.js"></script> 

    </head>

    <body>

    <ons-page>

      <ons-toolbar style="background-color: #6ae2b3">
        <div class="center">Menu</div>
        <div class="right">
          <ons-toolbar-button>
            <ons-icon icon="ion-plus" fixed-width="false" style="vertical-align: -4px;"></ons-icon>
          </ons-toolbar-button>
        </div>
      </ons-toolbar>

      <ons-tabbar var="navi" position="top">
        <ons-tab page="indian.html" active="true"></ons-tab>
        <ons-tab page="english1.html" ></ons-tab>
        <ons-tab page="englishpage.html"></ons-tab>
        <ons-tab page="advance.html"></ons-tab>
        <ons-tab page="drinkspage.html"></ons-tab>
      </ons-tabbar>

      <div class="navigation-bar" style="background:#6ae2b3">
        <div class="navigation-bar__center">
          <div class="button-bar" style="width:100%;padding:8px;box-sizing:border-box">
            <div class="button-bar__item" ng-click="navi.setActiveTab(0)">
              <input type="radio" name="navi-segment-a" checked>
              <div class="button-bar__button">Indian</div>
            </div>

            <div class="button-bar__item" ng-click="navi.setActiveTab(2)"> 
              <input type="radio" name="navi-segment-a">
              <div class="button-bar__button">English</div>
            </div>

             <div class="button-bar__item" ng-click="navi.setActiveTab(4)"> 
              <input type="radio" name="navi-segment-a">
              <div class="button-bar__button">Drinks</div>
            </div>
          </div>
        </div>
      </div>
    </ons-page>

它需要像这样（不完整只是一个简短的例子）将所有功能代码移动到 index.html:

<ons-page>

  <ons-toolbar style="background-color: #6ae2b3">
    <div class="center">Menu</div>
    <div class="right">
      <ons-toolbar-button>
        <ons-icon icon="ion-plus" fixed-width="false" style="vertical-align: -4px;"></ons-icon>
      </ons-toolbar-button>
    </div>
  </ons-toolbar>

  <ons-tabbar var="navi" position="top">
    <ons-tab page="indian.html" active="true"></ons-tab>
    <ons-tab page="english1.html" ></ons-tab>
    <ons-tab page="englishpage.html"></ons-tab>
    <ons-tab page="advance.html"></ons-tab>
    <ons-tab page="drinkspage.html"></ons-tab>
  </ons-tabbar>

  <div class="navigation-bar" style="background:#6ae2b3">
    <div class="navigation-bar__center">
      <div class="button-bar" style="width:100%;padding:8px;box-sizing:border-box">
        <div class="button-bar__item" ng-click="navi.setActiveTab(0)">
          <input type="radio" name="navi-segment-a" checked>
          <div class="button-bar__button">Indian</div>
        </div>

        <div class="button-bar__item" ng-click="navi.setActiveTab(2)"> 
          <input type="radio" name="navi-segment-a">
          <div class="button-bar__button">English</div>
        </div>

         <div class="button-bar__item" ng-click="navi.setActiveTab(4)"> 
          <input type="radio" name="navi-segment-a">
          <div class="button-bar__button">Drinks</div>
        </div>
      </div>
    </div>
  </div>
</ons-page>

Javascript 不在 Cordova with Onsen 工作

Javascript not working in Cordova with Onsen

javascript

jquery

cordova

onsen-ui