android开发分享Flutter使用JsBridge方式处理Webview与H5通信的方法

  webview_flutter: 0.3.19+9

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

  <key>io.flutter.embedded_views_preview</key>  <string>yes</string>

  const webview({   key key,   this.onwebviewcreated,   this.initialurl,   this.javascriptmode = javascriptmode.disabled,   this.javascriptchannels,   this.navigationdelegate,   this.gesturerecognizers,   this.onpagestarted,   this.onpagefinished,   this.debuggingenabled = false,   this.gesturenavigationenabled = false,   this.useragent,   this.initialmediaplaybackpolicy =    automediaplaybackpolicy.require_user_action_for_all_media_types,   }) : assert(javascriptmode != null),    assert(initialmediaplaybackpolicy != null),    super(key: key);  

  <button onclick="callflutter()">callflutter</button>  function callflutter(){   toast.postmessage("js调用了flutter");   }  

  webview(    javascriptchannels: <javascriptchannel>[     _alertjavascriptchannel(context),   ].toset(),  )    javascriptchannel _alertjavascriptchannel(buildcontext context) {   return javascriptchannel(    name: 'toast',    onmessagereceived: (javascriptmessage message) {    showtoast(message.message);    });  }    

  document.location = "js://webview?arg1=111&args2=222";  

  navigationdelegate: (navigationrequest request) {   if (request.url.startswith('js://webview')) {    showtoast('js调用了flutter by navigationdelegate');    print('blocking navigation to $request}');   navigator.push(context,    new materialpageroute(builder: (context) => new testnav()));   return navigationdecision.prevent;   }   print('allowing navigation to $request');   return navigationdecision.navigate; //必须有  },  

  class jsbridge {   string method; // 方法名   map data; // 传递数据   function success; // 执行成功回调   function error; // 执行失败回调     jsbridge(this.method, this.data, this.success, this.error);     /// jsonencode方法中会调用实体类的这个方法。如果实体类中没有这个方法，会报错。   map tojson() {   map map = new map();   map["method"] = this.method;   map["data"] = this.data;   map["success"] = this.success;   map["error"] = this.error;   return map;   }      static jsbridge frommap(map<string, dynamic> map) {   jsbridge jsonmodel = new jsbridge(map['method'], map['data'], map['success'], map['error']);   return jsonmodel;   }     @override   string tostring() {   return "jsbridge: {method: $method, data: $data, success: $success, error: $error}";   }  }    

  class jsbridgeutil {   /// 将json字符串转化成对象   static jsbridge parsejson(string jsonstr) {   jsbridge jsbridgemodel = jsbridge.frommap(jsondecode(jsonstr));   return jsbridgemodel;   }     /// 向h5开发接口调用   static executemethod(context, jsbridge jsbridge) async{   if (jsbridge.method == 'openwechatapp') {    /// 先检测是否已安装微信    bool _iswechatinstalled = await fluwx.iswechatinstalled();    if (!_iswechatinstalled) {    toast.show(context, '您没有安装微信');    jsbridge.error?.call();    return;    }    fluwx.openwechatapp();    jsbridge.success?.call();   }   }  }    

   final string url;   final string title;   webviewcontroller webviewcontroller; // 添加一个controller   final privacyprotocoldialog privacyprotocoldialog;     webview({key key, this.url, this.title = '', this.privacyprotocoldialog})    : super(key: key);     @override   webviewstate createstate() => webviewstate();  }    class webviewstate extends state<webview> {   bool isphone = adapter.isphone();   javascriptchannel _jsbridge(buildcontext context) => javascriptchannel(    name: 'foxapp', // 与h5 端的一致 不然收不到消息    onmessagereceived: (javascriptmessage msg) async{    string jsonstr = msg.message;    jsbridgeutil.executemethod(jsbridgeutil.parsejson(jsonstr));    });     @override   widget build(buildcontext context) {   return scaffold(    backgroundcolor: isphone ? colors.white : color(config.foxcolors.bg),    appbar: appbar(    backgroundcolor: isphone ? null : color(config.foxcolors.bg),    leading: appicon(config.foximages.backgreyurl,     callback: (){      navigator.of(context).pop(true);      if (widget.privacyprotocoldialog != null) { // 解决切换页面时弹框显示异常问题      privacyprotocoldialog.show(context);      }     }),    title: text(widget.title),    centertitle: true,    elevation: 0,    ),    body: storeconnector<appstate, userstate>(     converter: (store) => store.state.userstate,     builder: (context, userstate) {     return webview(      initialurl: widget.url,      useragent:"mozilla/5.0 foxapp", // h5 可以通过navigator.useragent判断当前环境      javascriptmode: javascriptmode.unrestricted, // 启用 js交互，默认不启用javascriptmode.disabled      javascriptchannels: <javascriptchannel>[      _jsbridge(context) // 与h5 通信      ].toset(),     );     }),     );   }  }    

  <!doctype html>  <html lang="en">  <head>   <meta charset="utf-8">   <meta name="viewport"     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">   <meta http-equiv="x-ua-compatible" content="ie=edge">   <title>document</title>  </head>  <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>  <body>  coming baby!  <script>  var str = navigator.useragent;  if (str.includes('foxapp')) {  foxapp.postmessage(json.stringify({method:"openwechatapp"}));  } else {  $('body').html('<p>hello world</p>');  }  </script>  </body>  </html>