WebView与JS交互

最新推荐文章于 2024-09-22 11:17:00 发布

$Qw

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量473

点赞数

分类专栏： webview 文章标签： webview javascript

本文链接：https://blog.csdn.net/qiwei352/article/details/61201141

版权

webview 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.）mainfest.xml中加入网络权限

<uses-permission android:name="android.permission.INTERNET" />

2.）WebView开启支持JavaScript

mWebView.getSettings().setJavaScriptEnabled(true);

3.）添加交互接口

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), “demo”);

**添加接口类**  demo是链接js的栈桥
public class DemoJavaScriptInterface{
    public static final int CAMERA = 0x01;
    public static final int PHOTO = 0x02;
    public static final int DOWNLOAD= 0x03;
    private Context mContext;
    public MyJavaScript(Context context) {
    mContext = context;
    }
    //无参数方法
    /**
     * 原生拍照
     */
    @JavascriptInterface
    public void takePhoto() {
        Intent intent = new Intent(mContext, CameraActivity.class);
        intent.putExtra("photo","photo");
        ((Activity) mContext).startActivityForResult(intent, CAMERA);
    }

    /**
     * 原生相册
     */
    @JavascriptInterface
    public void selectPhoto() {
        Intent intent = new Intent(Intent.ACTION_PICK, null);
        intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*");
        intent.setAction(Intent.ACTION_GET_CONTENT);
        ((Activity) mContext).startActivityForResult(intent, PHOTO);
    }
    /**
     * 带参数方法
     */
    @JavascriptInterface
    public void downloadApk(String url) {
        Intent intent = new Intent(mContext, DownLoadActivity.class);
        intent.putExtra("url",url);
        ((Activity) mContext).startActivityForResult(intent, DOWNLOAD);
    }
}

在mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
之后添加mWebView.loadUrl(网页地址或者本地.html文件);
也可以在setWebViewClient（）事件中的
             @Override
          public boolean shouldOverrideUrlLoading(WebView webView, String s) {
            写webView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
            webView.loadUrl(s);
            在界面创建一个记录当前页面访问的WebView用于回调
            now = webView;
            }

**回调**
//这边介绍的都是带参数的回调，无参数的回调就不介绍了
@Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        //相机拍照回调
        if (requestCode == CAMERA && CommonUtil.notNull(data)) {
        处理相机回来的uri图片地址，一般是选择将图片Base64转码成图片流回调给js
        **now 记录当前访问的界面  ***注意这里''的拼接可能会回调不到js
        now.loadUrl("javascript:takePhoto_callback(" + "'" + base + "'" + ")");
        //添加回调效果
        now.setWebChromeClient(new WebChromeClient());
        }
         //相册照片上传回调
        if (requestCode == PHOTO && CommonUtil.notNull(data)) {
        处理选取相册回来的uri图片地址，一般是选择将图片Base64转码成图片流回调给js
        **now 记录当前访问的界面  ***注意这里''的拼接可能会回调不到js
        now.loadUrl("javascript:selectPhoto_callback(" + "'" + base + "'" + ")");
        //添加回调效果
        now.setWebChromeClient(new WebChromeClient());
        }
}

<input type="button"  value="Camera"  onclick="window.demo.optionCamera()"/>
<input type="button"  value="Photo"  onclick="window.demo.optionPhoto()"/>
//调起拍照 **注意添加demo.这相当于跟webview交互的栈桥
function optionCamera(){
    javascript:demo.takePhoto();
}
//调起相册
function optionPhoto(){
    javascript:demo.selectPhoto();
}
//调起下载apk
function optionDownloadApk(){
    javascript:demo.downloadApk(url);
}
//拍照回调
function takePhoto_callback(code){
     picBase = "data:image/jpeg;base64,"+code;  
}
//相册回调
function selectPhoto_callback(code){
     picBase = "data:image/jpeg;base64,"+code;
}