X5、WebViewJavascriptBridge、百度地图网页版 整合注意事项

简介: 一 什么是webViewjavascripBridge?           WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁,用作者的话来说就是实现java(ios为oc)和js的互相调用的桥梁。



一 什么是webViewjavascripBridge?

          WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁,用作者的话来说就是实现java(ios为oc)和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口,使得我们的开发更加灵活和安全。


         WebViewJavascriptBridge for Android

         https://github.com/jesse01/WebViewJavascriptBridge


         WebViewJavascriptBridge for iOS/OSX

         https://github.com/marcuswestin/WebViewJavascriptBridge

             注意:使用4.1.5版才能跟安卓的保持一致:

         pod 'WebViewJavascriptBridge','4.1.5'



二 什么是X5

       

  •         TBS2.1基于Android 5.0 WebView Blink内核(M37版本)适配定制优化,适配Android全部主流平台,可以支持移动应用App在所有Android手机上使用Blink的技术能力。TBS2.1支持Service Worker,可以帮助Web应用后台运行,提供离线访问等原生App应用体验。此外,TBS2.1在H5/CSS3支持,安全,可靠,性能方面有进一步提升。TBS2.1已经发布,将逐步在各客户端中静默升级,用户终端无需更新微信、手机QQ、QQ空间即可使用最新的TBS2.1Blink内核。
           x5接入文档

三  接入注意事项

        1、X5与WebViewJavascriptBridge

      
    private class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            return super.onJsAlert(view, url, message, result);
        }

        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            return super.onJsConfirm(view, url, message, result);
        }

        @Override
        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
            return super.onJsPrompt(view, url, message, defaultValue, result);
        }

        @Override
        public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
            callback.invoke(origin, true, false);
            super.onGeolocationPermissionsShowPrompt(origin, callback);
        }

        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
            if (mUploadMessage != null) return;
            Log.e("openFileChooser", "openFileChooser");
            mUploadMessage = uploadMsg;
            selectImage();
//               Intent i = new Intent(Intent.ACTION_GET_CONTENT);
//               i.addCategory(Intent.CATEGORY_OPENABLE);
//               i.setType("*/*");
//                   startActivityForResult( Intent.createChooser( i, "File Chooser" ), FILECHOOSER_RESULTCODE );
        }

        // For Android < 3.0
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            openFileChooser(uploadMsg, "");
        }

        // For Android  > 4.1.1
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            openFileChooser(uploadMsg, acceptType);
        }

    }

GeolocationPermissions.Callback 替换为 GeolocationPermissionsCallback

     修改为:

            
    private class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            return super.onJsAlert(view, url, message, result);
        }

        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            return super.onJsConfirm(view, url, message, result);
        }

        @Override
        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
            return super.onJsPrompt(view, url, message, defaultValue, result);
        }

        @Override
        public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissionsCallback callback) {
            callback.invoke(origin, true, false);
            super.onGeolocationPermissionsShowPrompt(origin, callback);
        }

        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
            if (mUploadMessage != null) return;
            Log.e("openFileChooser", "openFileChooser");
            mUploadMessage = uploadMsg;
            selectImage();
//               Intent i = new Intent(Intent.ACTION_GET_CONTENT);
//               i.addCategory(Intent.CATEGORY_OPENABLE);
//               i.setType("*/*");
//                   startActivityForResult( Intent.createChooser( i, "File Chooser" ), FILECHOOSER_RESULTCODE );
        }

        // For Android < 3.0
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            openFileChooser(uploadMsg, "");
        }

        // For Android  > 4.1.1
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            openFileChooser(uploadMsg, acceptType);
        }

    }

         2,X5与百度地图网页版

            地图加载慢或者加载不出来的情况 ,发现是因为
            1、x5没能打开GPS定位权限,建议提示将GPS、WiFi、4G网络定位都打开。
            2、第一次加载百度地图去下载的网页元素太大











相关文章
|
移动开发 定位技术 Android开发
可直接复制,踩坑以及解决方法,成功版本)uniapp H5地图选点经纬度,地址详细信息
可直接复制,踩坑以及解决方法,成功版本)uniapp H5地图选点经纬度,地址详细信息
649 1
可直接复制,踩坑以及解决方法,成功版本)uniapp H5地图选点经纬度,地址详细信息
|
JavaScript 小程序
微信小程序-页面访问组件数据和方法
好了,结构搭建的差不多了,接下来就是来看关键的内容了,首先我们来看一下如何拿到一个自定义组件的实例,有两种方式,这两种方式的前提条件是,给这个组件设置一个标识,设置标识的方式可以是通过类名或者ID进行设置,然后通过这个标识得到组件实例。
346 0
|
小程序 定位技术
uniapp小程序打开地图选择位置demo效果wx.chooseLocation(整理)
uniapp小程序打开地图选择位置demo效果wx.chooseLocation(整理)
|
小程序 JavaScript 定位技术
微信小程序地图步骤
微信小程序地图步骤
|
小程序 JavaScript 前端开发
微信小程序 地图选点 获取用户选择的定位信息 wx.chooseLocation
微信小程序 地图选点 获取用户选择的定位信息 wx.chooseLocation
657 0
|
数据采集 缓存 编解码
|
前端开发 小程序 JavaScript
微信小程序 Canvas 动态生成二维码并保存到本地
微信小程序 Canvas 动态生成二维码并保存到本地
|
存储 JavaScript Linux
网页爱心特效弱爆了,我让你点击网页显示所有python模块!
一个点击网页出现爱心特效的插件 click_heart.js ,当然大家可能也见过其他博客上面,有点击网页出现类似 富强、民主、文明、和谐等等,关于代码在这里不多赘述,网上一查就能查到。代码如下:
471 0
|
移动开发 小程序 前端开发
微信小程序 动态修改颜色
微信小程序 动态修改颜色
539 0
|
前端开发 JavaScript 数据安全/隐私保护
前端给网页添加明水印的解决办法
前端给网页添加明水印的解决办法
320 0