動態調用原生JS的方法及相關設備技術

本申請屬于軟件開發技術領域，涉及一種動態調用原生JS的方法，包括在Flutter web調用原生JS時，Flutter web生成第一調用請求，并采用第一橋接層將第一調用請求發送給原生JS，原生JS接收第一調用請求，采用第二橋接層處理第一調用請求，并將得到的處理結果反饋給Flutter web，其中，第二橋接層包含通信協議，并存在于原生JS中，在原生JS調用Flutter web時，原生JS采用第二橋接層訪問調用第一橋接層的功能函數。本申請還提供一種動態調用原生JS的裝置、計算機設備及存儲介質。本申請通過橋階層和通信協議，實現Flutter web和原生JS的便捷調用，實現雙向通信，提高開發效率。提高開發效率。提高開發效率。

【技術實現步驟摘要】
動態調用原生JS的方法及相關設備


[0001]本申請涉及軟件開發
，尤其涉及一種動態調用原生JS的方法及相關設備。

技術介紹

[0002]隨著移動互聯網技術的發展，移動APP和Web應用在現代軟件開發中占據重要地位。Flutter是一種跨平臺的移動應用開發框架，可以使用Dart編程語言構建高性能、美觀的移動應用。然而，有時候需要在Flutter Web應用中使用原生JavaScript(簡稱原生JS)代碼，以便訪問Web瀏覽器的特定功能或庫，但Flutter與原生JavaScript無法直接通信，導致難以實現互相調用。

技術實現思路

