如何在Visual Studio 2017中使用Onsen UI构建Apache Cordova应用

Hey there! Let me walk you through setting up Onsen UI with Apache Cordova in Visual Studio 2017 step by step—this should get you building cross-platform apps smoothly.

Before diving in, make sure you have all the necessary components installed:

• Open Visual Studio Installer, check if you’ve selected the Mobile development with JavaScript workload (this includes Apache Cordova tools). If not, modify your installation to add it.
• Ensure Node.js is installed (VS2017 usually includes it with the workload, but you can verify by running node -v in a command prompt).

Let’s start with a blank project to keep things simple:

• Open VS2017 → Click Create a new project.
• Search for "Apache Cordova" in the project template search bar.
• Select Blank App (Apache Cordova) → Name your project, choose a save location, and click OK.

You have two solid options to add Onsen UI—pick whichever fits your workflow:

Option 1: Install via npm (Recommended for Production) #

This keeps dependencies managed locally, great for offline development:

• Right-click your project in Solution Explorer → Select Open Command Line → Command Prompt.
• Run the following command to install Onsen UI:

  npm install onsenui --save
  

  If you plan to use AngularJS with Onsen UI, also install the bindings:

  npm install angular-onsenui --save
  

• Now, update your www/index.html to include Onsen’s CSS and JS files:

  <!-- Add these in the <head> section -->
  <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css">
  
  <!-- Add these right before the closing </body> tag -->
  <script src="node_modules/onsenui/js/onsenui.min.js"></script>
  <!-- Uncomment this if using AngularJS -->
  <!-- <script src="node_modules/angular-onsenui/js/angular-onsenui.min.js"></script> -->
  

Option 2: Use CDN Links (Quick for Testing) #

If you want to skip local installation for a quick test, use these CDN links in www/index.html:

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

Note: This requires an internet connection during development.

Let’s replace the default index.html content with a basic navigation example to see Onsen UI in action:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My Onsen Cordova App</title>
    <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- Main navigator component -->
    <ons-navigator id="app-navigator" page="home-page.html"></ons-navigator>

    <!-- Home page template -->
    <template id="home-page.html">
        <ons-page>
            <ons-toolbar>
                <div class="center">Home</div>
            </ons-toolbar>
            <div style="text-align: center; margin-top: 60px;">
                <ons-button onclick="navigateToAbout()">Go to About Page</ons-button>
            </div>
        </ons-page>
    </template>

    <!-- About page template -->
    <template id="about-page.html">
        <ons-page>
            <ons-toolbar>
                <div class="left"><ons-back-button>Back</ons-back-button></div>
                <div class="center">About</div>
            </ons-toolbar>
            <div style="text-align: center; margin-top: 60px;">
                <p>This is a cross-platform app built with Onsen UI & Apache Cordova!</p>
            </div>
        </ons-page>
    </template>

    <script src="node_modules/onsenui/js/onsenui.min.js"></script>
    <script>
        function navigateToAbout() {
            document.getElementById('app-navigator').pushPage('about-page.html');
        }
    </script>
</body>
</html>

This example uses Onsen’s <ons-navigator> for page navigation, <ons-toolbar> for headers, and <ons-button> for interactive elements—all core components you’ll use regularly.

VS2017 makes testing across platforms straightforward:

• Browser Debugging: Select Ripple - Nexus 5 or your preferred browser as the debug target, then press F5. Use VS’s debug tools or your browser’s dev tools to inspect and fix issues.
• Real Device Debugging: Connect your Android/iOS device (enable developer mode first), select the device from the target dropdown, and press F5. VS will automatically package and deploy the app to your device.
• Emulator Debugging: Use Android Emulator or iOS Simulator (requires a Mac for iOS) by selecting the emulator target and running the app.

• Leverage Cordova’s Lifecycle: Always wait for the deviceready event before accessing Cordova APIs (like camera or storage). Wrap your device-specific code in:

  document.addEventListener("deviceready", function() {
      // Cordova APIs are ready to use here
  }, false);
  

• Explore Onsen UI’s Components: Onsen has a huge library of pre-built components (lists, forms, modals, etc.)—no need to build basic UI from scratch.
• Keep Dependencies Updated: Regularly run npm update onsenui to get the latest features and bug fixes, and use VS’s Cordova Plugin Manager to update Cordova plugins.

内容的提问来源于stack exchange，提问作者hnakao11