x5_webview 0.1.5

  • Readme
  • Changelog
  • Example
  • Installing
  • 81

x5_webview pub package #

一个基于腾讯x5引擎的webview的flutter插件,暂时只支持android使用

x5内核介绍 #

x5内核,腾讯为改善移动端web体验的一种内核架构。加载更快,更省流量,视频播放优化,文件助手等等

快速集成 #

pub package

pub地址

pubspec.yaml文件添加

dependencies:
  x5_webview: ^x.x.x //最新版本见上方

为兼容x64手机,在bulid.gradle里面的defaultConfig添加ndk支持

        ndk {
            abiFilters "armeabi-v7a"
        }

在启动时,初始化x5

void main() {
  X5Sdk.init().then((isOK) {
    print(isOK ? "X5内核成功加载" : "X5内核加载失败");
  });
  runApp(MyApp());
}

如果你只是想要简单的展示web页面,可使用以下代码直接打开一个webActivity, 性能更佳(推荐使用,视频播放也可以这个api)

X5Sdk.openWebActivity("https://www.baidu.com",title: "web页面");

使用TBSPlayer直接全屏播放视频(screenMode自行测试,103横屏 104竖屏,官方默认使用102第一次点击全屏无反应)

    var isOk = await X5Sdk.openVideo(
    "https://ifeng.com-l-ifeng.com/20180528/7391_46b6cf3b/index.m3u8",screenMode: 102);

打开本地文件(格式支持较多,视频音频图片办公文档压缩包等等,支持文件详情)

//local: “true”表示是进入系统文件查看器,如果不设置或设置为“false”,则进入 miniqb 浏览器模式
var msg = await X5Sdk.openFile("/sdcard/download/FileList.xlsx",local: "true");
print(msg);

使用内嵌webview(可能会有些bug,目前知道的是输入框不能正常打字) #

return Scaffold(
      appBar: AppBar(
        title: Text("X5WebView示例"),
      ),
      body: defaultTargetPlatform == TargetPlatform.android
          ? X5WebView(
              url: "http://debugtbs.qq.com",
              javaScriptEnabled: true,
              onWebViewCreated: (control) {
                _controller = control;
              },
              onPageFinished: () async {
                var url = await _controller.currentUrl();
                print(url);
                var body = await _controller
                    .evaluateJavascript('document.body.innerHTML');
                print(body);
              },
            )
          :
          //可替换为其他已实现ios webview,此处使用webview_flutter
          WebView(
              initialUrl: "https://www.baidu.com",
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (control) {
                _otherController = control;
                var body = _otherController
                    .evaluateJavascript('document.body.innerHTML');
                print(body);
              },
            ),
    );

内嵌webview js与flutter互调

  • flutter调用js
var body = await _controller.evaluateJavascript("document.body.innerHTML");
  • js调用flutter
    var listName = ["X5Web", "Toast"];
    _controller.addJavascriptChannels(listName, (name, data) {
      switch (name) {
        case "X5Web":
          print(data);
          break;
        case "Toast":
          print(data);
          break;
      }
    });
  • js代码
X5Web.postMessage("XXX")
Toast.postMessage("YYY")

打开本地html文件(使用assets文件,内嵌webview同理) #

var fileS = await rootBundle.loadString("assets/index.html");
var url = Uri.dataFromString(fileS,
                          mimeType: 'text/html',
                          encoding: Encoding.getByName('utf-8'))
                      .toString();
X5Sdk.openWebActivity(url, title: "本地html示例");

注意事项 #

  • 该插件暂时只支持Android手机,IOS会使用无效。ios可使用webview_flutter或其他已实现IOS WXWebView插件

  • 一般手机安装了QQ,微信,QQ浏览器等软件,手机里自动会有X5内核,如果没有X5内核会在wifi下自动下载,X5内核没有加载成功会自动使用系统内核官网说明。详细配置可用手机打开以下链接查看X5内核的详情

      http://debugtbs.qq.com
    
  • 请使用真机测试,模拟器可能不能正常显示

  • 如果添加ndk支持后,打开app闪退请添加以下运行配置,或者使用android sdk运行。

      flutter build apk --debug --target-platform=android-arm
      flutter run --use-application-binary=build/app/outputs/apk/debug/app-debug.apk
    
  • android9.0版本webview联不了网在manifest添加

      <application
          ...
          android:usesCleartextTraffic="true">
      </application>
    
  • android7.0版本打开文件需要在mannifest的

            <!--        不使用androidx 请用android:name="android.support.v4.content.FileProvider"-->    
          <provider
              android:name="androidx.core.content.FileProvider"
              android:authorities="${applicationId}"
              android:exported="false"
              android:grantUriPermissions="true">
              <meta-data
                  android:name="android.support.FILE_PROVIDER_PATHS"
                  android:resource="@xml/x5webview_file_paths" />
          </provider>  
    
  • 有比较急的问题可以加我QQ:793710663

示例程序下载(密码:123456) #

apk下载

二维码

0.0.1 #

  • 集成android x5内核webview

0.1.0 #

  • 修改部分代码,提升pub分数

0.1.1 #

  • 调整示例app,修复loadUrl报错等问题

0.1.2 #

  • 修复编译出错的问题

0.1.3 #

  • actionBar获取异常处理
  • 增加js调用flutter功能
  • 内核增加下载安装监听

0.1.4 #

  • 增加文件打开功能
  • 内嵌webview增加接口isX5WebViewLoadSuccess

0.1.5 #

  • 增加本地html加载示例
  • sdk升级,添加文件权限
  • 修复部分bug

