Android和H5交互之初学H5

最新推荐文章于 2024-03-20 11:11:00 发布

fire_nirvana

最新推荐文章于 2024-03-20 11:11:00 发布

阅读量434

点赞数

分类专栏： H5 文章标签： H5之初学H5

本文链接：https://blog.csdn.net/fire_nirvana/article/details/71430427

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近公司的项目需要用到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" οnclick="window.test.dd()" class="mui-btn">确认</button>
				<button type="button" οnclick="window.test.cc()" class="mui-btn">取消</button>
			</li>
		</ul>
	</body>
</html>

fire_nirvana

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android和H5交互之初学H5

最近公司的项目需要用到H5来开发所以抽空来了解了一下H5因为是初学所以我用的是HBuilder来开发H5，HBuilder下载地址:点击下载而且HBuilder有一些现成的js和css可以让我这类初学者不用那么繁琐点击查看这个是首页的代码页面就是一个webView所以就不贴了package com.example.liuqiang.h5test;import android.app.
复制链接

扫一扫