尝试MDC for Web示例失败，求Phonegap/Cordova的MDC入门教程

Hey there! I totally get how frustrating it can be when official web examples don’t translate smoothly to a Cordova/PhoneGap project—especially when you’re just starting out. Let me walk you through a super beginner-friendly guide to get Material Design Components (MDC) up and running in your Cordova app, step by step.

First, let’s make sure you have a working Cordova project to build on:

• If you don’t have Cordova installed yet, open your terminal and run npm install -g cordova to install it globally.
• Create a new project with this command: cordova create my-mdc-app com.example.mymdcapp MyMDCCApp (you can change the name and package ID to whatever you want).
• Navigate into your new project folder: cd my-mdc-app
• Add a platform you want to build for—for example, cordova platform add android (if you’re on a Mac, you can use ios instead).

We’ll use npm to install MDC so you don’t rely on external links. Here’s how:

• Run npm install material-components-web in your project terminal. This will download all MDC files into a node_modules folder.
• Open the www/index.html file in your favorite code editor.
• In the <head> section, add links to the local MDC CSS and JS files:

  <!-- MDC Styles -->
  <link href="../node_modules/material-components-web/dist/material-components-web.min.css" rel="stylesheet">
  <!-- MDC Scripts -->
  <script src="../node_modules/material-components-web/dist/material-components-web.min.js"></script>
  

• Pro tip: If you want to bundle MDC directly with your app (instead of keeping it in node_modules), copy the material-components-web/dist folder into your www directory (rename it to mdc for simplicity). Then update the links to:

  <link href="./mdc/material-components-web.min.css" rel="stylesheet">
  <script src="./mdc/material-components-web.min.js"></script>
  

Let’s start with a simple raised button—one of the most common MDC components. Replace the default content in the <body> of index.html with this:

<body>
  <div class="mdc-button mdc-button--raised" id="myButton">
    <span class="mdc-button__ripple"></span>
    <span class="mdc-button__label">Click Me!</span>
  </div>

  <script>
    // Wait for the DOM to load before initializing MDC components
    document.addEventListener('DOMContentLoaded', () => {
      // Initialize the ripple effect for the button
      const button = new mdc.ripple.MDCRipple(document.querySelector('#myButton'));
      
      // Add a click handler to test it works
      document.querySelector('#myButton').addEventListener('click', () => {
        alert('MDC Button is working in Cordova! 🎉');
      });
    });
  </script>
</body>

• The key thing here is initializing the component with mdc.ripple.MDCRipple—most MDC components need this step to activate their interactive features (like ripples, animations, etc.).

Now let’s see if it works:

• Connect a physical device to your computer (or set up an emulator).
• Run cordova run android (or cordova run ios) in your terminal. This will build the app and install it on your device/emulator.
• You should see a raised Material Design button that ripples when you tap it, and an alert will pop up confirming it’s working.

If you run into problems, here are quick fixes for the most common beginner hurdles:

• MDC styles aren’t showing up: Double-check your file paths in the <head> section. If you copied MDC to www/mdc, make sure the links start with ./mdc/.
• Components don’t respond to taps: Make sure you’re initializing the correct MDC class for the component. For example, text fields use mdc.textField.MDCTextField, cards use mdc.card.MDCCard, etc.
• App won’t build: Ensure you have the necessary platform tools installed (like Android Studio for Android, Xcode for iOS) and that your Cordova version is up to date. Run cordova platform update android to refresh your platform files if needed.

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