Android和H5混合开发(一)

1.html界面

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script type="text/javascript">
        function showToast(toast) {
            javascript:control.showToast(toast);
        }
        function log(msg){
            console.log(msg);
        }
    </script>

</head>

<body>
<input type="button" value="toast"
       onClick="showToast('Hello world')" />
</body>
</html>

2.将Html放入Android中的assets下

3.打开JS通道

 WebSettings webSettings = mTestWB.getSettings();
 webSettings.setJavaScriptEnabled(true);

4.WebView的addJavascriptInterface方法去注入一个我们自己写的interface。

mTestWB.addJavascriptInterface(new JsInterface(), "control");

5.loadUrl

mTestWB.loadUrl("file:///android_asset/index.html");

6.实现JSInterface

public class JsInterface {
        //JS中调用Java的方法
        @JavascriptInterface
        public void showToast(String toast){
            Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
            //Java调用JS中的方法
            log("show toast success");
        }
        public void log(final String msg){
            mTestWB.post(new Runnable() {
                @Override
                public void run() {
                    mTestWB.loadUrl("javascript: log(" + "'" + msg + "'" + ")");
                }
            });
        }
    }

7.整体Java Demo

public class MainActivity extends AppCompatActivity {

    private WebView mTestWB;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTestWB = (WebView) findViewById(R.id.test_wb);
        //打开JS通道
        WebSettings webSettings = mTestWB.getSettings();
        //
        webSettings.setJavaScriptEnabled(true);
        //WebView的addJavascriptInterface方法去注入一个我们自己写的interface。
        mTestWB.addJavascriptInterface(new JsInterface(), "control");
        //loadUrl
        mTestWB.loadUrl("file:///android_asset/index.html");
    }
    public class JsInterface {
        //JS中调用Java的方法
        @JavascriptInterface
        public void showToast(String toast){
            Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
            //Java调用JS中的方法
            log("show toast success");
        }
        public void log(final String msg){
            mTestWB.post(new Runnable() {
                @Override
                public void run() {
                    mTestWB.loadUrl("javascript: log(" + "'" + msg + "'" + ")");
                }
            });
        }
    }
}

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值