flutter_inappbrowser和h5交互

需求，app中使用webview和h5交互，根據(jù)h5發(fā)過來的消息，在屏幕上展示flutter組件，并且可以發(fā)送消息給h5。

創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十載時(shí)間我們累計(jì)服務(wù)了上千家以及全國政企客戶，如成都銅雕雕塑等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致贊揚(yáng)。

首先使用的組件是flutter_WebView_plugin，這個(gè)組件不能嵌套flutter組件,所以放棄這個(gè)組件。

flutter_inappbrowser 可以實(shí)現(xiàn)組合布局, 所以選用了此庫, GitHub鏈接

[

flutter 與webview (vue)交互

flutter與webview交互

因?yàn)閣eb端項(xiàng)目用的是vue框架 按照網(wǎng)上的教程flutter端調(diào)用js端方法不管用:

flutter端

web端

后來發(fā)現(xiàn)是vue的方法不會(huì)暴露給app使用 需要把方法名暴露給window

Vue前端轉(zhuǎn)Flutter一（環(huán)境配置）

（*注：以下僅個(gè)人配置過程參考，系統(tǒng)win7-64）

所需軟件

vsCode，Android Studio， MuMu模擬器 （直連手機(jī)調(diào)試的話就不需要了）

配置過程

1、Flutter安裝

安裝時(shí)忘記截圖，具體可參考鏈接 flutter中文網(wǎng) 相關(guān)教程+ 百度 ，現(xiàn)在網(wǎng)上教程很多，多踩點(diǎn)坑總會(huì)成功的。

2、MuMu模擬器調(diào)試時(shí)需進(jìn)行相關(guān)配置

（*注：直連手機(jī)調(diào)試可忽略以下；執(zhí)行以下操作需要在執(zhí)行flutter doctor成功后，flutter run執(zhí)行前）

（1）mumu模擬器端口監(jiān)聽，需要執(zhí)行

（2）mumu模擬器調(diào)試flutter run可能會(huì)報(bào)錯(cuò)，可以改成，具體原因可直接百度“--enable-software-rendering”

3、如需調(diào)試ios端可嘗試虛擬機(jī)+macOS+xCode

vmware+macOs可參考鏈接 VMware15安裝MacOS系統(tǒng) ，筆者按照該步驟已安裝成功

FlutterWeb 和 WebView 原生交互調(diào)用

需要?jiǎng)?chuàng)建兩個(gè)工程，一個(gè)是FlutterWeb工程最終打包成Web頁面，一個(gè)是Flutter原生工程承載一個(gè)WebView用來加載Web頁面。這樣做的好處在于只需要一種語言開發(fā)iOS和Android不用對(duì)接兩次，可以直接使用社區(qū)Flutter原生工程的插件，只需要封裝給Web調(diào)用。

FlutterWeb工程pubspec.yaml添加依賴

Flutter原生工程pubspec.yaml添加依賴

創(chuàng)建一個(gè) toast_channel.dart，定義一個(gè)類實(shí)現(xiàn) JavascriptChannel 重寫name指定channel名稱和onMessageReceived指定調(diào)用函數(shù)

在WebView的 javascriptChannels 配置上定義的Channel

創(chuàng)建一個(gè) native_channel.dart ，定義一個(gè)外部函數(shù)通過 @JS("調(diào)用的channel和函數(shù)名") 注解指定調(diào)用的原生函數(shù)（JavascriptChannel固定名稱為postMessage）

需要使用的地方直接調(diào)用

創(chuàng)建一個(gè) js_function.dart，存放被原生調(diào)用的函數(shù)名稱

將要提供給原生調(diào)用的函數(shù)，通過 js.context[原生調(diào)用名稱] = 函數(shù) 開放給外部調(diào)用

如果在FlutterWeb工程要使用這個(gè)函數(shù)也可以使用@JS注解

WebView 創(chuàng)建時(shí)會(huì)回調(diào) onWebViewCreated 獲得 WebViewController ，WebViewController 調(diào)用 runJavascript 會(huì)執(zhí)行JS函數(shù)無返回值，調(diào)用 runJavascriptReturningResult 會(huì)執(zhí)行JS函數(shù)有返回值。

FutureBuilder獲取WebViewController， 需要使用的地方直接調(diào)用

使用 HTML，CSS，Canvas 和 SVG 元素來渲染。

缺點(diǎn)：會(huì)存在不同平臺(tái)效果不一樣。

優(yōu)點(diǎn)：不加載canvaskit默認(rèn)使用系統(tǒng)字體，加載過程沒有多余開銷。

需要用到wasm，WebAssembly 要求需要瀏覽器支持，WebView Android需要最低需要57，Safari iOS 需要最低需要 11。

