网站建设 >

查看其它板块

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