Flutter通用基礎庫flutter_luakit_plugin

williamwen1986發表於2019-01-08
FlutterPlugin

使用flutter_luakit_plugin作為基礎庫開發Flutter應用

文章開頭我們先開門見山給出使用flutter_luakit_plugin作為基礎庫開發和普通flutter的區別。由於flutter定位是便攜UI包，flutter提供的基礎庫功能是不足以滿足複雜資料的app應用的，一般flutter開發模式如下圖所示，當flutter滿足不了我們的需求的時候，使用methodchannel和eventchannel呼叫native介面。

image

而使用flutter_luakit_plugin作為基礎庫的開發模式如下圖所示，用lua來寫邏輯層程式碼，用flutter寫UI程式碼。luakit 提供了豐富的功能支援，可以支援大部分app的邏輯層開發，包括資料庫orm，執行緒管理，http請求，非同步socket，定時器，通知，json等等。使用者只需要寫dart程式碼和lua程式碼，不需要寫oc、swift或java、kotlin程式碼，從而大幅提升程式碼的一致性（所有執行程式碼都是跨平臺的）。

image

flutter_luakit_plugin由來

Flutter誕生的時候我很興奮，因為我對跨平臺開發UI的看法一直是不看好的，最主要的原因是無法獲得體驗一致性，但是Flutter前無古人的解決了這個問題，真正做到一端開發的UI，無論多複雜，在另一端是可以得到一致的體驗的，做不到這點的跨平臺UI方案實際上並沒有達到跨平臺節省工作量的效果，Flutter做到了。

Flutter1.0.0 釋出了，我認為移動端跨平臺開發所需要所有元素都已經齊備了，我們嘗試使用Flutter做一些功能，一個版本之後我們總結了一些問題。

  • Flutter是一套UI解決方案，但一個功能除了UI，還需要很多支援，網路請求，長連線，短連線，資料庫，執行緒控制等等，這些方面Flutter生態中提供得比較差，沒有ios 或者android那麼多成熟的解決方案。Flutter 為了克服這問題，提供了一個解決方案，利用methodchannel和eventchannel呼叫ios和android的介面，利用原生成熟的方案做底層邏輯支撐。我們一開始也是這樣解決，但後續的麻煩也來了，由於methodchannel和eventchannel實現的方法是不跨平臺的，Flutter從ios和android得到的資料的格式，事件呼叫的時機等，兩個平臺的實現是不一樣的，基本不可能完全統一，可以這樣說，一個功能在一個端能跑通，在另一個端第一次跑一定跑不通，然後就要花大量的時間進行除錯，適配，這樣做之後跨平臺的優勢蕩然無存,大家就會不斷扯皮。相信我，下面的對話會成為你們的日常。

    ios開發：“你們android寫的介面ios跑不起來”

    Android 開發：“我們android能跑啊，iOS介面寫得不對吧”

    ios開發：“哪裡不對，android寫的介面，android幫忙調吧”

    Android 開發：“我又不是ios開發，我怎麼調”

  • 當一個已有的app要接入flutter，必然會產生一種情況，就是flutter體系裡面的資料和邏輯，跟外部原生app的邏輯是不通的，簡單說明一下，就是flutter寫的業務邏輯通常是用dart語言寫的，我們在原生用object-c、swift或者java、kotlin寫的程式碼是不可以脫離flutter的介面呼叫dart寫的邏輯的，這種互通性的缺失，會導致很多資料聯動做不到，譬如原生介面要現實一個flutter頁面存下來的資料，或者原生介面要為flutter頁面做一些預載入，這些都很不方便，主要是下圖中，當flutter介面沒呼叫時，從原生呼叫flutter介面是不允許的。

image

之前我曾經開源一個純邏輯層的跨平臺解決方案luakit(附上luakit的起源)，裡面提供一個業務開發所需要的基本能力，包括網路請求，長連線，短連線，orm資料庫，執行緒，通知機制等等，而且這些能力都是穩定的、跨平臺而且經過實際業務驗證過的方案。

做完一個版本純flutter之後，我意識到可以用一種新的開發模式來進行flutter開發，這樣可以避免我上面提到的兩個問題，我們團隊馬上付諸實施，做了另一個版本的flutter+luakit的嘗試，即用flutter做介面，用lua來寫邏輯，結構圖如下。

image

