美文网首页
腾讯x5的webview flutter

腾讯x5的webview flutter

作者: 爱运动的年轻人 | 来源:发表于2019-11-19 15:32 被阅读0次

    github地址
    欢迎加入QQ群883130953 有问题一起讨论
    功能说明

    • Android 已实现桥接 视频播放 相册打开

    • Ios只支持普通的页面显示

    1. webview初始化

    
    ///注意: 需要首先授权存储权限 否则 X5内核加载失败
    
          X5Plugin.init().then((isOk) {
            x5Init = isOk;
            print(isOk ? "X5内核成功加载" : "X5内核加载失败");
          });
    
    

    2.提供了三种方式 一般建议第三种

    
    class _HomePageState extends State<HomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Plugin example app'),
          ),
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              GestureDetector(
                onTap: () {
                  X5Plugin.openFilechooserActivity("file:///android_asset/webpage/fileChooser.html",
                      title: "xx");
                },
                child: Container(
                  child: Text("支持打开相册页面 支持视频 不支持桥接"),
                  width: 150,
                  height: 150,
                  color: Colors.red,
                ),
              ),
              SizedBox(height: 30,),
              GestureDetector(
                onTap: () {
                  X5Plugin.openWebActivity("https://www.youku.com/", title: "xx");
                },
                child: Container(
                  child: Text("支持视频 不支持桥接和相册"),
                  width: 150,
                  height: 150,
                  color: Colors.red,
                ),
              ),
              SizedBox(height: 30,),
              GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => new Demo("file:///android_asset/webpage/demo.html")),
                  );
                },
                child: Container(
                  child: Text("支持 桥接 视频  不支持相册(一般建议用这个 这个实用)"),
                  width: 150,
                  height: 150,
                  color: Colors.red,
                ),
              ),
            ],
          ),
        );
      }
    }
    
    

    3.一般建议这种方式

    
    class Demo extends StatefulWidget {
      String url;
      Demo(this.url);
      @override
      _DemoState createState() => _DemoState();
    }
    
    class _DemoState extends State<Demo> {
      X5WebViewController _controller;
      @override
      Widget build(BuildContext context) {
        return Scaffold (
          appBar: AppBar(
              title: Text("webview实例")),
          body:  X5Webview(url: widget.url,
          onPageFinished: (String url) async{
          ///桥接名字
            var listName = ["X5Web"];
            _controller.addJavascriptChannels(listName,
                    (name, data) {
                  switch (name) {
                    case "X5Web":
                      showDialog(
                          context: context,
                          builder: (context) {
                            return AlertDialog(
                              title: Text("获取到的字符串为:"),
                              content: Text(data),
                            );
                          });
    
                      break;
    
                    case "Toast":
    
                      print(data);
    
                      break;
    
                  }
    
                });
    
          },
    
          onWebViewCreated:(X5WebViewController controller) {
    
            _controller = controller;
    
          } ,)
    
        );
    
      }
    
    }
    
    

    相关文章

      网友评论

          本文标题:腾讯x5的webview flutter

          本文链接:https://www.haomeiwen.com/subject/tjawictx.html