首页手记 Flutter与H5混合教程：入门详解与实战指南

Flutter与H5混合教程：入门详解与实战指南

标签：

WebApp

概述

本文详细介绍如何安装Flutter和H5开发环境、配置开发工具，以及实现页面跳转和数据交互等实战内容。读者还将了解常见问题的解决方案及提高项目可维护性的技巧。

引入与安装

Flutter与H5混合开发结合了Flutter的高性能渲染和H5的灵活性，为应用提供了丰富的功能。本文详细介绍了如何安装Flutter和H5开发环境、配置开发工具，以及实现页面跳转和数据交互等实战内容。

安装Flutter和H5开发环境

首先，确保你的开发环境已经安装了Flutter SDK。可以访问Flutter官网下载最新的Flutter SDK，然后按照官方文档的说明进行安装。

安装Flutter

下载Flutter SDK后解压到指定目录。
配置环境变量：
- 在Windows上，添加Flutter SDK的bin目录到系统环境变量。
- 在macOS或Linux上，可以将export PATH="$PATH:/path/to/flutter/bin"添加到~/.bashrc或~/.zshrc文件中。
验证安装是否成功：
```
flutter doctor
```

安装H5开发环境

安装Node.js：H5开发通常使用前端框架如React、Vue等，这些框架需要Node.js环境。访问Node.js官网下载安装包，根据操作系统安装。
安装前端框架：如Vue或React。以Vue为例，安装Vue CLI：
```
npm install -g @vue/cli
```
验证安装：
```
vue --version
```

配置开发工具

为了开发Flutter与H5混合应用，需要配置IDE或文本编辑器。

Flutter DevTools：安装Flutter DevTools，这是一个集成在IDE中的调试工具。可以通过flutter pub global activate flutter_devtools命令安装。
IDE配置：推荐使用VS Code作为Flutter和H5开发的IDE。安装Flutter和Dart插件，以及Vue或React插件。
VS Code配置：
- 安装Flutter插件。
- 安装Dart插件。
- 安装Vue或React插件。
- 配置VS Code的设置文件，确保Flutter SDK路径正确。

VS Code配置示例

{
  "dart.flutterSdkPath": "/path/to/flutter/sdk",
  "javascript侮"."languageServer": "vscode-react-language-server"
}

正确的配置示例：

{
  "dart.flutterSdkPath": "/path/to/flutter/sdk",
  "javascript侮":"vscode-react-language-server"
}

通过以上安装和配置步骤，你已经准备好开始开发Flutter与H5混合应用了。

基础知识

在开始实际开发之前，了解Flutter和H5的基本组件和语法是必要的。这将帮助你更好地理解如何将H5页面嵌入Flutter应用并且实现它们之间的交互。

Flutter的基本组件与H5语法

Flutter是一个跨平台UI框架，使用Dart语言编写。它提供了丰富的组件库，如Text、Button、ListView等，这些组件可以在Flutter应用中直接使用。H5开发主要使用HTML、CSS和JavaScript，这些技术可以构建动态的Web页面。

Flutter组件示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Example'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

H5语法示例

<!DOCTYPE html>
<html>
<head>
  <title>H5 Example</title>
</head>
<body>
  <h1>Hello, H5!</h1>
  <p>This is a simple H5 page.</p>
</body>
</html>

如何在Flutter中嵌入H5页面

要将H5页面嵌入到Flutter应用中，可以使用webview_flutter插件。该插件允许你在Flutter应用中显示Web页面。

添加webview_flutter依赖：

dependencies:
 flutter:
   sdk: flutter
 webview_flutter: ^4.0.1

在代码中使用WebView组件：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: WebView(
       initialUrl: 'https://www.example.com',
       javascriptMode: JavascriptMode.unrestricted,
     ),
   );
 }
}

H5页面与Flutter组件的交互

为了实现H5页面与Flutter组件之间的交互，可以使用JavaScript调用Flutter方法，反之亦然。webview_flutter插件提供了WebViewJavaScriptChannel，允许JavaScript与Flutter之间通信。

