0

安卓WebView同Javascript通信

 2 years ago
source link: https://mrleidesen.github.io/posts/webview_to_js/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

安卓WebView同Javascript通信

2021-03-26 08:41:01 · MrLeiDeSen

前言#

最近项目里有需要用到安卓WebView和JS通信，毕竟不是安卓开发，就去了解了一下。

环境#

用的Kotlin的原生和Vue3

创建项目#

首先开一个原生安卓的Empty模板，在activity_main.xml中嵌入一个WebView

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

在AndroidManifest.xml文件中写入网络权限配置，如果需要相机之类的权限，加入后再动态申请，这里只演示通信

<manifest>
    // ...
    <uses-permission android:name="android.permission.INTERNET" />
    // ...
</manifest>

配置Kotlin文件#

在项目下的MainActivity.kt中写入

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val webView = setWebViewSettings()
}

@SuppressLint("SetJavascriptEnabled")
private fun setWebViewSettings(): WebView {
    // 找到webview的控件
    val myWebView: WebView = findViewById(R.id.webview)
    // 启用js
    myWebView.settings.javaScriptEnabled = true
    // 与js交互，js中就用client开始调用
    myWebView.addJavascriptInterface(UserInfoInterface(this), "client")
    // 防止webview跳转到APP外的浏览器
    myWebView.webViewClient = object : WebViewClient() {
        override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
            Log.i("LogHelper", request?.url.toString())
            return super.shouldOverrideUrlLoading(view, request)
        }
    }

    return myWebView
}

配置完上面后，我们需要再写一个UserInfoInterface的类来让js调用

class UserInfoInterface(mContext: MainActivity) {
    private var context = mContext

    @JavascriptInterface
    fun getMsgFromAndroid(): String {
        return "Hello Javascript, msg from android"
    }
}

以上，就配置完安卓部分，接下来我们编写HTML方面

编写Vue.js#

这边我们创建一个Vue3的项目，在App.vue文件中改成如下

<template>
  <p>{{inputPond}}</p>
  <button @click="onGet">Get Android</button>
</template>

<script>
export default {
  data: () => ({
    inputPond: null
  }),

  methods: {
    onGet() {
      // 同过原生注入的client调用getMsgFromAndroid方法
      this.inputPond = client.getMsgFromAndroid()
    }
  },
}
</script>

运行项目，把项目运行的地址复制出来，继续回到安卓部分

WebView跳转#

再次回到MainActivity.kt的onCreate中

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val webView = setWebViewSettings()
    // webview跳转，url改成你vue启动的地址
    webView.loadUrl("http://192.168.1.223:8080")
}

运行项目#

这个时候你应该会看到Vue的页面，点击按钮，如果你的页面文字内容变成Hello Javascript, msg from android，那么通信就成功了！

总结#

目前安卓开发大部分都开始使用kotlin了，有时候网络上找的还是java的有点不太一样，多搞几次就会发现通信不是很难。

有些人可能会说跨平台或者uni-app不香吗，香是肯定香，但是有些项目没法用到这个东西，只能通过webview和js通信来搞。

希望对各位能有所帮助！


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK