Android混合开发(一)

简介: 以前也用过webview,不过基本都是展示一些静态的页面,就直接对着API怼就行,现在由于某一块功能太过于繁杂,用本地的方法去开发的话就会太过于麻烦,不是做不到而是没必要,所以也就是时候好好尝试下混合开发。

以前也用过webview,不过基本都是展示一些静态的页面,就直接对着API怼就行,现在由于某一块功能太过于繁杂,用本地的方法去开发的话就会太过于麻烦,不是做不到而是没必要,所以也就是时候好好尝试下混合开发。
这过程中会涉及到和前端JS的交互,如果没接触过前端的至少应该也要先去了解下前端,其实我对前端也只是略懂略懂。

一.开发前的准备

既然要同时开发Android原生代码和前端代码,那肯定要做些准备,android端就用android studio这是肯定的,我前端打算写vue项目(我也不会angular),我是用webstorm去开发,然后肯定也搭好了Vue的环境,前端这一块用什么写无所谓,思想和操作我觉得其实是大概相同的。

1.手机浏览本地网页

因为是开发的过程,我们不可能每次写完前端的代码都要部署一次,所以第一件要做的事就是在手机端能正常运行到前端的代码。
其实这个一般不用说的,鉴于我是第一次嘛,就顺便记录一下,那怎么做呢,那这用vue举例。
(1)首先要先让手机和电脑都同时连在一个局域网内
(2)配置vue内部的环境(这个我只懂配,不懂原理,其它框架肯定也一样)。把host和端口都配置下。


img_dd5f545088daf49afabe3db6723ebcf4.png

img_0bedf59326a2fe597862fddc3a434120.png

(3)查看本地电脑的当前ip
我是windows的,在命令行输ipconfig查看IPv4地址,这个没啥好解释的


img_1bbfea21460569bc19e96792899a9c9e.png

然后测试一下能不能在本地用ip来打开你写的网页
img_bb16b5841ca349459e875024ac7b245c.png

(4)手机输入网址
电脑是能正常的打开了,然后试试在手机上能不能打开这个网址
img_e2320a3c0ab8b7a7caf980efbb359158.png

看到这样就说明手机能正常展示电脑上的我们写的网页,这样就完成了第一步。

二.对接Android与前端

能正常在手机展示前端网页后,可以对接下Android与前端,其实就是使用webview,webview就是一个内置的浏览器

        WebView webview = (WebView) findViewById(R.id.webview);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.getSettings().setDomStorageEnabled(true);
        webview.loadUrl("http://192.168.1.119:8090");

loadUrl就是展示网页这个我想应该不用多解释,把展示的地址设置成我们前端网页的地址看看效果

img_a18444ce4b4dd74a5b949fc16289c6b6.png

嗯,能正常的展示出页面,这样我们就能在不部署前端代码的情况下进行混合开发。
这里说一下,这里我用Vue是响应式的就很方便,我直接改前端的代码,不用刷新WebView里面的页面内容也会直接进行改变,这样只要我们不改Android原生的代码的话就不用重新run APP,但是这基本是不可能的,既然是混合开发,一般对接的功能两边都要改。

三.WebView

能正常显示后我们现在就应该把中心放到WebView上面,WebView现在就相当于两个端的一个桥梁。

1.探究两端代码的执行顺序

其实这里我想问一个问题:
WebView属于多进程吗?
我找了很多资料都没有看到有人提到过这个问题,如果有大神知道请告诉我,如果是在别的浏览器打开肯定是不同进程,但是浏览在本地呢算不算不同进程。

首先这个开发我不知道是怎样的一个流程,是我调用loadUrl方法的时候就开始加载前端页面了吗?
带着这个疑问我打算先去探究一下本地代码和前端代码的执行顺序,我在vue页面的生命周期中打印100个数字的循环,在本地loadUrl方法之后也打印100个数字的循环
前端:


img_4a8fe5b2402b44af3897fc32c6c761d7.png

