眾所周知，小程序是由HTML標(biāo)簽來(lái)開(kāi)發(fā)原生組件，那么首先需要將HTML做解析，這里我們將HTML通過(guò)node腳本解析成JSON字符串，再用Dart來(lái)解析JSON，映射對(duì)應(yīng)的標(biāo)簽到flutter的組件。這里先簡(jiǎn)單介紹實(shí)現(xiàn)的功能以及展示效果，后續(xù)再詳細(xì)介紹。
成都創(chuàng)新互聯(lián)是一家專業(yè)提供青州企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為青州眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
為了高效解析，直接用flutter的組件名在HTML文件上開(kāi)發(fā)
直接使用flutter的組件
模仿微信小程序的Api，cc對(duì)應(yīng)是微信小程序的wx
以上HTML中的例子
《使用Flutter + V8/JsCore開(kāi)發(fā)小程序引擎（二）》
《使用Flutter + V8/JsCore開(kāi)發(fā)小程序引擎（三）》
gRPC是谷歌開(kāi)發(fā)的一款遠(yuǎn)程過(guò)程調(diào)用系統(tǒng)，可以讓客戶端像調(diào)用本地對(duì)象一樣使用服務(wù)端應(yīng)用的方法，使用protocol buffers接口定義語(yǔ)言來(lái)定義服務(wù)方法，protocol buffer定義參數(shù)和返回類型。
protobuf類似json，是一種數(shù)據(jù)結(jié)構(gòu)協(xié)議，在android studio中安裝Protobuf Support,方便查看編寫的proto文件
dart使用proto插件將proto文件生成對(duì)應(yīng)的dart文件，使用如下步驟
1、安裝flutter之后，再flutter的下面路徑中有pub命令，需要將命令加入到path中。
可以vi ~/.zshrc,在文件中加入source ~/.bash_profile，然后在vi ~/.bash_profile文件中加入下面路徑（:分割不同的路徑）
export PATH=/Users/webull/app/flutter/bin:/Users/webull/app/flutter/bin/cache/dart-sdk/bin:/Users/webull/.pub-cache/bin:$PATH
其中fluter/bin是flutter的命令路徑，dart-sdk/bin中包含了pub和其他dart命令，.pub-cache/bin是之后運(yùn)行pub之后建立的路徑，里面包含了proto-gen-dart命令，用來(lái)將proto文件轉(zhuǎn)換為dart的命令
2、使用下面的命令安裝proto插件
$ pub global activate protoc_plugin
安裝完成后，上面的用戶目錄中的.pub-cache目錄才會(huì)有proto-gen-dart文件。
1、其中/Users/webull是我的用戶目錄 app/flutter是flutter的安裝目錄
參考：
1、gRPC介紹
2、gRPC配置
在編寫幾個(gè) Flutter 項(xiàng)目后，發(fā)現(xiàn) Flutter 的強(qiáng)大之處在于業(yè)務(wù)中所有用到的控件以及場(chǎng)景都有對(duì)應(yīng)的處理方案；而 Dart 語(yǔ)言也與 Java 、 Kotlin 類似，所以對(duì) Android 開(kāi)發(fā)者來(lái)說(shuō)門檻非常低；特意記錄一下常用的控件及其使用：
StatelessWidget 不需要額外的創(chuàng)建 State
StatefulWidget 創(chuàng)建 State 類，并可以在其中保存一些狀態(tài)
only 可以單獨(dú)設(shè)置每個(gè)方向的內(nèi)邊距
類似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個(gè)對(duì)齊方式， crossAxisAlignment 表示橫向的對(duì)齊方式
與 Column 相反，主軸是橫向，對(duì)齊方式類似， crossAxisAlignment 表示豎向的對(duì)齊方式
類似 SizedBox ，一個(gè)容器，但是主要功能是有一個(gè) decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影
棧，先入后出，類似于 Android 上的 FrameLayout
通常配合 Stack 使用，固定顯示在某一個(gè)位置
配合多 child 使用，會(huì)填充剩余的空間
Image 功能強(qiáng)大，使用不同的方法可以加載不同來(lái)源的圖片
看到這些方法，突然覺(jué)得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無(wú)論是圓形還是五角星都不在話下，然而 Android 要實(shí)現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。
名字和 Android 的一模一樣，但是用法卻比 Android 的簡(jiǎn)單很多：
主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個(gè) widget ，當(dāng)然了，每個(gè) ListView 都有其對(duì)應(yīng)的 item ，在里面的方法中編寫 widget 即可
與 ListView 類似，但是需要有一個(gè) delegate 類，作用是設(shè)置有多少列，每一列之間的間距是多少
GridView 沒(méi)有 build ， children 表示所有的子 view
最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來(lái)處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下
Uniapp目前比較成熟，而且用的是Vue語(yǔ)法，學(xué)習(xí)成本比較低，而且行業(yè)里面用的也比較廣泛，而Flutter的話，學(xué)習(xí)成本略高，因?yàn)橐獙W(xué)習(xí)新的語(yǔ)言，還有就是目前生態(tài)不是特別完備，等他再發(fā)展發(fā)展吧。黑馬程序員官網(wǎng)有成套免費(fèi)視頻哦，有什么不懂的可以直接過(guò)去學(xué)習(xí)。您的采納是對(duì)我成長(zhǎng)的鞭策
我是初學(xué)者小白，所以很多看法不深，理解也不夠透徹。但是很適合小白們一起從低角度往高處探索。文中有錯(cuò)誤的，感謝指正，一起進(jìn)步。
趁著假期做一個(gè)Flutter的地圖功能，因?yàn)楹蠖诉x用了百度地圖，所以前端沒(méi)得挑。找了遍插件，并沒(méi)有現(xiàn)成可用的。（不過(guò)發(fā)現(xiàn)了百度官方也自開(kāi)發(fā)Flutter插件，目前功能只有一個(gè)獲取本地位置信息，后期會(huì)繼續(xù)增加吧？很期待?。?/p>
參考帖子：
這個(gè)實(shí)際上跟功能之間沒(méi)太大關(guān)系，只是我按照個(gè)人摸索的過(guò)程來(lái)寫。
當(dāng)對(duì)一個(gè)“領(lǐng)域/知識(shí)塊”完全不懂的時(shí)候，360°的方向都不確定的話。先了解基礎(chǔ)概念，有利于你確定自己的摸索方向。
參考帖子：
中間我跳過(guò)了幾十，上百個(gè)帖子的摸索過(guò)程。這個(gè)才是關(guān)鍵能夠真正做事的參考。
因?yàn)榘俣鹊膕dk還算是很完善的，所以一旦出問(wèn)題，都會(huì)有對(duì)應(yīng)的報(bào)錯(cuò)提示。
我是使用flutter插件：permission_handler，來(lái)解決安卓的動(dòng)態(tài)授權(quán)問(wèn)題，用法簡(jiǎn)單而且設(shè)計(jì)合理。
這個(gè)錯(cuò)誤直接來(lái)看，就是簽名有問(wèn)題。怎么查看SHA1碼和包名，這里不多說(shuō)，網(wǎng)上有極其多的方法，百度Sdk開(kāi)發(fā)指南里也有。沒(méi)那么復(fù)雜，也沒(méi)那么麻煩。按照流程操作就是對(duì)的。
實(shí)在不放心？跟我一樣，flutter打包后，把a(bǔ)pk反過(guò)來(lái)解SHA1碼不就行了？
參考帖子：
紅色框框基本就是帖子講解的那樣。
藍(lán)色框框見(jiàn)下圖：release標(biāo)簽里好像是自己設(shè)置了。所以debug標(biāo)簽里面，箭頭指向的位置，是我多設(shè)置的一個(gè)參數(shù)。
uid: -1 appid -1 msg: httpsPost failed,IOException:Unable to resolve host "api.map.baidu.com": No address associated with hostname
這一步我是哭笑不得，一開(kāi)始老是和問(wèn)題（2）混淆，導(dǎo)致浪費(fèi)很多時(shí)間。仔細(xì)閱讀后，發(fā)現(xiàn)是不能連接到“api.map.baidu.com”。
我打開(kāi)模擬器的chrome瀏覽器，發(fā)現(xiàn)不能上網(wǎng)。查看手機(jī)的dns是10.0.2.3(默認(rèn)的)，和家里wifi不一樣，所以不能上網(wǎng)也正常，之前居然沒(méi)發(fā)現(xiàn)這個(gè)問(wèn)題?。?！
終端執(zhí)行：adb shell? 和? getprop，就可以查看所有的屬性參數(shù)了。（window小伙伴自行百度，這個(gè)沒(méi)多大差別。如果你有多個(gè)設(shè)備，記得自己選好設(shè)備。）
在里面找到這一項(xiàng)，就是你的dns參數(shù)。有些人是net.dns1，我的是net.eth0.dns1。這個(gè)沒(méi)關(guān)系，只是等下指令 稍微改動(dòng) 就行。
修改dns指令：setprop net.eth0.dns1 192.168.2.1
后面的192.168.2.1是我自己的dns，這個(gè)根據(jù)自己的情況來(lái)填寫。不懂的百度下怎么查看自己的dns。
雖然提示設(shè)置失敗，但是回到模擬器一看，地圖已經(jīng)顯示出來(lái)了。
嘿嘿，在flutter設(shè)定多大的區(qū)域，地圖就是多大的區(qū)域。用起來(lái)就很方便了。
過(guò)程十分痛苦，因?yàn)閷?duì)flutter不是很熟悉，對(duì)Android原生更是了解很少。所以自己就像突然不能講話，被丟到一個(gè)陌生的環(huán)境，卻要我去找一個(gè)人。所以細(xì)心很重要，一定要看清楚錯(cuò)誤提示，不要錯(cuò)過(guò)每一個(gè)細(xì)節(jié)和可能性。
幸好最后解決了問(wèn)題，開(kāi)心~
其實(shí)如果你仔細(xì)閱讀過(guò)百度官方的文檔，會(huì)發(fā)現(xiàn)里面有關(guān)于 地圖的生命周期管理 。然后在這里面沒(méi)有提及到，這一點(diǎn)雖然沒(méi)提，但不可或缺，小伙伴就自行思考吧。
最后還有一點(diǎn)，其實(shí)我的初衷是想實(shí)現(xiàn)一個(gè)百度地圖的plugin，但是苦于能力有限，對(duì)Android的不熟悉，最后折戟。我不得已另起項(xiàng)目，然后重新實(shí)現(xiàn)地圖sdk接入。經(jīng)過(guò)這次對(duì)于這些有更多更全面的認(rèn)知后，有空會(huì)再次研究flutter 插件的開(kāi)發(fā)，共勉，奧利給?。?！
如果我們目前的項(xiàng)目是Android的，但是接下來(lái)我們希望部分頁(yè)面可以使用Flutter進(jìn)行開(kāi)發(fā)，甚至我們希望在Native頁(yè)面中嵌入FlutterUI組件，那么我們?cè)撊绾螌?shí)現(xiàn)呢？
假設(shè)你現(xiàn)在Android項(xiàng)目的目錄的結(jié)構(gòu)是這樣的
這時(shí)候如果你想創(chuàng)建一個(gè)Flutter模塊，使得Android模塊和Flutter模塊之間可以進(jìn)行交互，我們可以通過(guò)Android Studio新建一個(gè)Flutter Module，具體過(guò)程是：File — New — New Module ，之后選擇Flutter Module，指定Project Location的路徑為
也就是說(shuō)，最終你的項(xiàng)目結(jié)構(gòu)會(huì)是這樣的
接下來(lái)在Android Module的 build.gradle 文件中添加flutter依賴
先創(chuàng)建一個(gè)Flutter頁(yè)面
這里比較重要的是 window.defaultRouteName 這個(gè)字段，這個(gè)字段可以接收從Native傳遞過(guò)來(lái)的參數(shù) （下文我們會(huì)介紹原生傳遞參數(shù)的方法），也就是說(shuō)通過(guò)這個(gè)字段我們就可以進(jìn)行Flutter頁(yè)面的路由的分發(fā)
我們可以直接在Android的 MainActivity 中啟動(dòng)一個(gè) FlutterActivity ，這里的 initialRoute 方法中傳遞的參數(shù)就對(duì)應(yīng)Flutter層的 window.defaultRouteName
注意：需要在 AndroidManifest.xml 注冊(cè) FlutterActivity
自己創(chuàng)建一個(gè) FlutterAppActivity 繼承自 FlutterActivity
在 MainActivity 中啟動(dòng) FlutterAppActivity （另外別忘了在 AndroidManifest.xml 中注冊(cè) FlutterAppActivity ）
兩種啟動(dòng)方式的區(qū)別
如果單純只是想打開(kāi)一個(gè)Flutter頁(yè)面，兩種方式實(shí)際上基本沒(méi)有太大區(qū)別，第一種方式也許還會(huì)更簡(jiǎn)單一點(diǎn)。但是，在Flutter開(kāi)發(fā)中，我們往往還需要開(kāi)發(fā)一些Native插件供Flutter調(diào)用，如果使用復(fù)寫 FlutterActivity 的方式更有利于我們?cè)?FlutterActivity 中注冊(cè)我們的Native插件，所以實(shí)際開(kāi)發(fā)中一般推薦使用第二種方式
擴(kuò)展思考
initialRoute 從名稱上看起來(lái)是Flutter提供給我們進(jìn)行Native與Flutter交互的路由跳轉(zhuǎn)的，但是實(shí)際上他就是一個(gè)字符串，我們不僅僅可以傳遞一個(gè)路由名稱，有時(shí)候我們也可以通過(guò)這個(gè)參數(shù)傳遞一串JSON數(shù)據(jù)，然后在Flutter端進(jìn)行解析，這樣我們就可以通過(guò)這個(gè)參數(shù)做更多的事情
activity_main.xml
FrameLayout 用于承載Flutter組件
MainActivity.java
使用 FragmentManager 將 FlutterFragment 添加到 FrameLayout 容器中
運(yùn)行結(jié)果
上半部分是原生的TextView，下半部分是Flutter的Text組件
本節(jié)主要介紹了Native和Flutter之間的頁(yè)面跳轉(zhuǎn)，以及同一個(gè)頁(yè)面中Native與Flutter組件的組合。接下來(lái)會(huì)介紹如何編寫Android插件與Flutter進(jìn)行數(shù)據(jù)交互
重慶分公司
重慶分公司