使用`WebViewJavaScriptChannel`

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late WebView _webView;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter and H5 Interaction'),
        ),
        body: WebView(
          initialUrl: 'https://www.example.com',
          javascriptMode: JavascriptMode.unrestricted,
          javascriptChannels: <JavascriptChannel>[
            _getHelloWorldChannel(context),
          ].toSet(),
        ),
      ),
    );
  }

  JavascriptChannel _getHelloWorldChannel(BuildContext context) {
    return JavascriptChannel(
      name: 'HelloWorld',
      onMessageReceived: (JavascriptMessage message) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(message.message)),
        );
      },
    );
  }
}

在H5页面中调用Flutter方法

<!DOCTYPE html>
<html>
<head>
  <title>Flutter and H5 Interaction</title>
</head>
<body>
  <script>
    function sendHelloWorld() {
      HelloWorld.postMessage('Hello from H5!');
    }
  </script>
  <button onclick="sendHelloWorld()">Send Hello</button>
</body>
</html>

通过以上步骤和代码示例，你可以将H5页面嵌入到Flutter应用中，并实现两者之间的交互。

通过以上内容，读者应该已经对Flutter与H5混合开发有了基本的了解，并掌握了如何在Flutter应用中嵌入H5页面以及实现它们之间的交互。接下来，我们将进一步深入到项目实战部分。

项目实战

在这一部分，我们将通过一个简单的混合开发项目案例，展示如何创建、实现基本的页面跳转和数据交互，并整合第三方H5库到Flutter项目中。

创建一个简单的混合开发项目案例

创建Flutter项目：
使用flutter create命令创建一个新的Flutter项目。
```
flutter create flutter_hybrid_example
cd flutter_hybrid_example
```
添加H5页面：
在项目根目录下，创建一个web目录，并在其中添加一个简单的HTML文件index.html。
```
mkdir web
touch web/index.html
```

配置H5页面路由：
创建一个Flutter路由来加载H5页面。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Hybrid Example',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     initialRoute: '/',
     routes: {
       '/': (context) => HomeScreen(),
       '/h5': (context) => H5Screen(),
     },
   );
 }
}

class HomeScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Home'),
     ),
     body: Center(
       child: ElevatedButton(
         onPressed: () {
           Navigator.pushNamed(context, '/h5');
         },
         child: Text('Go to H5 Page'),
       ),
     ),
   );
 }
}

class H5Screen extends StatefulWidget {
 @override
 _H5ScreenState createState() => _H5ScreenState();
}

class _H5ScreenState extends State<H5Screen> {
 late WebView _webView;

 @override
 void initState() {
   super.initState();
   _webView = WebView(
     initialUrl: 'file:///android_asset/web/index.html',
     javascriptMode: JavascriptMode.unrestricted,
   );
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('H5 Page'),
     ),
     body: _webView,
   );
 }
}

添加H5页面内容：
编辑web/index.html文件，添加一些简单的HTML内容。

<!DOCTYPE html>
<html>
<head>
 <title>H5 Page</title>
</head>
<body>
 <h1>Welcome to H5 Page!</h1>
 <p>This is a simple H5 page embedded in Flutter.</p>
</body>
</html>

实现基础的页面跳转和数据交互

要实现页面跳转和数据交互，可以使用Flutter的路由功能以及JavaScript通道。

实现页面跳转：
修改H5Screen中的WebView组件，让H5页面中的按钮可以触发Flutter路由跳转。

class H5Screen extends StatefulWidget {
 @override
 _H5ScreenState createState() => _H5ScreenState();
}

class _H5ScreenState extends State<H5Screen> {
 late WebView _webView;

 @override
 void initState() {
   super.initState();
   _webView = WebView(
     initialUrl: 'file:///android_asset/web/index.html',
     javascriptMode: JavascriptMode.unrestricted,
     javascriptChannels: <JavascriptChannel>[
       _getBackToHomeChannel(context),
     ].toSet(),
   );
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('H5 Page'),
     ),
     body: _webView,
   );
 }

 JavascriptChannel _getBackToHomeChannel(BuildContext context) {
   return JavascriptChannel(
     name: 'BackToHome',
     onMessageReceived: (JavascriptMessage message) {
       Navigator.pop(context);
     },
   );
 }
}