本地

img_876e9d3aa4bf379d009395b607cfd616.png

框中的方法是能打印前端的日记到androidstudio的logcat上。这样做,是不是说明如果两个数字交叉打印的话就证明至少它们的执行不在一个线程上,然后打印发现结果是 先打印本地的0到99,再打印前端的0到99(数字太多我就不贴了),在onResume打印也是这个结果。

那是不是说明,等webview显示出来之后才去加载前端的页面?
很可惜的是在AS里面看不了webview的源码,对此只能到网上去找资料。

我找到别人说webview是多由两个线程组成,他初始化顺序是

img_ac5cb291611cb7c57ad52adcbcc53a32.png

出自 https://tech.meituan.com/WebViewPerf.html

那说明我们之前答应的数字有顺序是因为webview的初始化时间太长了而不是在同个进程。

四.webview的操作

大概了解两边的执行顺序之后就好弄的,因为如果你不知道执行顺序的话,有可能你在本地执行一个js的方法,你不知道是在什么时候执行,而大概知道整个过程之后就很好把控了。

看看webview有哪些操作,webview有两个比较重要的类
WebChromeClient和WebViewClient
关于这两个类,如果设置的话很多文章都写的是匿名内部类,我建议最好是继承去实现,这样扩展性会比较好。
第一个类主要跟一些网页的弹框之类的有关,第二个类主要跟一些流程有关。

1.Android调用js的方法

API19以上可以用这个方法

webview.evaluateJavascript("javascript:changename()", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        //此处为 js 返回的结果
                        Log.v("Native",value);
                    }
                });

19以下可以用

webview.loadUrl("javascript:changename()");

关键你要知道在什么地方调用js的方法,调用时你要保证页面已经加载完成了,不然你调用也没效果,那么要如何确定页面已经加载完成,这就需要上面说的WebViewClient
如果你想在加载页面后马上调用js的某个方法,你可以这样写

webview.setWebViewClient(new WebViewClient(){

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                // 开始加载页面时
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                // 加载结束
                webview.evaluateJavascript("javascript:changename()", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        //此处为 js 返回的结果
                        Log.v("Native",value);
                    }
                });
            }
        });

还有一点,如果使用框架的话,是没法直接调用框架里面写的方法的,我用vue就是这样,网上查了,说要把前端的方法给window,那我这里也贴下我前端的代码


img_3f15bd0bd8e5e7b3ccec936babedddf8.png

我这里把方法给window,这样android端就能正常的调用vue里面的方法。

2.js调用Android方法

其实这说法按网上的文章的写法,并不是让js直接调用Android的方法,而是在Android定义一个对象,让这个对象映射到js里面的一个对象,再让这个对象去调用方法。

(1)android端
先定义一个要映射给js的对象,要让js调用的方法要加上 @JavascriptInterface

public class WebTest {

    private Context context;

    public WebTest(Context context){
        this.context = context;
    }

    @JavascriptInterface
    public void show(String s) {
        Toast.makeText(context,s,Toast.LENGTH_SHORT).show();
    }

}

然后设置给前端,将WebTest对象映射到前端的mandroid对象

webview.addJavascriptInterface(new WebTest(this),"mandroid");

(2)前端
我先写个点击事件


img_f0a4443670ddb8b36e5b8e0a401875d4.png

在这个事件中调用android的方法

show(){
      mandroid.show("js调用了android中的方法");
    }

这样就能在js中调用android的代码。

五.总结

先讲这么多吧,主要是说说怎么在本地共同开发android和前端,WebChromeClient的onConsoleMessage可以打印前端的日记,这样的话调试的时候也基本没啥问题。
第二个就是简单的讲了Android端和Js的调用,其实只要能通信的话就很方便了,就像我之前写的进程间的通信,也是拿到代理对象后通信,这里差不多的。