example/lib/main.dart

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:x5_webview/x5_sdk.dart';
import 'package:path_provider/path_provider.dart';

import 'demo.dart';

import 'package:dio/dio.dart';

void main() {
  X5Sdk.setDownloadWithoutWifi(true); //没有x5内核,是否在非wifi模式下载内核。默认false
  X5Sdk.init().then((isOK) {
    print(isOK ? "X5内核成功加载" : "X5内核加载失败");
  });
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Center(
        child: ListView(
          children: <Widget>[
            RaisedButton(
                onPressed: () async {
                  X5Sdk.openWebActivity("http://debugtbs.qq.com",
                      title: "X5内核信息");
                },
                child: Text("查看X5内核信息")),
            RaisedButton(
                onPressed: () async {
                  var canUseTbsPlayer = await X5Sdk.canUseTbsPlayer();
                  if (canUseTbsPlayer) {
                    showInputDialog(
                        onConfirm: (url) async {
                          await X5Sdk.openVideo(url, screenMode: 102);
                        },
                        defaultText:
                            "https://youku.com-l-youku.com/20181221/5625_d9733a43/index.m3u8");
                  } else {
                    print("x5Video不可用");
                  }
                },
                child: Text("x5video直接播放视频")),
            RaisedButton(
                onPressed: () async {
                  showDialog(
                      context: context,
                      builder: (context) {
                        return AlertDialog(
                          title: Text("X5Sdk打开本地文件示例"),
                          content: Text("请先下载再打开"),
                          actions: <Widget>[
                            FlatButton(
                              onPressed: () async {
                                Navigator.pop(context);
                              },
                              child: Text("取消"),
                            ),
                            FlatButton(
                              onPressed: () async {
                                try {
                                  showDialog(
                                      context: context,
                                      barrierDismissible: false,
                                      builder: (context) {
                                        return AlertDialog(
                                          content: Column(
                                            mainAxisSize: MainAxisSize.min,
                                            children: <Widget>[
                                              CircularProgressIndicator(),
                                              Padding(
                                                padding:
                                                    EdgeInsets.only(top: 20),
                                              ),
                                              Text("等待下载")
                                            ],
                                          ),
                                        );
                                      });
                                  var dir=await getExternalStorageDirectory();
                                  print(await getExternalStorageDirectory());
                                  print(await getApplicationSupportDirectory());
                                  print(await getApplicationDocumentsDirectory());
                                  var response = await Dio().download(
                                      "http://lc-QMTBhNKI.cn-n1.lcfile.com/aa1b149fab1fd3c7d88b/%E6%96%87%E4%BB%B6%E6%A0%BC%E5%BC%8F%E6%94%AF%E6%8C%81%E5%88%97%E8%A1%A8.xlsx",
                                      "${dir.path}/FileList.xlsx");
                                  print(response.data);
                                  Navigator.pop(context);
                                } catch (e) {
                                  print(e);
                                  Navigator.pop(context);
                                }
                              },
                              child: Text("下载"),
                            ),
                            FlatButton(
                              onPressed: () async {
                                var dir= await getExternalStorageDirectory();
                                print(dir);
                                var msg = await X5Sdk.openFile(
                                    "${dir.path}/FileList.xlsx");
                                print(msg);
                              },
                              child: Text("打开"),
                            )
                          ],
                        );
                      });
                },
                child: Text("x5sdk打开本地文件示例")),
            RaisedButton(
                onPressed: () async {
//                                          Navigator.of(context).push(
//                            CupertinoPageRoute(builder: (BuildContext context) {
//                              return DemoWebViewPage("http://bin.amazeui.org/tizayo");
//                            }));

                  showInputDialog(
                      onConfirm: (url) {
                        Navigator.of(context).push(
                            CupertinoPageRoute(builder: (BuildContext context) {
                          return DemoWebViewPage(url);
                        }));
                      },
                      defaultText: "http://bin.amazeui.org/tizayo");
                },
                child: Text("flutter内嵌x5webview")),
            RaisedButton(
                onPressed: () async {
                  showInputDialog(
                      onConfirm: (url) async {
                        await X5Sdk.openWebActivity(url, title: "web页面");
                      },
                      defaultText: "https://baidu.com");
                },
                child: Text("x5webviewActivity")),
            RaisedButton(
                onPressed: () async {
                  var fileHtmlContents =
                      await rootBundle.loadString("assets/index.html");
                  var url = Uri.dataFromString(fileHtmlContents,
                          mimeType: 'text/html',
                          encoding: Encoding.getByName('utf-8'))
                      .toString();

                  await X5Sdk.openWebActivity(url, title: "本地html示例");

//                  showInputDialog(
//                      onConfirm: (url) async {
//
//
//                        await X5Sdk.openWebActivity(url, title: "web页面");
//                      },
//                      defaultText: "https://baidu.com");
                },
                child: Text("本地html")),
          ],
        ),
      ),
    );
  }

  void showInputDialog(
      {@required ConfirmCallBack onConfirm, String defaultText = ""}) {
    final _controller = TextEditingController(text: defaultText);
    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text("输入链接测试"),
            content: TextField(
              controller: _controller,
            ),
            actions: <Widget>[
              FlatButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text("取消")),
              FlatButton(
                  onPressed: () async {
                    Navigator.pop(context);
                    onConfirm(_controller.text);
                  },
                  child: Text("跳转"))
            ],
          );
        });
  }
}

typedef ConfirmCallBack = Function(String url);

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  x5_webview: ^0.1.5

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:x5_webview/x5_webview.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
62
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
81
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test