cordova-plugin-themeablebrowser插件加载的网页和ionic交互

公司的客户端一直用原生来开发，接到的需求很多，基本上每几天要发布一次新版本。领导考虑到频繁的提示更新会对用户体验不好。决定用ionic来重做。这个坑还挺多的，网上一大堆。

因为公司很多页面也是直接嵌套网上的，之前用iframe嵌套进去，发现ios有问题。嵌套进去的网页打开新连接会直接调用Safari打开。查找百度谷歌也找不到解决方法（我的技术也差点）。之后查找发现大家推荐用cordova-plugin-themeablebrowser插件代替iframe。没有办法果断安装测试下。发现浏览显示还挺正常的，心想就这样好了。之后新的问题到了。因为我们的支付页是连接网上的，支付宝还好可以直接使用网页版支付，微信支付就悲剧了，调不起来，原生客户端是可以检测用户点击了网上版的微信支付，之后用原生代码唤起微信进行支付。以前看见平安的保险产品购买的时候在普通浏览器也可以调起微信支付的，后来了解到这是微信的H5支付，对很少公司开放。自己测试看我们客户端能不能调起H5版微信支付，拿了微信支付h5版demo测试，发现安卓不支持，苹果可以。搜索看见很多安卓webview都是不支持微信H5支付的的。需要添加代码判断

if(url.startsWith("weixin://wap/pay?")）｛

    Intent intent = new Intent();
    intent.setAction(Intent.ACTION_VIEW);
    intent.setData(Uri.parse(url));
    Activity().startActivity(intent);

｝

看看插件的源代码可以加到项目下的\plugins\cordova-plugin-themeablebrowser\src\android\ThemeableBrowser.java

 @Override
        public boolean shouldOverrideUrlLoading(WebView webView, String url) {
            if (url.startsWith(WebView.SCHEME_TEL)) {
                try {
                    Intent intent = new Intent(Intent.ACTION_DIAL);
                    intent.setData(Uri.parse(url));
                    cordova.getActivity().startActivity(intent);
                    return true;
                } catch (android.content.ActivityNotFoundException e) {
                    Log.e(LOG_TAG, "Error dialing " + url + ": " + e.toString());
                }
            } else if (url.startsWith("geo:") || url.startsWith(WebView.SCHEME_MAILTO) || url.startsWith("market:")) {
                try {
                    Intent intent = new Intent(Intent.ACTION_VIEW);
                    intent.setData(Uri.parse(url));
                    cordova.getActivity().startActivity(intent);
                    return true;
                } catch (android.content.ActivityNotFoundException e) {
                    Log.e(LOG_TAG, "Error with " + url + ": " + e.toString());
                }
            }
            else if (url.startsWith("weixin://wap/pay?")) {
               
                Intent intent = new Intent();
                intent.setAction(Intent.ACTION_VIEW);
                intent.setData(Uri.parse(url));
                cordova.getActivity().startActivity(intent);
                return true;
          
               
            }

　　重新打包编译可以发现已经可以调起微信H5支付。后来发现我司不能申请到H5微信支付。建议用app调微信支付。

继续研究ThemeableBrowser.java代码，发现可以这个插件可以暴露一个方法给网页调用。添加代码

添加导入

import android.webkit.JavascriptInterface;

　ThemeableBrowser.java文件大概792行代码添加

  //设置本地调用对象及其接口  
        settings.setAllowFileAccess(false);
        inAppWebView.addJavascriptInterface(new JavaScriptObject(cordova.getActivity()), "Handler");

　　最后的大括号前面添加

public class JavaScriptObject {  
    Context mContxt;  
   // 
    public JavaScriptObject(Context mContxt) {  
        this.mContxt = mContxt;  
    }  
    
    @JavascriptInterface
    public void action(String type,String result) {  
	 //增加js接口给前端调用
         emitLog(type,"0",result);
     
    }  
   
}  

　ionic监控事件

var browser  =cordova.ThemeableBrowser.open(url, type, config);
browser.addEventListener('pay', function (data) { 
     console.log(data);
});

browser.addEventListener('其他自定义类型', function (data) { 

     console.log(data);
});

　前端调用

Handler.action('pay',{no:'123455'});

Handler.action('其他自定义类型',{no:'123455'});

　重新打包后正常可以调用　

 

https://www.fly178.com/post/1676a67035d