您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-29(使用WebView组件url_launcher加载远程web页面渲染新闻详情数据)

2020-04-30【Flutter】1272人已围观

简介## 一、Flutter 实现一个简单的新闻 APP **涉及的 api 接口：** **新闻列表：** http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1 **新闻详情：** http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=20 **`WebView`加载的远程 web 页面：** http://www.phon

## 一、Flutter  实现一个简单的新闻 APP

**涉及的 api  接口：**

**新闻列表：** http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1

**新闻详情：** http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=20

**`WebView`加载的远程 web  页面：**
http://www.phonegap100.com/newscontent.php?aid=198

## 二、Flutter WebView  组件 inappbrowser的使用

[文档地址 https://pub.dev/packages/flutter_inappwebview](https://pub.dev/packages/flutter_inappwebview)

**注意事项：**

在构建，如果Android的失败 `Error: uses-sdk:minSdkVersion 16 cannot be smaller than version 17 declared in library`，这意味着你需要更新 `minSdkVersion` 你的 `build.gradle` 文件至少 17

## 三、使用url_launcher加载页面

[文档地址 https://pub.dev/packages/url_launcher](https://pub.dev/packages/url_launcher)

> 打开网页

```
Future<void> _launchInBrowser(String url) async {
  if (await canLaunch(url)) {
    await launch(
      url,
      forceSafariVC: false,
      forceWebView: false,
      headers: <String, String>{'my_header_key': 'my_header_value'},
    );
  } else {
    throw 'Could not launch $url';
  }
}
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-28(实现简单的新闻系统渲染新闻详情数据以及用用flutter_html 解析析html)

下一篇：flutter-30(获取设备信息、获取地理位置)