Android与H5混合开发「kotlin,WebView」

简介: Android与H5的交互「kotlin,WebView」文章参考自尚硅谷-Android与H5的互调,由衷感谢。语言是使用了kotlin,如果不熟悉kotlin,建议看看这篇文章,kotlin还是很值得学习的。

Android与H5的交互「kotlin,WebView」

文章参考自尚硅谷-Android与H5的互调,由衷感谢。语言是使用了kotlin,如果不熟悉kotlin,建议看看这篇文章,kotlin还是很值得学习的。

Android与H5的交互,实际上就是通过Android的一个控件WebView来完成的

img_a098447758c95a2c4ebead7c6370fde7.gif
开头.gif

项目的基础配置,如Log封装类,修改主题,Anko的配置请查看这篇文章。相关代码已经上传到仓库的AndroidToH5文件夹

加载一个网页

WebView控件有点类似于在我们的App中嵌入一个微型浏览器。

  • 加载页面

在module下创建webStudy包,创建WebActivity,在activity_web.xml布局下声明webView控件。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.androidtoh5.module.webStudy.WebActivity">

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

    </WebView>
</RelativeLayout>
AI 代码解读

回到Activity,使用loadUrl方法把我们要加载的网页加载进去

package com.example.administrator.androidtoh5.module.webStudy

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import com.example.administrator.androidtoh5.R
import kotlinx.android.synthetic.main.activity_web.*
class WebActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_web)

        mWebView.loadUrl("https://www.jianshu.com/u/8c6b4be8770b")
    }
}
AI 代码解读

WebView的操作是加载网页,所以记得在AndroidMaifest.xml下添加网络权限

<uses-permission android:name="android.permission.INTERNET"/>
AI 代码解读

运行程序

img_86021b417b179de5aef2b48c9c3f433b.gif
网页效果.gif
  • 重写返回方法

效果出来了,但是如果我们在webView连续点击去几个子页面后,点击手机物理键返回,我们会发现程序直接挂了,并没有返回到我们之前浏览的网页。

所以我们需要重写程序的返回方法

import kotlinx.android.synthetic.main.activity_web.*
class WebActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_web)

        mWebView.loadUrl("https://www.jianshu.com/u/8c6b4be8770b")
    }

    /**
     * 重写返回回调监听
     */
    override fun onBackPressed() {
        //判断WebView是否可返回
        if (mWebView.canGoBack()) {
            //返回上一个页
            mWebView.goBack()
            return
        }
        super.onBackPressed()
    }
}
AI 代码解读

这样我们就可以点击手机物理返回键来返回之前浏览的网页页面啦

  • 滑动到顶部

修改xml布局,增加一个滑动到页面顶部的ImageView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.administrator.androidtoh5.module.study.WebActivity">


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

    </WebView>

    <ImageView
        android:id="@+id/mUp"
        android:src="@drawable/up"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="33dp"
        />

</RelativeLayout>
AI 代码解读

设置图片的点击事件,当点击图片时,网页滑动到顶部

import kotlinx.android.synthetic.main.activity_web.*
class WebActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_web)

        mWebView.loadUrl("https://www.jianshu.com/u/8c6b4be8770b")
        mImgUp.setOnClickListener(View.OnClickListener {
            //滑动到当前网页的顶部
            val pageUp: Boolean = mWebView.pageUp(true)
            L.d("滑动到底部是否成功:$pageUp")
        })
    }

    /**
     * 重写返回回调监听
     */
    override fun onBackPressed() {
        //判断WebView是否可返回
        if (mWebView.canGoBack()) {
            //返回上一个页
            mWebView.goBack()
            return
        }
        super.onBackPressed()
    }
}
AI 代码解读
img_9151cc8c3a7b3e0b8904c5e3110c1e74.gif
一键到达页面顶部.gif

读取一段html代码,显示到页面上

private fun readHtml() {
    //WebUtil在项目的util包下,getHtml方法的作用是读取main-assets文件夹下的html文件的代码
    val json:String=WebUtil.getHtml("index.html",this)
    L.d("读取到的html代码:"+json)
    mWebView.loadData(json,"text/html",null)
}
AI 代码解读

销毁webView

mWebView.destroy()
AI 代码解读

暂停webView

mWebView.onPause()
AI 代码解读

恢复webView

mWebView.onResume()
AI 代码解读

隐藏垂直滚动条

mWebView.setVerticalScrollBarEnabled(false)
AI 代码解读

还有的情况是当我们需要完整的浏览器时,我们不使用WebView,而是通过Intent直接跳转到手机的浏览器

//当我们需要完整的浏览器的时候不使用WebView,而是直接跳转到默认浏览器
val uri = Uri.parse("https://www.baidu.com/")
val intent = Intent(Intent.ACTION_VIEW, uri)
startActivity(intent)
AI 代码解读

Java和Js的互调

创建JavaToActivity,在activity_java_to_js.xml下写一个用户名输入框和一个确定按钮

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.administrator.androidtoh5.module.webStudy.JavaToJsActivity">

    <EditText
        android:id="@+id/mEditView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入用户名"
        />
    <Button
        android:id="@+id/mBtnNext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="下一步"
        />
</LinearLayout>

AI 代码解读

在这里我们并不使用WebActivity那样在xml布局里面把WebView控件写好。而是通过代码方式生成,等到我们需要它的时候,通过setContentView来把WebView填充到界面上

import kotlinx.android.synthetic.main.activity_web.*
import org.jetbrains.anko.toast

/**
 * 1,Java调用javaScript方法
 * 2,javaScript方法调用Java方法
 */
class JavaToJsActivity : AppCompatActivity() {

    /**
     * 声明WebView
     */
    private var webView: WebView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_java_to_js)
        //进行WebView的基础基础配置
        initView()
        mBtnNext.setOnClickListener(View.OnClickListener {
            L.d("按钮的点击事件")
        })
    }

    /**
     * 进行基础的配置
     */
    private fun initView() {
        webView= WebView(this)
        val webSettings = webView!!.getSettings()
        //设置支持javaScript脚本语言
        webSettings.javaScriptEnabled = true

        //设置支持js调用java
        //JsToJava是js回调的类,Js调用的Java方法都应该写在里面
        webView!!.addJavascriptInterface(JsToJava(), "Android")

        //加载网络资源
        webView!!.loadUrl("https://a704.gitee.io/web/JavaToJs.html")
    }



    /**
     *js可以调用该类的方法
     */
    internal inner class JsToJava {
         //必须有该注解
        @JavascriptInterface
        fun show() {
            toast("我被js调用了啦")
        }
    }
}
AI 代码解读

我们在initView()方法内,通过设置webSetting类的javaScriptEnabled属性为true,以及WebView的addJavascriptInterface方法来使得WebView支持Js和Java的互调

分析下 webView!!.addJavascriptInterface(JsToJava(), "Android")

第一个参数是一个内部类JsToJava,我们网页端要回调的Android方法都应该写在里面,方法名要与js里面约定写好的方法名相同,如下图

画红框的Android字段则是我们addJavascriptInterface()方法要填入的第二个参数

img_aef0e1d2664235f910321ffb6a80cb40.png
js调java.png

接着在按钮的点击事件里面写我们的登录方法

/**
 * 登录方法
 */
private fun login() {
    val string: String = mEditView.text.toString().trim()

    if (!TextUtils.isEmpty(string)) {
        webView!!.loadUrl("javascript:javaToJs('$string')")
        setContentView(webView)
    }
}
AI 代码解读

获取输入框内容,webView通过loadUril方法把输入框内容作为参数传递到js的方法里,将new 出来的webView通过setContentView显示到界面上

img_1072740db03b1c3911ede6d76c31aa28.png
java调js.png

