Flutter web app三端跨平台双向桥接dart web开发

最新推荐文章于 2024-09-09 12:26:29 发布

ypppk

最新推荐文章于 2024-09-09 12:26:29 发布

阅读量2.8k

点赞数

分类专栏： Flutter dart 文章标签： Flutter web app 三端桥接 Flutter跨平台桥接 dart桥接 dart web 双向桥接 Flutter web 双向桥接

本文链接：https://blog.csdn.net/ypppk/article/details/90714054

版权

本文详细介绍了如何进行Flutter Web App的三端跨平台双向桥接，包括dart web的写法，Android和iOS端的实现步骤。通过调用方法实现Android/iOS/chrome与dart web页面的交互，为开发者提供了一套完整的解决方案。

摘要由CSDN通过智能技术生成

Flutter web app三端跨平台双向桥接dart web开发

环境及项目运行步骤：

1、安装开发工具webstorm
2、官网下载flutter stable-1.5.4，安装好并配置环境变量
3、执行cmd命令：pub global activate webdev
4、执行cmd命令：pub global activate stagehand
5、创建好Flutter web app项目，在配置文件里引入js库如下
6、项目运行命令：webdev serve -r hostname 0.0.0.0，成功后浏览器访问 127.0.0.1:8080
(项目打包命令webdev build -r，成功后将build目录拷贝到tomcat部署就行了)
参考：
https://pub.dev/packages/webdev
https://flutterchina.club/setup-windows/
https://blog.csdn.net/yuzhiqiang_1993/article/details/84939634
https://blog.csdn.net/jay100500/article/details/88562450

#文件名：pubspec.yaml
name: test_flutter_web
description: An app built using Flutter for web

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  js: any
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0
  pedantic: ^1.0.0

dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

一、下面是dart web的写法

1. Android/iOS/chrome 调用dart web页面

// 文件名：bridge_util.dart
import "package:js/js.dart"; 
import "dart:html"; 
import "dart:js"; 
import 'package:js/js_util.dart' as js_util; 
var bridge; 
//这里往window窗口写入bridge对象
bool checkBridge(){
    
	if(bridge == null) {
    
		js_util.