[0003]本申請的目的在于提出一種動態調用原生JS的方法、裝置、計算機設備及存儲介質，以實現Flutter Web與原生JS互相調用。
[0004]為了解決上述技術問題，本申請實施例提供一種動態調用原生JS的方法，采用了如下所述的技術方案：
[0005]在Flutter web調用原生JS時，Flutter web生成第一調用請求，并采用所述第一橋接層將所述第一調用請求發送給原生JS，其中，所述第一橋接層中包含用于Flutter web與原生JS進行通信的通信協議，所述第一橋接層存在于所述Flutter web中；
[0006]所述原生JS接收所述第一調用請求，采用第二橋接層處理所述第一調用請求，并將得到的處理結果反饋給所述Flutter web，其中，所述第二橋接層包含所述通信協議，所述第二橋接層存在于所述原生JS中；
[0007]在所述原生JS調用Flutter web時，所述原生JS采用所述第二橋接層訪問調用第一橋接層的功能函數，以使所述原生JS通過所述功能函數將web瀏覽器中的數據和事件傳遞給Flutter web。
[0008]進一步地，在所述Flutter web生成第一調用請求的步驟之前，還包括：
[0009]創建Flutter Web項目，作為所述Flutter web；
[0010]在所述Flutter web項目中創建所述第一橋接層，并在所述橋接層定義所述通信協議，所述通信協議包括消息格式、函數調用規范和錯誤處理機制，所述通信協議的結構采用類或者函數表示。
[0011]進一步地，所述在所述Flutter web項目中創建所述第一橋接層，并在所述橋接層定義所述通信協議的步驟之后，還包括：
[0012]在Flutter web項目的web包中新建JS文件夾；
[0013]在所述JS文件夾的index.html中引入每個待交互的原生JS。
[0014]進一步地，所述采用所述第一橋接層將所述第一調用請求發送給原生JS的步驟包括：
[0015]對所述第一調用請求中的參數進行參數序列化，得到序列化參數；
[0016]在所述第一橋接層中添加第一函數，并采用所述第一函數將所述序列化參數發送給原生JS。
[0017]進一步地，所述原生JS接收所述第一調用請求，采用第二橋接層處理所述第一調用請求，并將得到的處理結果反饋給所述Flutter web的步驟包括：
[0018]所述原生JS接收所述序列化參數，并采用第二橋接層的第二函數對所述序列化參數進行解析；
[0019]根據解析結果生成處理結果；
[0020]對所述處理結果進行反序列化，得到反序列化數據；
[0021]將所述反序列化數據反饋給所述Flutter web。
[0022]進一步地，在所述所述原生JS接收所述第一調用請求，采用第二橋接層處理所述第一調用請求，并將得到的處理結果反饋給所述Flutter web的步驟之前，還包括：
[0023]基于JavaScript函數和對象構建所述第二橋接層。
[0024]進一步地，在所述原生JS接收所述第一調用請求，采用第二橋接層處理所述第一調用請求，并將得到的處理結果反饋給所述Flutter web的步驟之后，還包括：
[0025]若處理結果為調用成功，則采用所述第一橋接層、所述第二橋接層調用Flutter Web和原生JS之間的函數進行消息傳遞。
[0026]為了解決上述技術問題，本申請實施例還提供一種動態調用原生JS的裝置，采用了如下所述的技術方案：
[0027]請求發送模塊，用于在Flutter web調用原生JS時，Flutter web生成第一調用請求，并采用所述第一橋接層將所述第一調用請求發送給原生JS，其中，所述第一橋接層中包含用于Flutter web與原生JS進行通信的通信協議，所述第一橋接層存在于所述Flutter web中；
[0028]第一調用模塊，用于所述原生JS接收所述第一調用請求，采用第二橋接層處理所述第一調用請求，并將得到的處理結果反饋給所述Flutter web，其中，所述第二橋接層包含所述通信協議，所述第二橋接層存在于所述原生JS中；
[0029]第二調用模塊，用于在所述原生JS調用Flutter web時，所述原生JS采用所述第二橋接層訪問調用第一橋接層的功能函數，以使所述原生JS通過所述功能函數將web瀏覽器中的數據和事件傳遞給Flutter web。
[0030]進一步地，所述動態調用原生JS的裝置還包括：
[0031]項目創建模塊，用于創建Flutter Web項目，作為所述Flutter web；
[0032]協議生成模塊，用于在所述Flutter web項目中創建所述第一橋接層，并在所述橋接層定義所述通信協議，所述通信協議包括消息格式、函數調用規范和錯誤處理機制，所述通信協議的結構采用類或者函數表示。
[0033]進一步地，所述動態調用原生JS的裝置還包括：
[0034]JS文件夾創建模塊，用于在Flutter web項目的web包中新建JS文件夾；
[0035]原生JS引入模塊，用于在所述JS文件夾的index.html中引入每個待交互的原生JS。
[0036]進一步地，所述請求發送模塊包括：
[0037]序列化單元，用于對所述第一調用請求中的參數進行參數序列化，得到序列化參數；
[0038]第一發送單元，用于在所述第一橋接層中添加第一函數，并采用所述第一函數將所述序列化參數發送給原生JS。
[0039]進一步地，所述第一調用模塊包括：
[0040]解析單元，用于所述原生JS接收所述序列化參數，并采用第二橋接層的第二函數對所述序列化參數進行解析；
[0041]結果生成單元，用于根據解析結果生成處理結果；
[0042]反序列化單元，用于對所述處理結果進行反序列化，得到反序列化數據；
[0043]第二發送單元，用于將所述反序列化數據反饋給所述Flutter web。
[0044]進一步地，所述動態調用原生JS的裝置還包括：
[0045]第二橋接層構建模塊，用于基于JavaScript函數和對象構建所述第二橋接層。
[0本文檔來自技高網...

【技術保護點】

【技術特征摘要】
1.一種動態調用原生JS的方法，其特征在于，包括下述步驟：在Flutter web調用原生JS時，Flutter web生成第一調用請求，并采用第一橋接層將所述第一調用請求發送給原生JS，其中，所述第一橋接層中包含用于Flutter web與原生JS進行通信的通信協議，所述第一橋接層存在于所述Flutter web中；所述原生JS接收所述第一調用請求，采用第二橋接層處理所述第一調用請求，并將得到的處理結果反饋給所述Flutter web，其中，所述第二橋接層包含所述通信協議，所述第二橋接層存在于所述原生JS中；在所述原生JS調用Flutter web時，所述原生JS采用所述第二橋接層訪問調用第一橋接層的功能函數，以使所述原生JS通過所述功能函數將web瀏覽器中的數據和事件傳遞給Flutter web。2.根據權利要求1所述的動態調用原生JS的方法，其特征在于，在所述Flutter web生成第一調用請求的步驟之前，還包括：創建Flutter Web項目，作為所述Flutter web；在所述Flutter web項目中創建所述第一橋接層，并在所述橋接層定義所述通信協議，所述通信協議包括消息格式、函數調用規范和錯誤處理機制，所述通信協議的結構采用類或者函數表示。3.根據權利要求2所述的動態調用原生JS的方法，其特征在于，所述在所述Flutter web項目中創建所述第一橋接層，并在所述橋接層定義所述通信協議的步驟之后，還包括：在Flutter web項目的web包中新建JS文件夾；在所述JS文件夾的index.html中引入每個待交互的原生JS。4.根據權利要求1所述的動態調用原生JS的方法，其特征在于，所述采用所述第一橋接層將所述第一調用請求發送給原生JS的步驟包括：對所述第一調用請求中的參數進行參數序列化，得到序列化參數；在所述第一橋接層中添加第一函數，并采用所述第一函數將所述序列化參數發送給原生JS。5.根據權利要求4所述的動態調用原生JS的方法，其特征在于，所述原生JS接收所述第一調用請求，采用第二橋接層處理所述第一調用請求，并將得到的處理結果反饋給所述Flutter web的步驟包括：所述原生JS接收所述序列化參數，并采用第二橋接層的第...

【專利技術屬性】
技術研發人員：劉燕峰，王勇，蔡明金，
申請(專利權)人：深圳復臨科技有限公司，
類型：發明
國別省市：