精华内容
下载资源
问答
  • Android H5混合开发

    2020-09-30 14:02:38
    关键点:安卓与H5 方法互调,数据互通 整体思路:通过H5调用安卓原生方法进行扫一扫,之后回传给H5页面 最终效果: h5调用扫一扫功能.gif 完成这个功能,其主要功能实现放在了原生安卓上,h5端只做调用以及...


    关键点:安卓与H5 方法互调,数据互通
    整体思路:通过H5调用安卓原生方法进行扫一扫,之后回传给H5页面
    最终效果:

     

    h5调用扫一扫功能.gif

    完成这个功能,其主要功能实现放在了原生安卓上,h5端只做调用以及回显
    首先咱们来看H5网页代码:

     

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <!-- 使页面适配手机屏幕 -->
            <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
            <title></title>
        </head>
    
        <body>
            <!-- 这里是通过点击某个Div来隐式创建一个 input 控件,然后实现直接访问相机的功能。-->
            <div id="demoForClick">
                <div id="btnID">H5调用安卓扫一扫功能</div>
            </div>
            <!-- 换行 -->
                <button  onclick='startTest()'>开始测试</button>
                <label style='width: 100%;height: auto;word-wrap:break-word;word-break:break-all;overflow: hidden;' id='result'>测试结果:</label>
            <script>
                function startTest(){
                window.android.takePhoto();
                }
                function testResult(content){
                document.getElementById('result').innerHTML='测试结果:'+content;
                }
            </script>
        </body>
    </html>
    

    接下来我们看原生部分
    1 在build.gradle(project)中添加仓库文件

     

    allprojects {
        repositories {
            jcenter()
            maven { url 'https://jitpack.io' } //仓库地址
        }
    }
    

    2 在build.gradle(app)中添加依赖

     

        compile 'com.github.yuzhiqiang1993:zxing:2.2.5'
    

    3 定义js接口类

     

      private class JsInterface {
            // 安卓原生与h5互调方法定义
            @JavascriptInterface //js接口声明
            public void takePhoto() {
                    Intent intent = new Intent(MainActivity.this, CaptureActivity.class); //打开扫一扫
                    startActivityForResult(intent, REQUEST_CODE_SCAN);
            }
        }
    

    4 设置安卓原生webview

     

       myWebView.addJavascriptInterface(new JsInterface(), "android");
    

    5 在回调方法中调用网页H5方法

     

    @Override
        protected void onActivityResult(int requestCode, int resultCode, Intent data) {
            super.onActivityResult(requestCode, resultCode, data);
    
            // 扫描二维码/条码回传
            if (requestCode == REQUEST_CODE_SCAN && resultCode == RESULT_OK) {
                if (data != null) {
                    String content = data.getStringExtra(Constant.CODED_CONTENT);
                    showToast(content);
                    String method = "javascript:testResult('" + content + "')";
                    myWebView.loadUrl(method);
                }
            }
        }
    

    总结:
    扫一扫核心内容为原生与h5方法互调
    在h5网页中通过以下代码调用原生方法

     

    window.android.takePhoto();
    

    需要在原生安卓中定义接口方法详情并设置
    在原生安卓中通过以下代码调用h5方法

     

           String method = "javascript:testResult('" + content + "')";
            myWebView.loadUrl(method);


     

    展开全文
  • android h5混合开发返回键监听

    千次阅读 2018-05-01 14:14:52
    android h5混合开发返回键监听 在混合开发的时候,android返回键默认每次按返回都是返回上一页,而有时候我们的需求并不是这样的,如果返回的界面是有弹窗的,那么我们点击返回键需求就是关闭弹窗,而不是返回上一...
    android h5混合开发返回键监听

           在混合开发的时候,android返回键默认每次按返回都是返回上一页,而有时候我们的需求并不是这样的,如果返回的界面是有弹窗的,那么我们点击返回键需求就是关闭弹窗,而不是返回上一页,那么这时候我们就需要提供接口来进行判断,是否是按需求来返回,还是默认返回,那具体是怎么实现的呢?

    tips: 主要是重写onKeyDown方法 ,在h5端提供_Native_backListener()方法,返回String或是boolean,若是返回ture,则由h5端处理,若是返回false,则默认返回。我的Activity是MainActivity

    /**
     * 重写onKeyDown,当浏览网页,WebView可以后退时执行后退操作。
     * false 执行安卓返回方法即webview返回上一页 true 表示h5处理返回事件,android端不再处理
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            webView.evaluateJavascript("javascript:_Native_backListener()", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                   if ("false".equals(value) || "null".equals(value)) {
                       goBack();
                   }else if ("true".equals(value)){
                       // h5处理,客户端不做任何操作
                   }
                }
            });
        }
        return true;
    }
    
    private void goBack(){
    
        if (webView.canGoBack()){
            webView.goBack();
        }else{
            // 网页不可返回上一页,按两次退出
            long now = System.currentTimeMillis();
            long delta = now - lastClickTime;
            if (delta > 3 * 1000) {
                backPressedCounter = 0;
            }
            lastClickTime = now;
            backPressedCounter++;
            if (backPressedCounter == 1) {
                mHandle.sendEmptyMessage(CLOSE_APP_TIP);
            } else if (backPressedCounter == 2) {
                MainActivity.this.finish();
            }
        }
    }
    
    展开全文
  • 前言如果安卓项目已经存在了,那么如何使用Cordova做混合开发?方案1(适用于插件会持续增加或变化的项目):新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平台(我们的安卓项目需要做目录结构、配置...

    前言

    如果安卓项目已经存在了,那么如何使用Cordova做混合开发?

    方案1(适用于插件会持续增加或变化的项目):

    新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平台(我们的安卓项目需要做目录结构、配置等很多内容调整),后续开发中,可通过命令在Codova项目中统一快速添加插件,进行原生与H5通信。

    方案2(适用于插件较稳定的项目):

    新建Cordova项目并添加Android平台,添加相关插件,将Android平台下H5代码、插件相关的内容导入到我们的项目中(我们的安卓项目目录结构、配置信息等变化较小)。后续开发中,如果新增、编辑插件,则无法直接通过命令在我们的项目中维护插件,需要在新建的Cordova项目中维护好,然后手动复制过来相关的文件。

    本次讲解,我们使用第二种方案吧。实现也很简单,大致过程如下:

    1.准备安卓项目

    2.将Cordova项目的Cordovalib导入安卓项目,并在gradle中添加依赖

    3.将Cordova项目的H5端代码(即/WWW/)拷贝到 /安卓项目/src/assets/下

    4.将Cordova项目的config.xml拷贝到 /安卓项目/res/xml/下

    5.将Cordova项目的于H5端约定的插件.java代码拷贝到 /安卓项目/src/对应包名下/(我们主要此处写代码)

    6.将Cordova项目的WhitelistPlugin拷贝到 /安卓项目/src/下

    注意,本次讲解:

    1.我们新建一个项目mynativeapp作为已存在的安卓项目;

    2.我们直接使用《Android H5混合开发(2):自定义Cordova插件》中的Demo作为Cordova项目;

    1.准备安卓项目

    在/TestCordova/mynativeapp/目录下,使用AndroidStudio创建一个普通的安卓项目,取名:mynativeapp,如下图:

    2.将Cordova项目的Cordovalib导入安卓项目,并在gradle中添加依赖

    一般方案:

    使用cordova命令新建一个混合项目,添加android平台,里面包含Cordovalib。然后在我们的安卓项目中导入即可。

    此处,我们直接导入上一节课 /Cordova项目/android平台下的Cordovalib:

    3.将Cordova项目的H5端代码(即/WWW/)拷贝到 /安卓项目/src/assets/下

    注意:因为咱们这里只是做Demo,实际上并没有找H5端的人员写这块的代码。在上一节课,咱们在Cordova项目的android平台中,已经写了个测试的H5代码,那么,就直接使用这个吧,如下图:

    复制到/mynativeapp/src/assets/下

    ![复制过来的H5的代码](https://upload-images.jianshu.io/upload_images/10170988-46cf75f94b1bc855.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    4.将Cordova项目的config.xml拷贝到 /安卓项目/res/xml/下

    我们将Cordova项目/res/xml/config.xml文件,拷贝到/mynativeapp/res/xml/下

    5.将Cordova项目的于H5端约定的插件.java代码拷贝到 /安卓项目/src/对应包名下/

    正常开发时,我们主要此处写代码。

    在上节课,我们的自定义插件的代码已经有了,所以直接复制过来就可以了。

    6.将Cordova项目的WhitelistPlugin(插件白名单)拷贝到 /安卓项目/src/下

    准备工作完毕,开始测试

    至此,安卓项目中所需的Cordova依赖、H5代码、插件相关信息都手动导入了。接下来我们测试一下H5的功能吧。

    1.新建类TestCordovaActivity,继承CordovaActivity,加载index.html

    package com.ccc.ddd;

    import android.os.Bundle;

    import org.apache.cordova.CordovaActivity;

    /**

    * @author xc

    * @date 2018/9/25

    * @desc 测试H5的页面

    */

    public class TestCordovaActivity extends CordovaActivity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    // enable Cordova apps to be started in the background

    Bundle extras = getIntent().getExtras();

    if (extras != null

    && extras.getBoolean("cdvStartInBackground", false)) {

    moveTaskToBack(true);

    }

    // Set by in config.xml

    // 加载H5首页

    loadUrl(launchUrl);

    }

    }

    2.MainActivity添加按钮,点击跳转至TestCordovaActivity页面

    package com.ccc.ddd;

    import android.content.Intent;

    import android.support.v7.app.AppCompatActivity;

    import android.os.Bundle;

    import android.view.View;

    import android.widget.Button;

    public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    Button button = findViewById(R.id.button);

    button.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

    Intent intent = new Intent(MainActivity.this,

    TestCordovaActivity.class);

    MainActivity.this.startActivity(intent);

    }

    });

    }

    }

    编译安卓项目,运行到手机

    总结

    本章介绍了在已有安卓项目中如何使用Cordova,没有太多技术点。

    如果有不明白的地方,建议去官网多查查资料。

    [https://cordova.apache.org/docs/en/latest/)

    Cordova的命令、插件的命令等只是方便我们快速管理维护项目和插件的工具。我们可以使用,但是不能太过依赖,要活学活用。

    源码已上传至网盘:

    https://pan.baidu.com/s/1THPUbfCgRQHZGLWy7_Zkww

    Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

    https://www.cnblogs.com/qixingchao/p/11652438.html

    展开全文
  • Android H5混合开发 JS调用原生方法

    千次阅读 2018-04-11 11:30:02
    最近刚接收的新项目,涉及到了JS和原生android的交互,遇到了一些问题做个记录保存下来首先 webview.addJavascriptInterface1.首先还是一样的布局文件放WebView控件,创建一个H5Activity.class去调用此布局2.然后给...

    最近刚接收的新项目,涉及到了JS和原生android的交互,遇到了一些问题做个记录保存下来

    首先   webview.addJavascriptInterface

    1.首先还是一样的布局文件放WebView控件,创建一个H5Activity.class去调用此布局

    2.然后给webview添加一个js接口,webview.addJavascriptInterface(Object obj,String name);

    这个接口放提供后台去调用的方法名  第一个参数为自己写的接口参数,第二个参数是一个类似Tag的参数,给后台做标识号

    3.在接口里的方法名上添加@JavascriptInterface

    表示当前为JS方法便可以在当前方法内进行处理  记住该方法参数名等都要与后台的保持一致

    @JavascriptInterface
    public void finishH5Web(){
    H5Activity.this.finish();
    }
    


    展开全文
  • 前言如果安卓项目已经存在了,那么如何使用Cordova做混合开发?方案1(适用于插件会持续增加或变化的项目):新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平台(我们的安卓项目需要做目录结构、配置...
  • Cordova是什么 Apache Cordova是一个开源的移动开发框架。... 以移动平台为例,安卓、IOS平台设备的常用功能,被Apache封装成一个个插件,如摄像头、传感器...Cordova提供了完整的机制,使得H5、安卓、IOS等平台混合开发.
  • 项目经理说,Android没有处理弹框,点击按钮没有反应,iOS就可以。于是就复写了onJsAlert、onJsConfirm、onJsPrompt三个方法,来处理页面上的弹框。写完后满心喜悦的以为可以了,没想到项目经理说,点击按钮异常退出...
  • android h5混合开发(二)

    千次阅读 2017-05-31 11:51:02
    开发吗,原生岂不是更好.  解决屏幕适配性一般有两张解决方案,一种是响应式布局,二是flex布局.我并不推荐在手机上进行响应式布局,因为响应式布局会需要判断屏幕宽度,不同的屏幕尺寸和不同的分辨率搭配起来这个...
  • 开发软件:AndroidStudio,WebStorm 扫一扫库文件下载:compile ‘com.github.yuzhiqiang1993:zxing:2.2.5’ 关键点:安卓与H5 方法互调,数据互通 整体思路:通过H5调用安卓原生方法进行扫一扫,之后回传给H5页面...
  • 原标题:原生Android结合H5混合开发小结微信,微博以及现在市面上大量的软件使用内嵌了H5页面;有些外包公司,为了节约成本,采用Android内嵌H5模式开发,便于在iOS上直接复用页面, 从而提高开发效率。实现的原理:...
  • AndroidH5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的,但使用Android开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新...
  • Android +H5混合开发

    2020-12-27 17:55:27
    总能从网上听说到 XXX混合开发, 为了紧跟潮流(虽然有点儿晚了), 咱们也看看Android+Html5混合开发是怎样的! 今天带来的案例是微信的朋友圈, 因为我觉得是微信把H5给"捧红了". 不过丑话说在前头, 咱们的仿朋友圈可是...
  • androidH5混合开发

    2018-06-15 09:27:14
    最近在左一个Android原生的H5混合开发的APP,之前还没有好好的总结一下Android原生 和 H5 之间交互的方法,这里来总结一下:1、hybrid通信,主要就是前端的js和我们Android端的通信 这是最基本JS和Java 的通信...
  • AndroidH5混合开发

    2018-02-12 16:36:00
    AndroidH5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的,但使用Android开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新...
  • android原生组件与h5混合开发
  • Android+H5混合开发

    万次阅读 2017-02-07 18:02:01
    总能从网上听说到 XXX混合开发, 为了紧跟潮流(虽然有点儿晚了), 咱们也看看Android+Html5混合开发是怎样的! 今天带来的案例是微信的朋友圈, 因为我觉得是微信把H5给"捧红了". 不过丑话说在前头, 咱们的仿朋友圈可是...
  • Android&H5混合开发

    2018-11-23 14:33:39
    这几天,后台和我身边的同事一直在讨论H5Android交互的问题。前端说他们调不了Android 拍照。。。。。 反正讨论的很精彩,,,最后,我接盘。。。懵逼啊,没搞过啊。 于是乎度娘问了一番。好像不是很难,对,不难...
  • Android+H5互调,H5调原生Android代码扫码设别商品信息返回到H5页面 开发工具:Android studio4.0,项目是最新的Androidx,开发时间:2020/07/28 代码最后优化于:2020/08/24 演示地址:...
  • Androidx+H5混合开发

    2020-08-22 18:26:58
    Demo:Android+H5互调,H5调原生Android代码扫码设别商品信息返回到H5页面 开发工具:Android studio4.0,项目是最新的Androidx,开发时间是2020/07/28 1.引入jar包 2.copy Zxing包到项目(包名不一样肯定会...
  • 电商或者内容类APP中,H5通常都会占据一席之地,Native跟H5通信会必不可少,比如某些场景H5通知native去分享,native通知H5局部刷新等,Android本身也提供这样的接口,比如addJavascriptInterface、loadUrl(...
  • androidh5混合开发中,有时会用URL传递一些参数过来,那么我们可以封装一个URL参数解析类,在使用的时候直接调用就可以了。代码如下: import java.util.HashMap; import java.util.Map; import android.text....
  • 混合开发概述 微信,微博以及现在市面上大量的软件使用内嵌了H5页面;有些外包公司,为了节约成本,采用Android内嵌H5模式开发,便于在iOS上直接复用页面, 从而提高开发效率。 实现的原理: 本质是:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 715
精华内容 286
关键字:

androidh5混合开发