新的方案開發效率得到極大的提升，不客氣的說真正實現了跨平臺，一個業務，從頁面到邏輯，所有的程式碼一氣呵成全部由指令碼完成（dart+lua），完全不用object-c、swift或者java、kotlin來寫邏輯，這樣一個業務基本就可以無縫地從一端直接搬到另一端使用，所以我寫了這篇文章來介紹我們團隊的這個嘗試，也把我們的成果flutter_luakit_plugin開源了出來，讓這種開發模式幫助到更多flutter開發團隊。

細說開發模式

下一步我們一起看看如何用flutter配合lua實現全部程式碼都是跨平臺的。我們提供了一個 demo project，供大家參考。

  • dart寫介面

    在demo中所有的ui都寫在了main.dart,當然在真實業務中肯定複雜很多，但是並不影響我們的開發模式。

  • dart呼叫lua邏輯介面

FlutterLuakitPlugin.callLuaFun("WeatherManager", "getWeather").then((dynamic d) { 
 print("getWeather" + d.toString());
  setState(() { 
   weathers = d;
  
  });

  });
複製程式碼

上面這段程式碼的意思是呼叫WeatherManager的lua模組，裡面提供的getWeather方法，然後把得到的資料以future的形式返回給dart，上面的程式碼相當於呼叫下面一段lua程式碼

require('WeatherManager').getWeather( function (d)    end)複製程式碼

然後剩下的事情就到lua，在lua裡面可以使用luakit提供的所有強大功能，一個app所需要的絕大部分的功能應該都提供了，而且我們還會不斷擴充套件。

大家可能會擔心dart和lua的資料格式轉換問題，這個不用擔心，所有細節在flutter_luakit_plugin都已經做好封裝，使用者儘管像使用dart介面那樣去使用lua介面即可。

  • 在lua中實現所有的非UI邏輯

    這個demo(WeatherManager.lua)已經演示瞭如何使用luakit的相關功能，包括，網路，orm資料庫，多執行緒，資料解析，等等

  • 如果實在有flutter_luakit_plugin沒有支援的功能，可以走回flutter提供的methodchannel和eventchannel的方式實現

如何接入flutter_luakit_plugin

經過了幾個月磨合實踐，我們團隊已經把接入flutter_luakit_plugin的成本降到最低，可以說是非常方便接入了。我們已經把flutter_luakit_plugin釋出到flutter官方的外掛倉庫。首先，要像其他flutter外掛一樣，在pubspec.yaml裡面加上依賴，可參考demo配置

flutter_luakit_plugin: ^1.0.0複製程式碼

然後在ios專案的podfile加上ios的依賴，可參考demo配置

source 'https://github.com/williamwen1986/LuakitPod.git'source 'https://github.com/williamwen1986/curl.git'pod 'curl', '~>
 1.0.0'pod 'LuakitPod', '~>
 1.0.13'複製程式碼

然後在android專案app的build.gradle檔案加上android的依賴，可參考demo配置

repositories { 
   maven { 
url "https://jitpack.io" 
  }
  }dependencies { 
   implementation 'com.github.williamwen1986:LuakitJitpack:1.0.6'
  }複製程式碼

最後，在需要使用的地方加上import就可以使用lua指令碼了

import 'package:flutter_luakit_plugin/flutter_luakit_plugin.dart';
複製程式碼

lua指令碼我們預設的執行根路徑在android是 assets/lua，ios預設的執行根路徑是Bundle路徑。

flutter_luakit_plugin開發環境IDE–AndroidStudio

flutter 官方推薦的IDE是androidstudio和visual studio code。我們在開發中覺得androidstudio更好用，所有我們同步也開發了luakit的androidstudio外掛，名字就叫luakit。luakit外掛提供了以下的一些功能。

  • 遠端lua除錯
  • 查詢函式使用
  • 跳到函式定義
  • 跳到檔案
  • 引數名字提示
  • 程式碼自動補全
  • 程式碼格式化
  • 程式碼語法檢查
  • 標準lua api自動補全
  • luakit api自動補全

大部分功能，跟其他IDE沒太多差別，這裡我就不細講了，我重點講一下遠端lua除錯功能，因為這個跟平時除錯ios和android裝置有點不一樣，下面我們詳細介紹androidstudio luakit外掛的使用。

androidstudio安裝luakit外掛

AndroidStudio->
Preference..->
Plugins->
Browse reprositories…

image

搜尋Luakit並安裝Luakit外掛然後重啟androidstudio

image

配置lua專案

開啟 Project Struture 視窗

image

選擇 Modules、 Mark as Sources

image

新增偵錯程式

選擇 Edit Configurations …

image

Select plus

image

新增Lua Remote(Mobdebug)

image

遠端lua除錯

在開始除錯lua之前，我們要在需要除錯的lua檔案加上下面一句lua程式碼。然後設上斷點，即可除錯。lua程式碼裡面有兩個引數，第一個是你除錯用的電腦的ip地址，第二個是除錯埠，預設是8172。

require("mobdebug").start("172.25.129.165", 8172)複製程式碼
image

luakit的除錯是通過socket來傳遞除錯資訊的，所有除錯機器務必我電腦保持在同一網段，有時候可能做不到，這裡我們給出一下辦法解決，我們日常除錯也是這樣解決的。首先讓你的手機開熱點，然後你的電腦連上手機的熱點，現在就可以保證你的手機和電腦是同一網段了，然後檢視電腦的ip地址，填到lua程式碼上，就可以實現除錯了。

image
image

flutter_luakit_plugin提供的api介紹

（1） 資料庫orm操作

這是flutter_luakit_plugin裡面提供的一個強大的功能，也是flutter現在最缺的，簡單高效的資料庫操作，flutter_luakit_plugin提供的資料庫orm功能有以下特徵

  • 物件導向
  • 自動建立和更新表結構
  • 自帶內部物件快取
  • 定時自動transaction
  • 執行緒安全，完全不用考慮執行緒問題

具體可參考demo lua，下面只做簡單介紹。

定義資料模型

-- Add the define table to dbData.lua-- Luakit provide 7 colum types-- IntegerField to sqlite integer -- RealField to sqlite real -- BlobField to sqlite blob -- CharField to sqlite varchar -- TextField to sqlite text -- BooleandField to sqlite bool-- DateTimeField to sqlite integeruser = { 
__dbname__ = "test.db", __tablename__ = "user", username = {"CharField",{max_length = 100, unique = true, primary_key = true
  }
  }, password = {"CharField",{max_length = 50, unique = true
  }
  }, age = {"IntegerField",{null = true
  }
  }, job = {"CharField",{max_length = 50, null = true
  }
  }, des = {"TextField",{null = true
  }
  }, time_create = {"DateTimeField",{null = true
  }
  } 
  },-- when you use, you can do just like belowlocal Table = require('orm.class.table')local userTable = Table("user")複製程式碼

插入資料

local userTable = Table("user")local user = userTable({ 
username = "user1", password = "abc", time_create = os.time()
  })user:save()複製程式碼

更新資料

local userTable = Table("user")local user = userTable.get:primaryKey({"user1"
  }):first()user.password = "efg"user.time_create = os.time()user:save()複製程式碼

刪除資料

local userTable = Table("user")local user = userTable.get:primaryKey({"user1"
  }):first()user:delete()複製程式碼

批量更新資料

local userTable = Table("user")userTable.get:where({age__gt = 40
  }):update({age = 45
  })複製程式碼

批量刪除資料

local userTable = Table("user")userTable.get:where({age__gt = 40
  }):delete()複製程式碼

select資料

local userTable = Table("user")local users = userTable.get:all()print("select all -----------")local user = userTable.get:first()print("select first -----------")users = userTable.get:limit(3):offset(2):all()print("select limit offset -----------")users = userTable.get:order_by({desc('age'), asc('username')
  }):all()print("select order_by -----------")users = userTable.get:where({ 
age__lt = 30, age__lte = 30, age__gt = 10, age__gte = 10, username__in = {"first", "second", "creator"
  }, password__notin = {"testpasswd", "new", "hello"
  }, username__null = false 
  }):all()print("select where -----------")users = userTable.get:where({"scrt_tw",30
  },"password = ? AND age <
 ?"):all()print("select where customs -----------")users = userTable.get:primaryKey({"first","randomusername"
  }):all()print("select primaryKey -----------")複製程式碼

聯表操作

local userTable = Table("user")local newsTable = Table("news")local user_group = newsTable.get:join(userTable):all()print("join foreign_key")user_group = newsTable.get:join(userTable,"news.create_user_id = user.username AND user.age <
 ?", {20
  }):all()print("join where ")user_group = newsTable.get:join(userTable,nil,nil,nil,{create_user_id = "username", title = "username"
  }):all()print("join matchColumns ")複製程式碼

（2） 通知機制

通知機制提供了一個低耦合的事件互通方法，即在原生或者lua或者dart註冊訊息，在任何地方丟擲的訊息都可以接收到。

Flutter 新增監聽訊息

void notify(dynamic d) {
  }FlutterLuakitPlugin.addLuaObserver(3, notify);
複製程式碼

Flutter 取消監聽

