Android IOS 与Vue网页进行JS交互之二、使用Android WebView与Vue网页进行交互

前言

---

Android IOS 与Vue网页进行JS交互之一、使用HBuilderX编写Vue页面
Android IOS 与Vue网页进行JS交互之二、使用Android WebView与Vue网页进行交互
Android IOS 与Vue网页进行JS交互之三、使用IOS WKWebView与Vue网页进行交互

---

这系列文章主要是为了展示如何在移动APP端调用同样的一个Vue页面并且进行JS交互。

Android

• 开发工具：Android studio4.0.1
• 开发语言：Kotlin
• 关键词：androidx、dataBinding、WebView

IOS

• 开发工具：Xcode11.7
• 开发语言：Swift
• 关键词：SwiftUI、WKWebView、WKScriptMessageHandler

网页

• 开发工具：HBuilderX2.8.9.20200829-alpha
• 开发语言：Vue
• 关键词：JS、uni-app、mounted

这篇文章主要描述如何在Android原生app上使用webview控件与Vue网页进行交互

Android与Vue交互

先回顾一下上一章内容Android IOS 与Vue网页进行JS交互之一、使用HBuilderX编写Vue页面

新建Android项目

这一个步骤还是比较简单的，打开Android studio

选择空白页面

项目名称为VueTest

点击finish开始构建项目

修改app配置

目前都是使用AndroidX+Jetpack来进行项目开发，在这个简单的demo里，还是引入dataBinding来进行XML注入，不了解的朋友可以看一下我的这篇文章：Android Kotlin学习 Jitpack 组件之DataBinding（不小心夹带私货了）

修改app目录下的build.gradle文件

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
apply plugin: 'kotlin-kapt'

android {
    ...

    dataBinding {
        enabled true
    }
}

修改布局文件

打开activity_main.xml，在页面中放置一个WebView

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <WebView
            android:id="@+id/web"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

修改页面逻辑

打开MainActivity.kt文件
注册binding变量，使得能通过binding直接使用页面的webview控件；

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
    }
}

配置webview

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        initWeb()
    }

    /** 初始化网页浏览器 */
    @SuppressLint("SetJavaScriptEnabled")
    private fun initWeb() {
        // 配置web
        binding.web.apply {
            // 启用JS
            settings.javaScriptEnabled = true
        }
    }
}

接着新建一个类，用于传递给网页进行JS调用，也可以理解成拦截JS的触发事件

class MainActivity : AppCompatActivity() {

    /** 初始化网页浏览器 */
    @SuppressLint("SetJavaScriptEnabled")
    private fun initWeb() {
        // 配置web
        binding.web.apply {
            // 启用JS
            settings.javaScriptEnabled = true
            // 设置JS调用接口，AppJsFunction为在网页中调用的入口名字
            addJavascriptInterface(JSFunction(this@MainActivity), "AppJsFunction")
        }
    }

    /**
     * JS调用原生
     * @property activity Activity
     * @constructor
     */
    class JSFunction constructor(private val activity: MainActivity) {

        @JavascriptInterface
        fun showDialog(message: String) {
            // 显示一个弹窗
            AlertDialog.Builder(activity)
                .setTitle("提示")
                .setMessage(message)
                .setPositiveButton("OK") { _, _ -> }
                .create()
                .show()

            // 原生调用JS
            activity.binding.web.post {
                activity.binding.web.evaluateJavascript("javascript:changeTitle('来自Android更换文本')", null)
            }
        }
    }
}

设置页面地址

我们打开上一章创建的Vue项目，点击HBuilderX的右上角【预览】按钮，会弹出一个页面的预览器

然后点击上面的二维码符号

在弹出的手机扫码预览页面中，记下这个局域网IP地址，例如我的就是192.168.1.124
接着复制页面地址下来，也就是如下图所指位置

将loaclhost改成刚刚获取到的局域网IP地址，最后的地址就是http://192.168.1.124:8081/#/pages/index/index

回到Android studio中，设置网页地址：

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        initWeb()
        // 加载网页
        binding.web.loadUrl("http://192.168.1.124:8081/#/pages/index/index")
    }
}

运行

可以直接运行到虚拟机，或者实机中，实机需要和电脑连接同一个无线网络才可以，不然无法访问到局域网部署的Vue网页。

点击触发调用原生方法，顺利弹窗并修改网页文本；

GitHub

AndroidIOSAndVueJS

完事