android與H5資料互動(kotlin)-有解無憂

前言

最近老專案重構純原生專案換成了原生+h5 混合開發
所有的功能基本都由H5做了 android這邊只負責呼叫硬體設備
拿到硬體回傳的資料再回傳H5 交由他來加載顯示

主要方法有2個

一是H5輸入內容傳給android android接受到保存資料庫
這樣做的好處是即使重新加載H5 資料還是有的不會丟失重要資訊

另一個方法就是H5呼叫android的方法由android回傳資料給H5顯示

效果圖

gif

Html代碼

直接全部copy html的代碼然后新建一個.hmtl 檔案名字無所謂只要和代碼里的保持一致就ok

<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="target-densitydpi=device-dpi"/>
    <script type="text/javascript">
    function init()
               {
               var testVal = document.getElementById('mytextId').value;
               android.setExport(testVal);
           }

    function getExport(){
         var testVal = document.getElementById('getExport');
         var str = window.android.getExport();
         testVal.innerHTML=str
         }

    function getID(){
         var testVal = document.getElementById('getID');
         var str = window.android.getID();
         testVal.innerHTML=str
         }

    </script>
</head>
<body>
<div style="float: left;width: 100%;margin-top: 6%;margin-left: 6%">
    <input type="text" style="width: 50%;height: 4vh;font-size: 2vh"
           name="myText" id="mytextId"/>

</div>
<div style="clear: both;height: 3px;"></div>

<p id="getExport"></p>

<p id="getID"></p>
<div style="float: left;width: 100%;margin-top: 6%;margin-left: 6%">
    <input value="submit" type="button" name="submit"
           style="width: 50%;height: 4vh;font-size: 2vh"
           id="btnSubmit" onclick="javascript:return init();"/>
</div>
<div style="float: left;width: 100%;margin-top: 6%;margin-left: 6%">
  <button style="width: 50%;height: 4vh;font-size: 2vh" onclick="getExport()">點擊呼叫本地方法</button>

</div>
<div style="float: left;width: 100%;margin-top: 6%;margin-left: 6%">
  <button style="width: 50%;height: 4vh;font-size: 2vh" onclick="getID()">獲取身份證</button>

</div>



</body>
</html>

android端

這里有幾個關鍵注意的點就是H5和android端約定好的方法名和校驗的KEY也可以說是TAG
webView?.addJavascriptInterface(JavaScriptInterface(this), "android")
這里的android就是約定的key
JavaScriptInterface這個是內部類來實作回傳資料和接收資料的方法

		//webView的基本配置
        val webSettings = webView?.settings
        webSettings?.javaScriptEnabled = true
        webSettings?.javaScriptCanOpenWindowsAutomatically = true
        webSettings?.setSupportZoom(true)
        webSettings?.builtInZoomControls = true
        webSettings?.useWideViewPort = true
        webSettings?.loadWithOverviewMode = true
        webSettings?.setAppCacheEnabled(true)
        webSettings?.domStorageEnabled = true
        webSettings?.loadsImagesAutomatically = true
        webSettings?.mediaPlaybackRequiresUserGesture = false


        webView?.loadUrl("file:///android_asset/js.html")//本地測驗

        //h5呼叫kotlin
        webView?.addJavascriptInterface(JavaScriptInterface(this), "android")


        /*設定不用系統瀏覽器打開 用當前webView*/
        webView?.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
                view.loadUrl(url)
                return true
            }
        }


        /*允許ssl證書*/
        webView?.webViewClient = object : WebViewClient() {
            override fun onReceivedSslError(
                webview: WebView?,
                handler: SslErrorHandler?,
                ssl: SslError?
            ) {
                handler?.proceed()
            }
        }

JavaScriptInterface

這個類setExport方法是H5端呼叫給我資料我這里拿到資料會保存本地資料庫room
set
這個類getExport方法是從我這里（android）端獲取資料(資料是我從room資料庫取出來)
get

 class JavaScriptInterface internal constructor(context: Context) {
        var mContext: Context = context
        var iDCardDevice: publicSecurityIDCardLib? = null
        private val bitmapFileSize = ByteArray(38556)
        var pkName: String? = null
        var userName: String? = null
        var userSex: String? = null
        var userID: String? = null
        var address: String? = null
        var faceId: String? = null
        private var combineParams: String? = null
        val map: MutableMap<String, String> = HashMap()

        @JavascriptInterface
        fun setExport(webMessage: String): Int {
            ALog.e("JavaScriptInterface", "setExport ------------- :$webMessage")
            ToastHelper.showToastShortInCenter(mContext, "setExport :$webMessage")
            val bean = Export()
            bean.exportName = webMessage
            if (ExportManager.getExports(mContext).size == 0) {
                ExportManager.addExport(mContext, bean)
            } else {
                val bean2 = ExportManager.getExports(mContext)[0]
                bean2.exportName = bean.exportName
                ExportManager.updateExport(mContext, bean2)
            }

            if (ExportManager.getExports(mContext)[0].exportName == webMessage) {
                return 0
            }
            return 1
        }

        @JavascriptInterface
        fun getExport(): String {
            ALog.e(
                "MainActivity",
                "getExport ------------- " + ExportManager.getExports(mContext)[0].exportName
            )
            ToastHelper.showToastShortInCenter(
                mContext,
                "setExport :" + ExportManager.getExports(mContext)[0].exportName
            )
            return ExportManager.getExports(mContext)[0].exportName
        }

Room

這個圖說明就是剛剛演示的在H5頁面輸入123456 然后傳給我（android）保存本地資料庫
然后H5什么時候要這個資料我什么時候從資料庫取出來！

關于room資料庫的操作

請參考我另一篇博文已經走過的坑！

Android Jetpack組件之Room資料庫使用

共勉

這一篇博文主要知識有 android與H5的混合開發知識點
已經android對資料庫的存盤運用！
學習永無止步加油！

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/342245.html

標籤：其他

上一篇：Android studio 修改了 android:background=“@drawable/welcome“后無法啟動

下一篇：Android TextView 底部添加劃線，中間添加劃線