我并没用详细去写太多关于webview的内容,因为如果有人想看API这些总结的话别人写得比我好,我就没必要再写了:
https://mp.weixin.qq.com/s/Rn7s31nxxY3vWnFRyjyjiA这里有很多webview的相关方法。

然后就是如果你会了这些其实还是没法做好混合开发,因为体验的效果其实并不是很好,等熟悉webview的使用后可以看看美团的这篇文章:
https://tech.meituan.com/WebViewPerf.html

还有一些其它的特殊功能没详细讲,比如说定位,传图片这些,因为我也没怎么开发过这些功能,不过我敢保证肯定会有坑,剩下的等碰到再写吧。

目录
相关文章
|
5天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
7天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
9天前
|
XML 存储 Java
探索安卓开发之旅:从新手到专家
【10月更文挑战第35天】在数字化时代,安卓应用的开发成为了一个热门话题。本文旨在通过浅显易懂的语言,带领初学者了解安卓开发的基础知识,同时为有一定经验的开发者提供进阶技巧。我们将一起探讨如何从零开始构建第一个安卓应用,并逐步深入到性能优化和高级功能的实现。无论你是编程新手还是希望提升技能的开发者,这篇文章都将为你提供有价值的指导和灵感。
|
7天前
|
存储 API 开发工具
探索安卓开发:从基础到进阶
【10月更文挑战第37天】在这篇文章中,我们将一起探索安卓开发的奥秘。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和建议。我们将从安卓开发的基础开始,逐步深入到更复杂的主题,如自定义组件、性能优化等。最后,我们将通过一个代码示例来展示如何实现一个简单的安卓应用。让我们一起开始吧!
|
8天前
|
存储 XML JSON
探索安卓开发:从新手到专家的旅程
【10月更文挑战第36天】在这篇文章中,我们将一起踏上一段激动人心的旅程,从零基础开始,逐步深入安卓开发的奥秘。无论你是编程新手,还是希望扩展技能的老手,这里都有适合你的知识宝藏等待发掘。通过实际的代码示例和深入浅出的解释,我们将解锁安卓开发的关键技能,让你能够构建自己的应用程序,甚至贡献于开源社区。准备好了吗?让我们开始吧!
21 2
|
9天前
|
Android开发
布谷语音软件开发:android端语音软件搭建开发教程
语音软件搭建android端语音软件开发教程!
|
17天前
|
编解码 Java Android开发
通义灵码:在安卓开发中提升工作效率的真实应用案例
本文介绍了通义灵码在安卓开发中的应用。作为一名97年的聋人开发者,我在2024年Google Gemma竞赛中获得了冠军,拿下了很多项目竞赛奖励,通义灵码成为我的得力助手。文章详细展示了如何安装通义灵码插件,并通过多个实例说明其在适配国际语言、多种分辨率、业务逻辑开发和编程语言转换等方面的应用,显著提高了开发效率和准确性。
|
16天前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域,自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View,以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理,进而探索内存和布局优化技巧,最终实现既美观又高效的安卓界面。
28 5
|
14天前
|
JSON Java Android开发
探索安卓开发之旅:打造你的第一个天气应用
【10月更文挑战第30天】在这个数字时代,掌握移动应用开发技能无疑是进入IT行业的敲门砖。本文将引导你开启安卓开发的奇妙之旅,通过构建一个简易的天气应用来实践你的编程技能。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你宝贵的学习资源。我们将一步步地深入到安卓开发的世界中,从搭建开发环境到实现核心功能,每个环节都充满了发现和创造的乐趣。让我们开始吧,一起在代码的海洋中航行!
|
15天前
|
缓存 数据库 Android开发
安卓开发中的性能优化技巧
【10月更文挑战第29天】在移动应用的海洋中,性能是船只能否破浪前行的关键。本文将深入探讨安卓开发中的性能优化策略,从代码层面到系统层面,揭示如何让应用运行得更快、更流畅。我们将以实际案例和最佳实践为灯塔,引领开发者避开性能瓶颈的暗礁。
34 3