flutter打包web,flutter打包ios并上架
Flutter Web打包中文乱码
flutter web有三种渲染模式,auto 、html 和 canvaskit。
专注于为中小企业提供网站建设、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业东营免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
flutter build web命令默认的渲染模式为auto,这种模式在移动端使用html渲染,在pc端使用canvaskit渲染。
目前我的flutter版本是2.5.2,pc端浏览器使用canvaskit渲染时中文会出现短暂的乱码(方块叉号),像这样:
我们可以指定渲染模式为html,就不会有这个问题了,命令如下:
指定渲染模式为canvaskit的命令为:
2021.10.21:flutter web对中文的支持貌似不太好,在手机浏览器调试web项目时,textfield hinttext有中文输入会有卡顿bug
FlutterWeb 和 WebView 原生交互调用
需要创建两个工程,一个是FlutterWeb工程最终打包成Web页面,一个是Flutter原生工程承载一个WebView用来加载Web页面。这样做的好处在于只需要一种语言开发iOS和Android不用对接两次,可以直接使用社区Flutter原生工程的插件,只需要封装给Web调用。
FlutterWeb工程pubspec.yaml添加依赖
Flutter原生工程pubspec.yaml添加依赖
创建一个 toast_channel.dart,定义一个类实现 JavascriptChannel 重写name指定channel名称和onMessageReceived指定调用函数
在WebView的 javascriptChannels 配置上定义的Channel
创建一个 native_channel.dart ,定义一个外部函数通过 @JS("调用的channel和函数名") 注解指定调用的原生函数(JavascriptChannel固定名称为postMessage)
需要使用的地方直接调用
创建一个 js_function.dart,存放被原生调用的函数名称
将要提供给原生调用的函数,通过 js.context[原生调用名称] = 函数 开放给外部调用
如果在FlutterWeb工程要使用这个函数也可以使用@JS注解
WebView 创建时会回调 onWebViewCreated 获得 WebViewController ,WebViewController 调用 runJavascript 会执行JS函数无返回值,调用 runJavascriptReturningResult 会执行JS函数有返回值。
FutureBuilder获取WebViewController, 需要使用的地方直接调用
使用 HTML,CSS,Canvas 和 SVG 元素来渲染。
缺点:会存在不同平台效果不一样。
优点:不加载canvaskit默认使用系统字体,加载过程没有多余开销。
需要用到wasm,WebAssembly 要求需要浏览器支持,WebView Android需要最低需要57,Safari iOS 需要最低需要 11。
缺点:canvaskit 有7m大默认地址在国外首次加载耗时;中文会加载字体库默认地址在国外加载慢。
优点:性能更好,渲染效果一致。
--web-renderer=auto 默认移动端浏览器选择 HTML,桌面端浏览器选择 CanvasKit。
--web-renderer=html 使用 HTML 渲染器
--web-renderer=canvaskit 使用 CanvasKit 渲染器
综上所诉推荐移动端使用HTML渲染更合适,在编译和打包时指定渲染器 --web-renderer=html 。
--debug 模式构建的 Web 应用没有被压缩,且 Tree-shaking 没有执行。
--profile 模式构建的 Web 应用没有被压缩,但 Tree-shaking 执行了。
--release 模式构建的 Web 应用被压缩了,并且 Tree-shaking 执行了
运行命令
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --profile
打包命令
flutter build web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --release
flutter 打包web
先运行下,看当前flutter 是否支持web项目, 如果没有enable-web: true 则输入 flutter config --enable-web
这时候项目中就包含了web文件夹.
输入 flutter build web 就可以在build文件夹中生成web文件, 将它放到到tomcat或者其他容器就能访问了!
附上项目的测试连接:
参考:
新闻标题:flutter打包web,flutter打包ios并上架
本文路径:http://myzitong.com/article/phjoei.html