flutter调用js代码

首先需要在pubspec.yaml中配置:

dependencies:
  js: ^0.6.1+1 #主要是指明这个,可以根据实际情况配置版本
  flutter:
    sdk: flutter

然后直接看代码,在lib包下的任意的目录新建一个dartjs.dart文件,代码如下:

import 'dart:js' as js;
void main() {
  //示例调用测试函数test.js
  print(js.context.callMethod("noparam")); //带参数
  print(js.context.callMethod("haveparam", ["hello world"]));//无参数
  //示例调用cryptUtil.js
  String cipher = js.context.callMethod("encryptByDES", ["hello world"]);
  print(cipher);
  print(js.context.callMethod("decryptByDES", [cipher]));
}

工程目录如下图所示,调用的关键在于web包下面的index.html和我们自己新建的js,什么意思呢,也就是说我们写的js必要在index.html中引入才能被调用到,引入的代码就忽略了,想调用什么别的包都可以的,例如jquery
![image.png](https://img-blog.csdnimg.cn/img_convert/21a1ab82c01db3af47dbbe344c25fb58.png#align=left&display=inline&height=406&margin=[object Object]&name=image.png&originHeight=812&originWidth=560&size=55062&status=done&style=shadow&width=280)
最后回到示例代码的第一行,这个import代码的意思是把web包下面的js文件夹下面的所有js引进来。这样问题就很明确了。

import 'dart:js' as js;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flutter 可以通过 `flutter_webview_plugin` 插件来调用 WebView 中的 JavaScript 方法。 首先,在 Flutter 中引入 `flutter_webview_plugin` 插件: ```dart dependencies: flutter_webview_plugin: ^0.3.5+1 ``` 然后在需要使用 WebView 的页面中,导入插件并创建 WebView: ```dart import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; class WebViewPage extends StatefulWidget { @override _WebViewPageState createState() => _WebViewPageState(); } class _WebViewPageState extends State<WebViewPage> { FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin(); String url = 'https://www.example.com'; @override Widget build(BuildContext context) { return WebviewScaffold( url: url, withJavascript: true, ); } } ``` 在 `WebviewScaffold` 中设置 `withJavascript` 为 `true`,表示开启 WebView 中的 JavaScript 功能。 接下来,可以通过 `evaluateJavascript` 方法来调用 WebView 中的 JavaScript 方法,例如: ```dart flutterWebviewPlugin.evalJavascript('window.alert("Hello, world!")'); ``` 这里调用了 JavaScript 中的 `alert` 方法,弹出一个提示框。 完整的示例代码如下: ```dart import 'package:flutter/material.dart'; import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; class WebViewPage extends StatefulWidget { @override _WebViewPageState createState() => _WebViewPageState(); } class _WebViewPageState extends State<WebViewPage> { FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin(); String url = 'https://www.example.com'; @override void initState() { super.initState(); flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) { print('onStateChanged: ${state.type} ${state.url}'); }); } @override Widget build(BuildContext context) { return WebviewScaffold( url: url, withJavascript: true, appBar: AppBar( title: Text('WebView'), ), bottomNavigationBar: BottomAppBar( child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ IconButton( icon: Icon(Icons.arrow_back), onPressed: () { flutterWebviewPlugin.goBack(); }, ), IconButton( icon: Icon(Icons.arrow_forward), onPressed: () { flutterWebviewPlugin.goForward(); }, ), IconButton( icon: Icon(Icons.refresh), onPressed: () { flutterWebviewPlugin.reload(); }, ), IconButton( icon: Icon(Icons.info), onPressed: () { flutterWebviewPlugin.evalJavascript('window.alert("Hello, world!")'); }, ), ], ), ), ); } } ``` 在底部导航栏中添加了返回、前进、刷新和弹出提示框的按钮,点击弹出提示框时会调用 JavaScript 中的 `alert` 方法。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值