flutter WebView js交互传参

原创

已于 2024-09-25 16:21:01 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #flutter #交互

于 2023-07-11 14:45:32 首次发布

该文章展示了如何在Flutter中使用WebView加载网页，并实现JavaScript与移动端的参数传递。通过WebView的javascriptChannels，创建JavaScriptChannel来接收和发送消息，进行参数的解码与编码，从而在web页面和移动端之间实现数据通信，用于执行不同的操作如页面跳转。

加载网页的webView

String _detailUrl = 'http://test/h5atui//#/mobileMaps?lng=${CommonConfig.lng}&lat=${CommonConfig.lat}';
WebView(
              initialUrl: _detailUrl,
              javascriptMode: JavascriptMode.unrestricted,
              gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer())), //解决嵌套在TabBarView的子界面里后的左右滑动冲突
              onWebViewCreated: (controller) {
   
   
                _webViewController = controller