Android和H5交互之初学H5

关注

原创最新推荐文章于 2026-09-28 10:02:31 发布 564 阅读 AI 写同款· GEO 优化 ›

Hbuilder 调试连接Hbuilder进行调试时，成功启动手机模拟器后如果没有检测到设备，多点几下刷新，如果点击刷新还是没有连接到手机模拟器，手机打开开发者模式，打开USB调试，下载互传APP（不清楚是否都需要下载这个软件，看连接情况），用数据线进行连接。3.重新启动项目，（建议先打开手机开发者模式→USB调试→互传）（电脑打开互传可直接连接）（打开项目，运行程序）→运行到Android 可以连接手机或者手机模拟器进行调试运行程序。1.建议关闭运行程序，关闭模拟器，先开模拟器，后运行程序。运行到手机或者模拟器。阅读详情

最近公司的项目需要用到H5来开发所以抽空来了解了一下H5因为是初学所以我用的是HBuilder来开发H5，HBuilder下载地址:点击下载而且HBuilder有一些现成的js和css可以让我这类初学者不用那么繁琐点击查看

这个是首页的代码页面就是一个webView所以就不贴了

package com.example.liuqiang.h5test;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends Activity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.mWebView);
    }

    private void init(){
        //可以是本地的也可以是网页的
        webView.loadUrl("页面地址");
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(this, "test");
    }

    //可以写在一个公共类里面
    //注意:方法的修饰符一定要是public

    @JavascriptInterface
    public void dd() {
        Toast.makeText(this, "dd", Toast.LENGTH_LONG).show();
    }

    @JavascriptInterface
    public void cc() {
        Toast.makeText(this, "cc", Toast.LENGTH_LONG).show();
    }
}

下面是HTML的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<ul style="height: 100%;" class="mui-table-view">
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">面板1</a>
				<div class="mui-collapse-content">
					<p style="margin-left: 20px;">面板1子内容</p>
				</div>
			</li>
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">面板1</a>
				<div class="mui-collapse-content">
					<p style="margin-left: 20px;">面板1子内容</p>
				</div>
			</li>
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">面板1</a>
				<div class="mui-collapse-content">
					<p style="margin-left: 20px;">面板1子内容</p>
				</div>
			</li>
			<li style="margin:20px;">
				<button type="button" onclick="window.test.dd()" class="mui-btn">确认</button>
				<button type="button" onclick="window.test.cc()" class="mui-btn">取消</button>
			</li>
		</ul>
	</body>
</html>