在H5页面中添加按钮：
编辑web/index.html，添加一个按钮，当点击时调用JavaScript通道中的方法。

<!DOCTYPE html>
<html>
<head>
 <title>H5 Page</title>
</head>
<body>
 <h1>Welcome to H5 Page!</h1>
 <p>This is a simple H5 page embedded in Flutter.</p>
 <button onclick="BackToHome.postMessage('back')">Go Back</button>
 <script>
   const BackToHome = {
     postMessage: (message) => window.postMessage(message, '*')
   };
 </script>
</body>
</html>

整合第三方H5库到Flutter项目

假设我们想要整合一个第三方H5库，例如Chart.js，用于在Flutter应用中显示图表。

安装H5库：
在H5页面中添加Chart.js库。

<!DOCTYPE html>
<html>
<head>
 <title>H5 Page</title>
 <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
 <h1>Welcome to H5 Page!</h1>
 <p>This is a simple H5 page embedded in Flutter.</p>
 <button onclick="BackToHome.postMessage('back')">Go Back</button>
 <div id="chart" style="width: 500px; height: 300px;"></div>
 <script>
   const BackToHome = {
     postMessage: (message) => window.postMessage(message, '*')
   };

   const ctx = document.getElementById('chart').getContext('2d');
   const myChart = new Chart(ctx, {
     type: 'bar',
     data: {
       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
       datasets: [{
         label: '# of Votes',
         data: [12, 19, 3, 5, 2, 3],
         backgroundColor: [
           'rgba(255, 99, 132, 0.2)',
           'rgba(54, 162, 235, 0.2)',
           'rgba(255, 206, 86, 0.2)',
           'rgba(75, 192, 192, 0.2)',
           'rgba(153, 102, 255, 0.2)',
           'rgba(255, 159, 64, 0.2)'
         ],
         borderColor: [
           'rgba(255, 99, 132, 1)',
           'rgba(54, 162, 235, 1)',
           'rgba(255, 206, 86, 1)',
           'rgba(75, 192, 192, 1)',
           'rgba(153, 102, 255, 1)',
           'rgba(255, 159, 64, 1)'
         ],
         borderWidth: 1
       }]
     },
     options: {
       scales: {
         y: {
           beginAtZero: true
         }
       }
     }
   });
 </script>
</body>
</html>

通过以上步骤，我们已经成功地创建了一个简单的混合开发项目，并实现了页面跳转和数据交互，同时整合了第三方H5库到Flutter项目中。

通过以上内容，读者应该已经掌握了如何创建Flutter与H5混合开发项目，并实现基本的页面跳转和数据交互。接下来，我们将探讨混合开发中常见的问题与解决方案。

常见问题与解决方案

在实际开发过程中，可能会遇到一些常见的问题，例如性能问题、兼容性问题以及调试问题。本节将介绍如何解决这些问题，并提供一些性能优化和调试建议。

解决Flutter与H5混合开发中常见的问题

性能问题

Flutter应用嵌入H5页面后，可能会遇到性能下降的问题，例如页面加载缓慢、卡顿等。

优化H5页面：
- 减少HTTP请求次数：合并多个资源文件，减少HTTP请求。
- 压缩资源文件：使用工具如Gzip压缩资源文件，减少传输时间。
- 使用CDN：将资源文件部署到CDN，提高加载速度。
优化Flutter渲染：
- 减少WebView组件的刷新频率：通过设置JavaScriptMode.unrestricted来减少不必要的刷新。
- 使用WebViewWidget组件：WebViewWidget是一个轻量级组件，适用于不需要频繁刷新的场景。
- 避免频繁的H5页面跳转：减少页面跳转频率，避免不必要的资源加载。

兼容性问题

在不同设备和操作系统上，Flutter应用嵌入H5页面可能会有不同的表现。