FlutterLuakitPlugin.removeLuaObserver(3, notify);
複製程式碼

Flutter拋訊息

FlutterLuakitPlugin.postNotification(3, data);
複製程式碼

lua 新增監聽訊息demo code

local listenerlua_notification.createListener(function (l) listener = l listener:AddObserver(3,     function (data)         print("lua Observer")         if data then             for k,v in pairs(data) do                 print("lua Observer"..k..v)             end         end     end )end);
複製程式碼

lua拋訊息demo code

lua_notification.postNotification(3,{ 
   lua1 = "lua123",    lua2 = "lua234"
  })複製程式碼

ios 新增監聽訊息demo code

_notification_observer.reset(new NotificationProxyObserver(self));
_notification_observer->
AddObserver(3);
- (void)onNotification:(int)type data:(id)data{ 
   NSLog(@"object-c onNotification type = %d data = %@", type , data);

  }複製程式碼

ios拋訊息demo code

post_notification(3, @{@"row":@(2)
  });
複製程式碼

android 新增監聽訊息demo code

LuaNotificationListener  listener = new LuaNotificationListener();
INotificationObserver  observer = new INotificationObserver() { 
   @Override    public void onObserve(int type, Object info) { 
       HashMap<
String, Integer>
 map = (HashMap<
String, Integer>
)info;
        for (Map.Entry<
String, Integer>
 entry : map.entrySet()) { 
           Log.i("business", "android onObserve");
            Log.i("business", entry.getKey());
            Log.i("business",""+entry.getValue());
        
  }    
  }
  };
listener.addObserver(3, observer);
複製程式碼

android拋訊息demo code

HashMap<
String, Integer>
 map = new HashMap<
String, Integer>
();
map.put("row", new Integer(2));
NotificationHelper.postNotification(3, map);
複製程式碼

（3） http request

flutter本身提供了http請求庫dio，不過當專案的邏輯介面想在flutter，原生native都可用的情況下，flutter寫的邏輯程式碼就不太合適了，原因上文已經提到，原生native是不可以隨意呼叫flutter程式碼的，所以遇到這種情況，只有luakit合適，lua寫的邏輯介面可以在所有地方呼叫，flutter 、ios、android都可以方便的使用lua程式碼，下面給出luakit提供的http介面，demo code。

-- url , the request url-- isPost, boolean value represent post or get-- uploadContent, string value represent the post data-- uploadPath,  string value represent the file path to post-- downloadPath, string value to tell where to save the response-- headers, tables to tell the http header-- socketWatcherTimeout, int value represent the socketTimeout-- onResponse, function value represent the response callback-- onProgress, function value represent the onProgress callbacklua_http.request({ 
url  = "http://tj.nineton.cn/Heart/index/all?city=CHSH000000", onResponse = function (response) end
  })複製程式碼

（4） Async socket

非同步socket長連線功能也是很多app開發所依賴的，flutter只支援websocket協議，如果app想使用基礎的socket協議，那就要使用flutter_luakit_plugin提供的socket功能了，使用也非常簡單，demo code，在callback裡面拿到資料後可以使用上文提到的通知機制把資料傳回到flutter層。

local socket = lua_asyncSocket.create("127.0.0.1",4001)socket.connectCallback = function (rv)    if rv >
= 0 then        print("Connected")        socket:read()    endend    socket.readCallback = function (str)    print(str)    timer = lua_timer.createTimer(0)    timer:start(2000,function ()        socket:write(str)    end)    socket:read()endsocket.writeCallback = function (rv)    print("write" .. rv)endsocket:connect()複製程式碼

（5） json 解析

json是最常用資料型別，使用可參考demo

local t = cjson.decode(responseStr)responseStr = cjson.encode(t)複製程式碼

(6) 定時器timer

定時器也是專案開發中經常用到的一個功能，定時器我們在orm框架的lua原始碼裡面有用到，demo

local _timer_timer = lua_timer.createTimer(1)//0代表單次，1代表重複_timer:start(2000,function ()    end)_timer:stop()複製程式碼

(7) 還有所有普通適合lua用的庫都可以在flutter_luakit_plugin使用

flutter技術積累相關連結

flutter通用基礎庫flutter_luakit_plugin

flutter_luakit_plugin使用例子

《手把手教你編譯Flutter engine》

《手把手教你解決 Flutter engine 記憶體漏》

修復記憶體洩漏後的flutter engine（可直接使用）

修復記憶體洩漏後的flutter engine使用例子

持續更新中…

來源：https://juejin.im/post/5c34597651882523d3200c98

相關文章