缺點(diǎn)：canvaskit 有7m大默認(rèn)地址在國外首次加載耗時(shí)；中文會(huì)加載字體庫默認(rèn)地址在國外加載慢。

優(yōu)點(diǎn)：性能更好，渲染效果一致。

--web-renderer=auto 默認(rèn)移動(dòng)端瀏覽器選擇 HTML，桌面端瀏覽器選擇 CanvasKit。

--web-renderer=html 使用 HTML 渲染器

--web-renderer=canvaskit 使用 CanvasKit 渲染器

綜上所訴推薦移動(dòng)端使用HTML渲染更合適，在編譯和打包時(shí)指定渲染器 --web-renderer=html 。

--debug 模式構(gòu)建的 Web 應(yīng)用沒有被壓縮，且 Tree-shaking 沒有執(zhí)行。

--profile 模式構(gòu)建的 Web 應(yīng)用沒有被壓縮，但 Tree-shaking 執(zhí)行了。

--release 模式構(gòu)建的 Web 應(yīng)用被壓縮了，并且 Tree-shaking 執(zhí)行了

運(yùn)行命令

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開發(fā)APP性能最接近原生，前端程序員請(qǐng)關(guān)注

Flutter是谷歌公司推出的跨終端的開發(fā)框架，支持Android、iOS和WEB終端。1.0版在2018年12月5日發(fā)布，目前的最新版本是1.5，它采用的開發(fā)語言是Dart，Dart也是谷歌開發(fā)的計(jì)算機(jī)編程語言，語法類似C，是編譯型語言：

hello world例子，打印字符串“Hello World!”：

1、沒有橋接層

React Native、Weex等技術(shù)都是跨終端的框架，然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的：

React Native、Weex等技術(shù)多了一個(gè)橋接層，所以界面渲染會(huì)慢一些，由于UI渲染非常頻繁，想要不卡頓，基本上比較難，性能和用戶體驗(yàn)跟原生代碼有差距。而這恰恰是Flutter的優(yōu)勢(shì)所在：

Dart可以被編譯成不同平臺(tái)的本地代碼，讓Flutter不通過橋接層直接跟平臺(tái)通信，自然性能會(huì)快一些。

2、編譯執(zhí)行

JavaScript是解釋執(zhí)行的，Dart是編譯執(zhí)行的，性能誰好一目了然。

3、Flutter Engine虛擬機(jī)

Flutter是依靠Flutter Engine虛擬機(jī)在iOS和Android上運(yùn)行的，F(xiàn)lutter Engine使用C/C++編寫，開發(fā)人員通過Flutter框架直接和API在內(nèi)部進(jìn)行交互，所以具有輸入低延遲和UI渲染高幀速率的特點(diǎn)。除了這特點(diǎn)之外，F(xiàn)lutter還提供了自己的小部件，F(xiàn)lutter小部件是使用從React獲取靈感的現(xiàn)代框架構(gòu)建的。 中心思想是您使用小部件構(gòu)建UI。

窗口小部件根據(jù)其當(dāng)前配置和狀態(tài)描述了它們的視圖。 當(dāng)窗口小部件的狀態(tài)發(fā)生更改時(shí)，窗口小部件會(huì)重建其描述，框架將根據(jù)前面的描述進(jìn)行區(qū)分，以確定底層呈現(xiàn)樹從一個(gè)狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需的最小更改?？梢灾苯釉贠S平臺(tái)提供的畫布上進(jìn)行描繪，也就是一些核心類庫直接放到虛擬機(jī)里面，調(diào)用起來更快。

從它的系統(tǒng)結(jié)構(gòu)可以看出，類似安卓的ART(Android Run Time)虛擬機(jī)，同樣采用AOT(Ahead of TIme)技術(shù)，會(huì)在APP安裝時(shí)就編譯成機(jī)器語言，不再解釋執(zhí)行，從而優(yōu)化了APP運(yùn)行的性能。

4、自帶渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系統(tǒng)自帶Skia引擎，iOS平臺(tái)上Flutter也會(huì)把Skia引擎打包到APP中，從而實(shí)現(xiàn)了高效渲染。而React Native通過橋接層訪問原生UI，操作頻繁就容易出性能問題。

綜合所述，F(xiàn)lutter 是性能最接近原生代碼 的一種開發(fā)框架，未來也會(huì)是構(gòu)建谷歌Fuchsia應(yīng)用的主要方式，前途不可限量，唯一的問題就是需要學(xué)習(xí)一門新的語言：Dart，而有Java或者C#語言基礎(chǔ)的程序員會(huì)比較容易學(xué)習(xí)。