本节目标

  • 详情页技术方案比较
  • 载入 web 内容
  • 自动计算高度
  • 清除广告、推荐
  • 拦截请求
  • loading 状态显示
  • 分享插件
  • 远程 android 设备调试

详情展示

技术方案选择

分析工具 UI automator view

  • 文件位置

/Users/ducafecat/Library/Android/sdk/tools/bin/uiautomatorviewer

淘宝方案

混合方式

头条

混合方式

什么值得买

单一 webView

技术点分析

    1. webView 原生 混合方式
    1. 计算 web 页面高度
    1. 拦截请求,自定义指令
    1. 内存占用(尽量少的 dom 元素)

安装插件

  • webview_flutter

https://pub.flutter-io.cn/packages/webview_flutter

  • pubspec.yaml
1
2
dependencies:
webview_flutter: ^0.3.20+2
  • ios/Runner/Info.plist
1
2
<key>io.flutter.embedded_views_preview</key>
<true/>

构建界面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 顶部导航
Widget _buildAppBar() {
return Container();
}

// 页标题
Widget _buildPageTitle() {
return Container();
}

// 页头部
Widget _buildPageHeader() {
return Container();
}

// web内容
Widget _buildWebView() {
return Container();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
_buildPageTitle(),
Divider(height: 1),
_buildPageHeader(),
_buildWebView(),
],
),
),
);
}

url 载入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Widget _buildWebView() {
return Container(
height: _webViewHeight,
child: WebView(
initialUrl:
'$SERVER_API_URL/news/content/${widget.item.id}', //widget.url,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) async {
_controller.complete(webViewController);
},
gestureNavigationEnabled: true,
),
);
}

计算高度

1
2
3
4
5
double _webViewHeight = 200;

javascriptChannels: <JavascriptChannel>[
_invokeJavascriptChannel(context),
].toSet(),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 注册js回调
JavascriptChannel _invokeJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'Invoke',
onMessageReceived: (JavascriptMessage message) {
print(message.message);
var webHeight = double.parse(message.message);
if (webHeight != null) {
setState(() {
_webViewHeight = webHeight;
});
}
});
}
  • 回调
1
2
3
4
5
6
onPageFinished: (String url) {
_getWebViewHeight();
setState(() {
_isPageFinished = true;
});
},
1
2
3
4
5
6
7
8
9
10
11
12
// 获取页面高度
_getWebViewHeight() async {
await (await _controller.future)?.evaluateJavascript('''
try {
// Invoke.postMessage([document.body.clientHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight]);
let scrollHeight = document.documentElement.scrollHeight;
if (scrollHeight) {
Invoke.postMessage(scrollHeight);
}
} catch {}
''');
}

清除广告、推荐

1
2
3
4
5
6
7
8
9
onPageStarted: (String url) {
Timer(Duration(seconds: 1), () {
setState(() {
_isPageFinished = true;
});
_removeAd();
_getViewHeight();
});
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
_removeWebViewAd() async {
await (await _controller.future)?.evaluateJavascript('''
try {
function removeElement(elementName){
let _element = document.getElementById(elementName);
if(!_element) {
_element = document.querySelector(elementName);
}
if(!_element) {
return;
}
let _parentElement = _element.parentNode;
if(_parentElement){
_parentElement.removeChild(_element);
}
}

removeElement('module-engadget-deeplink-top-ad');
removeElement('module-engadget-deeplink-streams');
removeElement('footer');
} catch{}
''');
}

拦截请求

  • 页面中 href
1
2
3
4
5
6
7
8
9
10
11
<div class="tags">
<a href="/tag/chrome-os" class="tag">chrome os</a>
<a href="/tag/chromebook" class="tag">chromebook</a>
<a href="/tag/computer" class="tag">computer</a>
<a href="/tag/gear" class="tag">gear</a>
<a href="/tag/google" class="tag">google</a>
<a href="/tag/laptop" class="tag">laptop</a>
<a href="/tag/personal computing" class="tag">personal computing</a>
<a href="/tag/personalcomputing" class="tag">personalcomputing</a>
<a href="/tag/pixelbook-go" class="tag">pixelbook go</a>
</div>
  • navigation 拦截
1
2
3
4
5
6
7
navigationDelegate: (NavigationRequest request) {
if (request.url != '$SERVER_API_URL/news/content/${widget.item.id}') {
toastInfo(msg: request.url);
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},

loading 状态显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

bool _isPageFinished = false;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(),
body: Stack(
children: <Widget>[
SingleChildScrollView(
child: Column(
children: <Widget>[
_buildPageTitle(),
Divider(height: 1),
_buildPageHeader(),
_buildWebView(),
],
),
),
_isPageFinished == true
? Container()
: Align(
alignment: Alignment.center,
child: LoadingBouncingGrid.square(),
),
],
));
}

分享

安装插件

1
2
dependencies:
share: ^0.6.4

代码

1
2
3
onPressed: () {
Share.share('${widget.item.title} ${widget.item.url}');
},

真机调试

  • scrcpy

https://github.com/Genymobile/scrcpy

资源

视频

蓝湖设计稿(加微信给授权 ducafecat)

https://lanhuapp.com/url/wbhGq

YAPI 接口管理

http://yapi.demo.qunar.com/

代码

https://github.com/ducafecat/flutter_learn_news/releases/tag/v1.0.9

参考

https://pub.flutter-io.cn/packages/webview_flutter
https://pub.flutter-io.cn/packages/loading_animations
https://pub.flutter-io.cn/packages/share
https://github.com/Genymobile/scrcpy

VSCode 插件


© 猫哥

https://ducafecat.tech