今天在网上看到一个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页面)