x5_webview 0.1.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 74

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());
}

使用内嵌webview

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")

使用TBSPlayer直接播放视频

 var canUseTbsPlayer = await X5Sdk.canUseTbsPlayer();
 if (canUseTbsPlayer) {
    var isOk = await X5Sdk.openVideo(
    "https://ifeng.com-l-ifeng.com/20180528/7391_46b6cf3b/index.m3u8");
 } else {
     print("x5Video不可用");
 }

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

var msg = await X5Sdk.openFile("/sdcard/download/FileList.xlsx");
print(msg);

如果你只是想要简单的展示web页面,可使用以下代码直接打开一个webActivity, 性能更佳

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

注意事项 #

  • 该插件暂时只支持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>
    
  • 有比较急的问题可以加我QQ:793710663

示例程序下载 #

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

example/README.md

x5_webview_example #

Demonstrates how to use the x5_webview plugin.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  x5_webview: ^0.1.4

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]
49
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]
74
Learn more about scoring.

We analyzed this package on Dec 11, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.1
  • pana: 0.13.1+4
  • Flutter: 1.12.13+hotfix.2

Health suggestions

Format lib/x5_webview.dart.

Run flutter format to format lib/x5_webview.dart.

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