Flutter 新闻客户端 - 09 详情页展示、分享、远程真机调试

B站视频

https://www.bilibili.com/video/BV18e411s7A1
https://www.bilibili.com/video/BV1RZ4y1W7CN

本节目标

详情页技术方案比较
载入 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

dependencies:webview_flutter: ^0.3.20+2

ios/Runner/Info.plist

    <key>io.flutter.embedded_views_preview</key><true/>

构建界面代码

  // 顶部导航Widget _buildAppBar() {return Container();}// 页标题Widget _buildPageTitle() {return Container();}// 页头部Widget _buildPageHeader() {return Container();}// web内容Widget _buildWebView() {return Container();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: _buildAppBar(),body: SingleChildScrollView(child: Column(children: <Widget>[_buildPageTitle(),Divider(height: 1),_buildPageHeader(),_buildWebView(),],),),);}

url 载入

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

计算高度

PX DP
- https://blog.akanelee.me/2018/07/31/dpi-px-pt-dp-sp/
设备像素密度

一个逻辑像素占用多少个实际像素
- https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio
- https://api.flutter.dev/flutter/dart-ui/Window/devicePixelRatio.html
注册 js

  double _webViewHeight = 200;javascriptChannels: <JavascriptChannel>[_invokeJavascriptChannel(context),].toSet(),

// 注册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;});}});}

回调

        onPageFinished: (String url) {_getWebViewHeight();setState(() {_isPageFinished = true;});},

  // 获取页面高度_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 {}''');}

清除广告、推荐

https://cn.engadget.com/cn-2020-01-21-google-pixelbook-go-not-pink-available.html
删除广告

        onPageStarted: (String url) {Timer(Duration(seconds: 1), () {setState(() {_isPageFinished = true;});_removeAd();_getViewHeight();});},

  _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

<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 拦截

        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 状态显示

bool _isPageFinished = false;@overrideWidget 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(),),],));}

安装插件

dependencies:share: ^0.6.4

代码

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

真机调试

scrcpy

https://github.com/Genymobile/scrcpy

资源

视频

b 站
油管镜像

蓝湖设计稿（加微信给授权 ducafecat）

https://lanhuapp.com/url/lYuz1
密码: gSKl

蓝湖现在收费了，所以查看标记还请自己上传 xd 设计稿
商业设计稿文件不好直接分享, 可以加微信联系 ducafecat

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 插件

Flutter、Dart
Flutter Widget Snippets
Awesome Flutter Snippets
Paste JSON as Code
bloc
Code Spell Checker