完整代码

import kotlinx.android.synthetic.main.activity_web.*
import org.jetbrains.anko.toast

/**
 * 1,Java调用javaScript方法
 * 2,javaScript方法调用Java方法
 */
class JavaToJsActivity : AppCompatActivity() {

    /**
     * 声明WebView
     */
    private var webView: WebView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_java_to_js)
        //进行WebView的基础基础配置
        initView()
        mBtnNext.setOnClickListener(View.OnClickListener {
            L.d("按钮的点击事件")
            login()
        })
    }

    /**
     *  登录方法
     */
    private fun login() {
        val string: String = mEditView.text.toString().trim()

        if (!TextUtils.isEmpty(string)) {
            //调用页面的js代码的javaToJs方法把参数传递进入
            webView!!.loadUrl("javascript:javaToJs('$string')")
            //将webView显示到界面上
            setContentView(webView)
        }
    }

    /**
     * 进行基础的配置
     */
    private fun initView() {
        webView= WebView(this)
        val webSettings = webView!!.getSettings()
        //设置支持javaScript脚步语言
        webSettings.javaScriptEnabled = true

        //设置支持js调用java
        //JsToJava是js回调的类,Js调用的Java方法都应该写在里面
        webView!!.addJavascriptInterface(JsToJava(), "Android")

        //加载网络资源
        webView!!.loadUrl("https://a704.gitee.io/web/JavaToJs.html")
    }



    /**
     *js可以调用该类的方法
     */
    internal inner class JsToJava {
        //必须有该注解
        @JavascriptInterface
        fun show() {
            toast("我被js调用了啦")
        }
    }
}
AI 代码解读

运行程序,在输入框内输入文本,跳转到界面后,用户名确实已经显示到界面上,证明我们Java调用js代码成功。点击按钮,弹出吐司,说明js调java也成功了,通过show方法,将吐司展示了出来

img_1923de20a05b3901eb13e1d244fd146c.gif
js与java的互调.gif

在Java和Js的互调中,https://a704.gitee.io/web/JavaToJs.html这个网页链接是我通过码云码云Pages服务生成的,它是一个类似免费服务器的东西。

网页的代码是使用WebStrom写的,IDEA全家桶,十分好用

目录
打赏
0
0
0
0
1
分享
相关文章
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
36 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
148 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
45 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
89 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
escrcpy 是一款基于 Scrcpy 的开源项目,使用 Electron 构建,提供图形化界面来显示和控制 Android 设备。它支持 USB 和 Wi-Fi 连接,帧率可达 30-120fps,延迟低至 35-70ms,启动迅速且画质清晰。escrcpy 拥有丰富的功能,包括自动化任务、多设备管理、反向网络共享、批量操作等,无需注册账号或广告干扰。适用于游戏直播、办公协作和教育演示等多种场景,是一款轻量级、高性能的 Android 控制工具。
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
37 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
79 19
探索安卓开发:打造你的首个天气应用
在这篇技术指南中,我们将一起潜入安卓开发的海洋,学习如何从零开始构建一个简单的天气应用。通过这个实践项目,你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供一个清晰的路线图和实用的代码示例,帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程,打造属于你自己的第一个安卓应用吧!
96 14
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
175 3
打造个性化安卓应用:从设计到开发的全面指南
在这个数字时代,拥有一个定制的移动应用不仅是一种趋势,更是个人或企业品牌的重要延伸。本文将引导你通过一系列简单易懂的步骤,从构思你的应用理念开始,直至实现一个功能齐全的安卓应用。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你提供必要的工具和知识,帮助你将创意转化为现实。

热门文章

最新文章

  • 1
    Android历史版本与APK文件结构
    23
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    32
  • 3
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    4
  • 4
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    10
  • 5
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    74
  • 6
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    20
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    9
  • 8
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    16
  • 9
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
    36
  • 10
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    11
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等