【Flutter开发】------加载本地html文件，js调flutter

最新推荐文章于 2024-08-27 09:09:47 发布

BX_Jobs

最新推荐文章于 2024-08-27 09:09:47 发布

阅读量2.4k

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/BX_Jobs/article/details/102484047

版权

flutter 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:swap_app/constant/constant.dart';
import 'package:webview_flutter/webview_flutter.dart';

class TestPage extends StatefulWidget {
  final String title;
  final String url;
  const TestPage({Key key, @required this.title, @required this.url})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _TestPage();
  }
}

class _TestPage extends State<TestPage> {
  Future<String> _getFile() async {
    return await rootBundle.loadString('assets/html/test.html');
  }

  @override
  void initState() {
    super.initState();
  }
// 定义方法
  JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Toast',
        onMessageReceived: (JavascriptMessage message) {
          Scaffold.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        brightness: Brightness.light,
        title: Text(
          widget.title,
          style:
          TextStyle(color: Colors.black, fontFamily: Constant.DEFAULT_FONT),
        ),
        centerTitle: true,
        leading: IconButton(
          color: Colors.black,
          icon: Icon(
            Icons.arrow_back_ios,
          ),
          onPressed: () => Navigator.pop(context, false),
        ),
      ),
      body: FutureBuilder<String>(
        future: _getFile(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return WebView(
              javascriptMode: JavascriptMode.unrestricted,
              javascriptChannels: <JavascriptChannel>[
                _toasterJavascriptChannel(context),
              ].toSet(),
              initialUrl: Uri.dataFromString(snapshot.data, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString(), // 加载的url

              onPageFinished: (String value) {
                // webview 页面加载调用
              },
            );
          } else if (snapshot.hasError) {
            return Scaffold(
              body: Center(
                child: Text("${snapshot.error}"),
              ),
            );
          }
          return Scaffold(
            body: Center(child: CircularProgressIndicator()),
          );
        },
      ),
    );
    
  }
}

js调flutter

<html>

<head>
    <title>1</title>
</head>

<body>
<button onclick="callFlutter()">callFlutter</button>
<script>
function callFlutter(){
    Toast.postMessage("测试JS调用了Flutter");
}
</script>
</body>

</html>

这里编码格式一定要正确！

new Uri.dataFromString(snapshot.data, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString(),

Flutter调用JS

    WebViewController _webViewController;

    WebView(
        // ... 略
        javascriptMode: JavascriptMode.unrestricted, // 使用JS没限制
        onWebViewCreated: (WebViewController webViewController) {
            // 在WebView创建完成后会产生一个 webViewController
            _webViewController = webViewController;
        },
    )

    // 之后可以调用 _webViewController 的 evaluateJavascript 属性来注入JS
    _webViewController.evaluateJavascript("Toaster.postMessage('弹弹乐');");

拦截URL

    WebView(
        navigationDelegate: (NavigationRequest request) {
            // 判断URL
            if (request.url.startsWith('https://www.baidu.com')) {
                // 做一些事情
                // 阻止进入登录页面
                return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
        },
    );