统一尺寸单位：
在H5页面中，使用Viewport单位（如vw和vh）来保持页面在不同设备上的显示一致性。
```
html, body {
 width: 100vw;
 height: 100vh;
}
```
使用响应式设计：
在H5页面中使用CSS媒体查询，实现自适应布局。
```
@media (max-width: 600px) {
 body {
   font-size: 14px;
 }
}
```
测试多个设备：
在实际开发过程中，确保在多个设备上进行测试，以确保兼容性。

调试与错误排查

调试混合应用时，需要同时处理Flutter和H5的调试问题。

Flutter调试：
- 使用flutter run命令启动应用，并使用Flutter DevTools进行调试。
- 使用WebView组件的javascriptMode属性设置为JavaScriptMode.unrestricted，以允许JavaScript调试。

H5调试：

使用浏览器的开发者工具进行调试。可以在H5页面中添加<script>标签，引入浏览器的调试工具。

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/devtools-extension"></script>

日志输出：
在H5页面中添加日志输出，以便跟踪调试信息。
```
console.log('This is a debug message');
```

性能优化技巧

代码分割：
使用动态导入（Dynamic Imports）技术，将代码分割成多个模块，按需加载。
```
import('module.js').then((module) => {
 module.default();
});
```

懒加载：
使用懒加载技术，延迟加载不常用的组件或资源。

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="large-image.jpg" loading="lazy">

资源压缩：
压缩CSS和JavaScript文件，减少文件大小。
```
npm install --save-dev terser
npm run build
```

调试与错误排查

日志输出：
使用print或log函数输出调试信息。

print('Flutter Debug Message');
console.log('H5 Debug Message');

断点调试：
在Flutter应用中使用断点调试功能，定位问题。
```
// Flutter
debugPrint('Debugging Flutter');
// H5
debugger;
```

通过以上方法，可以有效地解决Flutter与H5混合开发中遇到的问题，并进行性能优化和调试。

通过以上内容，读者应该已经了解了如何解决Flutter与H5混合开发中常见的问题，并掌握了一些性能优化和调试技巧。接下来，我们将进一步探讨如何提升混合开发项目的可维护性和开发效率。

实用技巧

在实际开发过程中，提高项目的可维护性和开发效率是非常重要的。本节将介绍如何提升混合开发项目的可维护性，推荐一些提高开发效率的工具，以及跨平台兼容性注意事项。

如何提升混合开发项目的可维护性

模块化开发

将项目拆分为多个模块，每个模块负责特定的功能，便于管理和维护。例如，可以将H5页面和Flutter组件分别放入不同的目录。

lib/
├── flutter_module/
│   ├── main.dart
│   └── ...
├── h5_module/
│   ├── web/
│   │   └── index.html
│   └── ...
└── shared_module/
    ├── utils.dart
    └── ...

使用版本管理工具

使用版本管理工具如Git，确保代码版本可控，便于回溯历史版本。

git init
git add .
git commit -m "Initial commit"

编写文档

编写详细的文档，包括项目结构、代码规范、功能说明等，便于团队成员理解和维护代码。

# 项目文档
## 项目结构
- `lib/flutter_module`：Flutter模块
- `lib/h5_module`：H5模块
- `lib/shared_module`：共享模块

## 代码规范
- 使用Dart Style Guide
- 代码行数不超过80个字符

提高开发效率的工具推荐

Flutter插件

flutter_launcher_icons：自动生成App图标。
flutter_lints：提供Dart代码的代码规范。
flutter_launcher_actions：自动生成Android Launcher Actions。

H5前端框架

Vue.js：使用Vue CLI快速搭建项目。
React.js：使用Create React App快速搭建项目。
Webpack：使用Webpack配置模块打包。

调试工具

Chrome DevTools：用于调试H5页面。
Flutter DevTools：用于调试Flutter应用。

跨平台兼容性注意事项

操作系统差异

不同操作系统（iOS、Android、Web）可能存在差异，需要针对不同的平台进行适配。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Platform.isAndroid
          ? AndroidHomeScreen()
          : Platform.isIOS
              ? IOSHomeScreen()
              : WebHomeScreen(),
    );
  }
}

class AndroidHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Android'),
      ),
      body: Center(
        child: Text('Android Home Page'),
      ),
    );
  }
}

class IOSHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('iOS'),
      ),
      body: Center(
        child: Text('iOS Home Page'),
      ),
    );
  }
}

class WebHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Web'),
      ),
      body: Center(
        child: Text('Web Home Page'),
      ),
    );
  }
}

设备屏幕尺寸

不同设备的屏幕尺寸和分辨率不同，需要使用响应式布局。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return OrientationBuilder(
          builder: (context, orientation) {
            return Scaffold(
              appBar: AppBar(
                title: Text('Responsive Layout'),
              ),
              body: Center(
                child: Text(
                  orientation == Orientation.portrait
                      ? 'Portrait Mode'
                      : 'Landscape Mode',
                  style: TextStyle(fontSize: constraints.maxWidth > 600 ? 30 : 20),
                ),
              ),
            );
          },
        );
      },
    );
  }
}

浏览器兼容性

不同浏览器的支持情况不同，需要进行兼容性测试。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

通过以上内容，读者应该已经了解了如何提升混合开发项目的可维护性，以及如何提高开发效率。同时，了解了跨平台兼容性注意事项，以便更好地开发混合应用。

通过以上内容，读者应该已经掌握了Flutter与H5混合开发的核心要点。接下来，我们将总结本篇文章，并鼓励读者动手实践和持续学习。

结语

Flutter与H5混合开发是一种充分利用Flutter高性能渲染能力和H5开发灵活性的方法。通过混合开发，可以为用户提供更加丰富的功能和更好的用户体验。本文详细介绍了如何创建Flutter与H5混合开发项目，包括基础概念、安装配置、项目实战、问题解决和实用技巧。

总结

基础概念：介绍了Flutter与H5混合开发的基本概念。
安装配置：详细介绍了如何安装Flutter和H5开发环境，以及配置开发工具。
项目实战：通过一个简单的项目案例，展示了如何实现页面跳转和数据交互，以及如何整合第三方H5库到Flutter项目中。
问题解决：列举了Flutter与H5混合开发中常见的问题，并提供了相应的解决方案。
实用技巧：提供了提高混合开发项目可维护性和开发效率的建议，以及跨平台兼容性注意事项。

鼓励动手实践和持续学习

我们鼓励读者动手实践，通过实际项目来加深对Flutter与H5混合开发的理解。同时，持续学习新的技术和工具，提升自己的开发技能。可以通过慕课网等在线学习平台，获取更多关于Flutter和H5开发的教程和资源。希望读者能通过本文获得宝贵的实践经验，并在实际项目中取得成功。

通过以上总结和鼓励，读者应该已经对Flutter与H5混合开发有了全面的理解，并准备好继续深入学习和实践。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

叮当猫咪

手记
篇

粉丝

6

获赞与收藏

27

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30948 346

网络编程入门教程

20个小节 12735 240

Pandas 入门教程

25个小节 18632 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Flutter与H5混合教程：入门详解与实战指南

安装Flutter和H5开发环境

安装Flutter

安装H5开发环境

配置开发工具

VS Code配置示例

Flutter的基本组件与H5语法

Flutter组件示例

H5语法示例

如何在Flutter中嵌入H5页面

H5页面与Flutter组件的交互

使用WebViewJavaScriptChannel

在H5页面中调用Flutter方法

创建一个简单的混合开发项目案例

实现基础的页面跳转和数据交互

整合第三方H5库到Flutter项目

解决Flutter与H5混合开发中常见的问题

性能问题

兼容性问题

调试与错误排查

性能优化技巧

调试与错误排查

如何提升混合开发项目的可维护性

模块化开发

使用版本管理工具

编写文档

提高开发效率的工具推荐

Flutter插件

H5前端框架

调试工具

跨平台兼容性注意事项

操作系统差异

设备屏幕尺寸

浏览器兼容性

总结

鼓励动手实践和持续学习

阅读免费教程

使用`WebViewJavaScriptChannel`