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

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

創(chuàng)新互聯(lián)建站自2013年起，先為團(tuán)風(fēng)等服務(wù)建站，團(tuán)風(fēng)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為團(tuán)風(fēng)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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 元素來渲染。

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

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

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

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

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

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

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

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

綜上所訴推薦移動端使用HTML渲染更合適，在編譯和打包時指定渲染器 --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 通過后臺截圖生成圖片的方式實現(xiàn)高德地圖變更maker圖標(biāo)顏色和size

高德地圖flutter sdk制作標(biāo)記點(diǎn)的maker，對于移動端不支持size和顏色變更，顧采用傳遞自制的uint8list來實現(xiàn)。

web前端未來將會有什么樣的發(fā)展趨勢？

趨勢一：更加移動優(yōu)先

響應(yīng)式設(shè)計顯然是目前Web前端開發(fā)領(lǐng)域的主要趨勢之一，并且這一趨勢在未來還將持續(xù)一段時間。雖然現(xiàn)在的響應(yīng)式設(shè)計大部分還是以PC版優(yōu)先，然而如果有一天我們把PC版放到比移動版次要的位置上，也沒有什么好奇怪的。因為，目前許多Web前端開發(fā)者已經(jīng)開始轉(zhuǎn)向以移動優(yōu)先方案來做他們的響應(yīng)式設(shè)計和開發(fā)，這就象征著一個重大轉(zhuǎn)變，值得我們跟進(jìn)的。

趨勢二：更多使用快速原型開發(fā)工具

眾多Web前端開發(fā)者從2016年開始嘗試使用快速原型開發(fā)工具，而在2018年將是這種技術(shù)真正爆發(fā)的一年。“UXpin、Webflow、Invision以及其它許多快速原型開發(fā)工具，讓設(shè)計師不用寫一行代碼，就能為網(wǎng)站和服務(wù)快速創(chuàng)建低保真和高保真原型，便于設(shè)計師衡量它們的可用性和美觀性。” Web設(shè)計師Jamie Leeson says如是說，“許多工具也允許你在瀏覽器中設(shè)計原型并從工具里真正啟動網(wǎng)站自身。”

不管未來前端發(fā)展方向如何，可以肯定的是未來前端人才需求依舊很大。想學(xué)前端開發(fā)專業(yè)的機(jī)構(gòu)也很多，你可以去線下試聽課程了解一下，例如北大青鳥、南京中博軟件學(xué)院、南京課工場等等都有試聽課程的！

在flutter中，從后臺調(diào)取的數(shù)據(jù)是拼音，怎么把它轉(zhuǎn)換成漢字呢？？？求代碼

想要在WPS表格中把漢字轉(zhuǎn)換成拼音或小寫字母，只需要運(yùn)用模塊代碼編輯功能就能輕松解決，具體操作方法如下：

步驟1、打開要轉(zhuǎn)換成拼音的excel表格，按“Alt+F11”組合鍵，進(jìn)入Visual Basic編輯狀態(tài)。也就是看到的這個灰色的編輯界面。

步驟2、執(zhí)行“插入→模塊”命令，插入一個新模塊。再雙擊插入的模塊，進(jìn)入模塊代碼編輯狀態(tài)。

步驟3、看到如下界面。

步驟4、把下面的所有內(nèi)容復(fù)制，粘貼到步驟4中的空白處。

Function?pinyin(p?As?String)?As?String

i?=?Asc(p)

Select?Case?i

Case?-20319?To?-20318:?pinyin?=?"a?"

Case?-20317?To?-20305:?pinyin?=?"ai?"

Case?-20304?To?-20296:?pinyin?=?"an?"

Case?-20295?To?-20293:?pinyin?=?"ang?"

Case?-20292?To?-20284:?pinyin?=?"ao?"

Case?-20283?To?-20266:?pinyin?=?"ba?"

Case?-20265?To?-20258:?pinyin?=?"bai?"

Case?-20257?To?-20243:?pinyin?=?"ban?"

Case?-20242?To?-20231:?pinyin?=?"bang?" ?

Case?-20230?To?-20052:?pinyin?=?"bao?"

Case?-20051?To?-20037:?pinyin?=?"bei?"

Case?-20036?To?-20033:?pinyin?=?"ben?"

Case?-20032?To?-20027:?pinyin?=?"beng?"

Case?-20026?To?-20003:?pinyin?=?"bi?"

Case?-20002?To?-19991:?pinyin?=?"bian?"

Case?-19990?To?-19987:?pinyin?=?"biao?"

Case?-19986?To?-19983:?pinyin?=?"bie?"

Case?-19982?To?-19977:?pinyin?=?"bin?"

Case?-19976?To?-19806:?pinyin?=?"bing?"

Case?-19805?To?-19785:?pinyin?=?"bo?"

Case?-19784?To?-19776:?pinyin?=?"bu?"

Case?-19775?To?-19775:?pinyin?=?"ca?"

Case?-17721?To?-17704:?pinyin?=?"he?"

Case?-17703?To?-17702:?pinyin?=?"hei?"

Case?-17701?To?-17698:?pinyin?=?"hen?"

Case?-17697?To?-17693:?pinyin?=?"heng?"

Case?-17692?To?-17684:?pinyin?=?"hong?"

Case?-17683?To?-17677:?pinyin?=?"hou?"

Case?-17676?To?-17497:?pinyin?=?"hu?"

步驟5、按下ALT+Q關(guān)閉Visual Basic編輯窗口，返回Excel編輯狀態(tài)。

步驟6、選中轉(zhuǎn)換后的拼音需要放在哪個列，例如要把B列的第2行的內(nèi)容轉(zhuǎn)換成拼音，放在D列的第2個單元格，輸入公式：=getpy(B2)，這里的B2，是指源頭單元格的坐標(biāo)。

步驟7、如果要去除拼音之間的空格。去掉空格的拼音放在E列，如果這個未去掉空格的數(shù)據(jù)原來在D2單元格，去掉空格之后的拼音放在E2單元格，則在E2單元格輸：?=SUBSTITUTE(D2," ","")。

FlutterJsonBeanFactory插件json使用

使用注解@JSONField

其中name: "list"的list就是后臺返回字段名稱,deserialize(默認(rèn)true)是否參與fromJson解析,serialize(默認(rèn)true)是否參與tojson,

比如包含如下json

可以解析出來list中map的所有字段,并且每個list的map字段不同或者為null問題有會做出處理

helper文件內(nèi)容

直接傳遞上面生成的entity就可以自動根據(jù)map解析出對應(yīng)實例,并自動賦值

網(wǎng)絡(luò)請求實例

dio請求部分

這些操作完成后自動生成如下文件

@JSONField作用在Field時，其name不僅定義了輸入key的名稱,為了防止后臺返回數(shù)據(jù)不規(guī)范,但是flutter端需要按照駝峰命名

a_b_c_entity_helper.dart類提供了eitity類的tojson和fromjson代理方法

json_convert_content.dart提供了json_convert_content.dart.fromJsonAsT方法 根據(jù)泛型來解析json成對象

flutter應(yīng)用長時間在后臺，點(diǎn)開黑屏

重新打開即可。

因為軟件在后臺時間過長，軟件會出現(xiàn)一個黑屏動畫，就需要重啟軟件即可恢復(fù)。

新聞名稱：flutter對接后臺,flutter 后端交互
標(biāo)題網(wǎng)址：http://chinadenli.net/article7/dsgihij.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站收錄、電子商務(wù)、外貿(mào)建站、網(wǎng)站設(shè)計、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)