Android WebView与js交互

今天在网上看到一个js写的抽奖大转盘,觉得很有意思,就像把他集成到安卓里

需求：在App里用webview加载大转盘网址,转盘停止之后通过js回调本地方法把结果传递到App中,App弹窗显示,需要两个技术

1：用webview加载地址
2：通过webview和js交互

那么我们就来写一下吧 在项目中新建DrawActivity页面

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:background="@color/error_color_material_dark"
    tools:context=".ui.activity.DrawActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_marginTop="@dimen/x21"
        app:title="每日一抽"
        app:titleTextColor="@color/white"
        android:background="@color/error_color_material_dark"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.v7.widget.Toolbar>

    <WebView
        android:id="@+id/mWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
      />


</LinearLayout>

很简单，一个Toolbar一个Webview

Java代码

package com.lingjuan.app.ui.activity;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

import com.jaeger.library.StatusBarUtil;
import com.lingjuan.app.R;
import com.lingjuan.app.base.BaseActivity;
import com.lingjuan.app.constant.Constant;
import com.lingjuan.app.utils.DialogUtil;
import com.lingjuan.app.utils.ToastManage;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * 抽奖页面
 * data: 2019/2/26 15:04
 */
public class DrawActivity extends BaseActivity {

    @BindView(R.id.mWebView)
    WebView mWebView;
    @BindView(R.id.toolbar)
    Toolbar toolbar;
    private JsInterface jsInterface;
    private boolean conduct = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        StatusBarUtil.setTranslucentForImageView(this, getResources().getColor(R.color.error_color_material_dark), null);
        setContentView(R.layout.activity_draw);
        ButterKnife.bind(this);
        initView();
        initData();
    }

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void initView() {
        jsInterface = new JsInterface();
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        WebSettings webSettings = mWebView.getSettings();
        // 设置android下容许执行js的脚本
        webSettings.setJavaScriptEnabled(true);
        //允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        //添加JS交互 第一个参数是类  里面写上回调的方法  第二个参数是js调用的用户名
        mWebView.addJavascriptInterface(jsInterface, "jsApp");
        //加载地址
        mWebView.loadUrl(Constant.HTTP_DRAW);
        toolbar.setNavigationOnClickListener(v -> {
            if (!conduct) {
                ToastManage.showText(getActivity(), "大转盘正在进行,请停止后在关闭");
                return;
            }
            finish();
        });
        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                if(title != null){
                    //获取网页标题
                    toolbar.setTitle(String.valueOf(title));
                }
            }
        });
    }

    @Override
    protected void initData() {

    }

    @Override
    protected int getLayout() {
        return R.layout.activity_draw;
    }

    @Override
    protected Activity getActivity() {
        return this;
    }


    private class JsInterface {
        @JavascriptInterface
        public void getdrawResults(String str) {
            conduct = true;
            DialogUtil.showDialog(getActivity(), str, "知道了", null);
        }

        @JavascriptInterface
        public void getStare() {
            conduct = false;
        }
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (!conduct) {
                ToastManage.showText(getActivity(), "大转盘正在进行,请停止后在关闭");
            }else {
                finish();
            }
        }
        return false;
    }
}

大转盘部分代码

$('.pointer').click(function (){
    //开始的时候调用客户端方法  其中jsApp为App中传递过来的参数名getStare为方法
    window.jsApp.getStare();
	if(turnplate.bRotate)return;
	turnplate.bRotate = !turnplate.bRotate;
	//获取随机数(奖品个数范围内)
    var num = Math.round(Math.random()* 100); //获取100之内的任意一个整数；
    if(num < 5){
        item = 0;
    }else if(num > 5 && num < 20){
        item = rnd(1,2);
    }else if(num > 20 && num < 60){
        item = rnd(3,5);
    }else {
        item = 6;
    }

    rotateFn(item, turnplate.restaraunts[item]);
});

var rotateFn = function (item, txt){
	var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
	if(angles<270){
		angles = 270 - angles; 
	}else{
		angles = 360 - angles + 270;
	}
	$('#wheelcanvas').stopRotate();
	$('#wheelcanvas').rotate({
		angle:0,
		animateTo:angles+2100,
		duration:5000,
		callback:function (){
			console.log(txt);
			turnplate.bRotate = !turnplate.bRotate;
			//结束时候调用结束方法并且传参过去 App中弹出Dialog
            window.jsApp.getdrawResults(txt);
		}
	});
};

我们来看一下最终效果

App下载地址：http://suo.im/4qDcGT
项目地址：https://github.com/CrackgmKey/Bearbear （DrawActivity页面）