flutter 與webview (vue)交互

flutter與webview交互

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),絳縣企業(yè)網(wǎng)站建設(shè),絳縣品牌網(wǎng)站建設(shè),網(wǎng)站定制,絳縣網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,絳縣網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

flutter端

web端

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

學js還是直接flutter

js先學在學Flutter

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費、開源的。

Flutter組件采用現(xiàn)代響應式框架構(gòu)建，這是從React中獲得的靈感，中心思想是用組件(widget)構(gòu)建你的UI。組件描述了在給定其當前配置和狀態(tài)時他們顯示的樣子。當組件狀態(tài)改變，組件會重構(gòu)它的描述(description)，F(xiàn)lutter會對比之前的描述，以確定底層渲染樹從當前狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需要的最小更改。

九、Flutter之webview

Flutter的webview常用的第三方庫有 flutter_webview_plugin 、 webview_flutter ，后者的文檔較少，暫先學習flutter_webview_plugin。

添加依賴

導入包

iOS端info.plist配置，其中NSAppTransportSecurity節(jié)點是為了支持http協(xié)議

一個簡單的demo

要監(jiān)聽鏈接跳轉(zhuǎn)的話，實現(xiàn)onUrlChanged即可

添加依賴

導入包

iOS端info.plist配置

一個簡單的demo

但是在webview里點擊鏈接跳轉(zhuǎn)的時候，測試機有時會跳轉(zhuǎn)到系統(tǒng)瀏覽器上，并且點擊文本框無法彈出鍵盤，交互性很弱。

二者共同的缺點是與javascript難以交互，目前只能實現(xiàn)Flutter-JS傳遞信息，還沒找到可以進行完美交互的第三方庫。并且一些常見的協(xié)議還不支持，比如撥號和調(diào)用攝像頭等，期待后續(xù)完善。

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

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

FlutterWeb工程pubspec.yaml添加依賴

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

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

在WebView的 javascriptChannels 配置上定義的Channel

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

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

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

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

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

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

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

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

缺點：會存在不同平臺效果不一樣。

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

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

缺點：canvaskit 有7m大默認地址在國外首次加載耗時；中文會加載字體庫默認地址在國外加載慢。

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

--web-renderer=auto 默認移動端瀏覽器選擇 HTML，桌面端瀏覽器選擇 CanvasKit。

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

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

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

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

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

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

運行命令

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 + V8/JsCore開發(fā)小程序引擎（一）

眾所周知，小程序是由HTML標簽來開發(fā)原生組件，那么首先需要將HTML做解析，這里我們將HTML通過node腳本解析成JSON字符串，再用Dart來解析JSON，映射對應的標簽到flutter的組件。這里先簡單介紹實現(xiàn)的功能以及展示效果，后續(xù)再詳細介紹。

為了高效解析，直接用flutter的組件名在HTML文件上開發(fā)

直接使用flutter的組件

模仿微信小程序的Api，cc對應是微信小程序的wx

以上HTML中的例子

《使用Flutter + V8/JsCore開發(fā)小程序引擎（二）》

《使用Flutter + V8/JsCore開發(fā)小程序引擎（三）》

【Flutter】利用Future封裝出js中的Promise

前端的同學對 Promise 肯定都很熟悉，而 Future 便是 dart 中 Promise ，但方法名稱和使用方式還是有些許的差異的。

下面我們嘗試，利用 Future 封裝出js中我們熟悉的 Promise 。

使用示例

Promise.all , Promise.race , Promise.resolve , Promise.reject

Promise.allSettled 方法接受一組 Promise 實例作為參數(shù)，包裝成一個新的 Promise 實例。只有等到所有這些參數(shù)實例都返回結(jié)果，不管是 fulfilled 還是 rejected ，包裝實例才會結(jié)束。該方法由 ES2020 引入

Promise.any() 方法接受一組 Promise 實例作為參數(shù)，包裝成一個新的 Promise 實例。只要參數(shù)實例有一個變成 fulfilled 狀態(tài)，包裝實例就會變成 fulfilled 狀態(tài)；如果所有參數(shù)實例都變成 rejected 狀態(tài)，包裝實例就會變成 rejected 狀態(tài)。該方法目前是一個第三階段的 提案 。

Promise.any() 跟 Promise.race() 方法很像，只有一點不同，就是不會因為某個 Promise 變成 rejected 狀態(tài)而結(jié)束。

順便把 延遲函數(shù) 也封裝一下，畢竟毫秒延遲的使用頻率是最高的。