{"id":1801,"date":"2023-06-14T17:25:55","date_gmt":"2023-06-14T09:25:55","guid":{"rendered":"https:\/\/www.edabao.net\/dabao\/?p=1801"},"modified":"2023-06-14T17:25:55","modified_gmt":"2023-06-14T09:25:55","slug":"flutter-h5-%e6%b7%b7%e5%90%88%e5%bc%80%e5%8f%91%e7%9a%84%e5%a5%bd%e5%a4%84%e4%bb%8b%e7%bb%8d","status":"publish","type":"post","link":"https:\/\/www.edabao.net\/dabao\/kaifaapp\/1801\/","title":{"rendered":"flutter h5 \u6df7\u5408\u5f00\u53d1\u7684\u597d\u5904\u4ecb\u7ecd"},"content":{"rendered":"<p>Flutter\u662f\u4e00\u79cd\u6d41\u884c\u7684\u8de8\u5e73\u53f0\u79fb\u52a8\u5e94\u7528\u5f00\u53d1\u6846\u67b6\uff0c\u5b83\u53ef\u4ee5\u8ba9\u5f00\u53d1\u4eba\u5458\u4f7f\u7528\u5355\u4e00\u7684\u4ee3\u7801\u5e93\u521b\u5efaiOS\u548cAndroid\u5e94\u7528\u3002\u4f46\u662f\uff0c\u6709\u65f6\u5019\u6211\u4eec\u9700\u8981\u5728Flutter\u5e94\u7528\u7a0b\u5e8f\u4e2d\u96c6\u6210Web\u89c6\u56fe\uff0c\u4ee5\u4fbf\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u663e\u793aWeb\u5185\u5bb9\u3002\u8fd9\u5c31\u9700\u8981\u4f7f\u7528Flutter H5\u6df7\u5408\u5f00\u53d1\u3002<\/p>\n<p>Flutter H5\u6df7\u5408\u5f00\u53d1\u662f\u6307\u5728Flutter\u5e94\u7528\u7a0b\u5e8f\u4e2d\u5d4c\u5165Web\u89c6\u56fe\uff0c\u5e76\u5141\u8bb8Flutter\u548cWeb\u4e4b\u95f4\u76f8\u4e92\u901a\u4fe1\u3002\u5728Flutter\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528Webview Flutter\u63d2\u4ef6\u5b9e\u73b0H5\u6df7\u5408\u5f00\u53d1\u3002<\/p>\n<p>Webview Flutter\u662fFlutter\u4e2d\u7684\u4e00\u4e2a\u63d2\u4ef6\uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u79cd\u5728Flutter\u4e2d\u5d4c\u5165Web\u89c6\u56fe\u7684\u65b9\u5f0f\u3002\u5b83\u53ef\u4ee5\u8ba9Flutter\u5e94\u7528\u7a0b\u5e8f\u5728\u5e94\u7528\u5185\u90e8\u663e\u793aWeb\u5185\u5bb9\uff0c\u5e76\u5141\u8bb8Flutter\u548cWeb\u4e4b\u95f4\u76f8\u4e92\u901a\u4fe1\u3002<\/p>\n<p>Webview Flutter\u63d2\u4ef6\u4f7f\u7528\u7684\u662fFlutter\u7684Platform View\u6280\u672f\u3002\u5b83\u5728Flutter\u4e2d\u521b\u5efa\u4e86\u4e00\u4e2aiOS\u6216Android\u539f\u751f\u7684Web\u89c6\u56fe\uff0c\u5e76\u5c06\u5176\u5d4c\u5165\u5230Flutter\u5e94\u7528\u7a0b\u5e8f\u4e2d\u3002\u8fd9\u79cd\u65b9\u5f0f\u53ef\u4ee5\u8ba9Web\u89c6\u56fe\u5728Flutter\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4ee5\u539f\u751f\u7684\u65b9\u5f0f\u5448\u73b0\uff0c\u800c\u4e0d\u662f\u50cf\u5176\u4ed6\u89e3\u51b3\u65b9\u6848\u90a3\u6837\u4f7f\u7528WebView\u6216IFrame\u6807\u7b7e\u3002<\/p>\n<p>\u5728Flutter\u4e2d\u4f7f\u7528Webview Flutter\u63d2\u4ef6\u975e\u5e38\u7b80\u5355\u3002\u9996\u5148\u9700\u8981\u5728pubspec.yaml\u6587\u4ef6\u4e2d\u6dfb\u52a0Webview Flutter\u63d2\u4ef6\u7684\u4f9d\u8d56\uff1a<\/p>\n<p>&#8220;`<\/p>\n<p>dependencies:<\/p>\n<p>  webview_flutter: ^2.0.12<\/p>\n<p>&#8220;`<\/p>\n<p>\u7136\u540e\u5728Flutter\u5e94\u7528\u7a0b\u5e8f\u4e2d\u521b\u5efa\u4e00\u4e2aWebview Flutter Widget\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<p>&#8220;`<\/p>\n<p>import &#8216;package:flutter\/material.dart&#8217;;<\/p>\n<p>import &#8216;package:webview_flutter\/webview_flutter.dart&#8217;;<\/p>\n<p>class MyWebView extends StatelessWidget {<\/p>\n<p>  final String url;<\/p>\n<p>  MyWebView({required this.url});<\/p>\n<p>  @override<\/p>\n<p>  Widget build(BuildContext context) {<\/p>\n<p>    return Scaffold(<\/p>\n<p>      appBar: AppBar(<\/p>\n<p>        title: Text(&#8216;Webview&#8217;),<\/p>\n<p>      ),<\/p>\n<p>      body: WebView(<\/p>\n<p>        initialUrl: url,<\/p>\n<p>        javascriptMode: JavascriptMode.unrestricted,<\/p>\n<p>      ),<\/p>\n<p>    );<\/p>\n<p>  }<\/p>\n<p>}<\/p>\n<p>&#8220;`<\/p>\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2aMyWebView Widget\uff0c\u5b83\u63a5\u53d7\u4e00\u4e2aURL\u53c2\u6570\uff0c\u5e76\u5728Flutter\u5e94\u7528\u7a0b\u5e8f\u4e2d\u663e\u793aWeb\u89c6\u56fe\u3002WebView Widget\u9700\u8981\u4e00\u4e2ainitialUrl\u53c2\u6570\uff0c\u5b83\u6307\u5b9a\u4e86\u8981\u663e\u793a\u7684Web\u9875\u9762\u7684URL\u3002\u53e6\u5916\uff0c\u6211\u4eec\u8fd8\u8bbe\u7f6e\u4e86javascriptMode\u53c2\u6570\u4e3aJavascriptMode.unrestricted\uff0c\u8fd9\u5141\u8bb8Web\u9875\u9762\u6267\u884cJavaScript\u4ee3\u7801\u3002<\/p>\n<p>\u9664\u4e86\u5d4c\u5165Web\u89c6\u56fe\u4e4b\u5916\uff0cFlutter\u5e94\u7528\u7a0b\u5e8f\u8fd8\u53ef\u4ee5\u4e0eWeb\u89c6\u56fe\u8fdb\u884c\u901a\u4fe1\u3002Webview Flutter\u63d2\u4ef6\u63d0\u4f9b\u4e86\u4e00\u79cd\u5728Flutter\u548cWeb\u4e4b\u95f4\u76f8\u4e92\u53d1\u9001\u6d88\u606f\u7684\u65b9\u5f0f\u3002\u5728Flutter\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528WebViewController\u6765\u53d1\u9001\u6d88\u606f\u5230Web\u89c6\u56fe\u4e2d\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<p>&#8220;`<\/p>\n<p>import &#8216;package:flutter\/material.dart&#8217;;<\/p>\n<p>import &#8216;package:webview_flutter\/webview_flutter.dart&#8217;;<\/p>\n<p>class MyWebView extends StatefulWidget {<\/p>\n<p>  final String url;<\/p>\n<p>  MyWebView({required this.url});<\/p>\n<p>  @override<\/p>\n<p>  _MyWebViewState createState() =&gt; _MyWebViewState();<\/p>\n<p>}<\/p>\n<p>class _MyWebViewState extends State {<\/p>\n<p><p>  late WebViewController _controller;<\/p>\n<p>  final _urlController = TextEditingController();<\/p>\n<p>  @override<\/p>\n<p>  Widget build(BuildContext context) {<\/p>\n<p>    return Scaffold(<\/p>\n<p>      appBar: AppBar(<\/p>\n<p>        title: Text(&#8216;Webview&#8217;),<\/p>\n<p>        actions: [<\/p>\n<p><p>          IconButton(<\/p>\n<p>            icon: Icon(Icons.refresh),<\/p>\n<p>            onPressed: () {<\/p>\n<p>              _controller.reload();<\/p>\n<p>            },<\/p>\n<p>          ),<\/p>\n<p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i.cdn.yimenapp.com\/2023-03\/16\/14\/31828969222.jpg\" \/><\/figure>\n<\/p>\n<p>       IconButton(<\/p>\n<p>            icon: Icon(Icons.arrow_back),<\/p>\n<p>            onPressed: () {<\/p>\n<p>              _controller.goBack();<\/p>\n<p>            },<\/p>\n<p>          ),<\/p>\n<p>          IconButton(<\/p>\n<p>            icon: Icon(Icons.arrow_forward),<\/p>\n<p>            onPressed: () {<\/p>\n<p>              _controller.goForward();<\/p>\n<p>            },<\/p>\n<p>          ),<\/p>\n<p>        ],<\/p>\n<p>      ),<\/p>\n<p>      body: Column(<\/p>\n<p>        children: [<\/p>\n<p>          Expanded(<\/p>\n<p>            child: WebView(<\/p>\n<p>              initialUrl: widget.url,<\/p>\n<p>              javascriptMode: JavascriptMode.unrestricted,<\/p>\n<p>              onWebViewCreated: (WebViewController webViewController<a href=\"https:\/\/www.yimenapp.cn\/fengzhuang-1678.html\">\u5728\u7ebf\u751f\u6210app\u514d\u8d39<\/a>) {<\/p>\n<p>                _controller = webViewController;<\/p>\n<p>              },<\/p>\n<p>              onPageFinished: (String url) {<\/p>\n<p>                _urlController.text = url;<\/p>\n<p>              },<\/p>\n<p>            ),<\/p>\n<p>          ),<\/p>\n<p>          TextField(<\/p>\n<p>            controller: _urlController,<\/p>\n<p>            readOnly: true,<\/p>\n<p>            decoration: InputDecoration(<\/p>\n<p>              border: InputBorder.none,<\/p>\n<p>            ),<\/p>\n<p>          ),<\/p>\n<p>        ],<\/p>\n<p>      ),<\/p>\n<p>      floatingActionButton: FloatingActionButton(<\/p>\n<p>        child:<a href=\"https:\/\/www.yimenapp.cn\/fengzhuang-3462.html\">\u5b89\u5353app\u5e94\u7528\u5f00\u53d1<\/a> Icon(Icons.send),<\/p>\n<p>        onPressed: () {<\/p>\n<p>          _controller.evaluateJavascript(&#8220;window.postMessage(&#8216;Hello from Flutter&#8217;);&#8221;);<\/p>\n<p>        },<\/p>\n<p>      ),<\/p>\n<p>    );<\/p>\n<p>  }<\/p>\n<p>}<\/p>\n<p>&#8220;`<\/p>\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u6dfb\u52a0\u4e86\u4e00\u4e2aTextField Widget\uff0c\u5b83\u7528\u4e8e\u663e\u793a\u5f53\u524dWeb\u9875\u9762\u7684URL\u3002\u6211\u4eec\u8fd8\u6dfb\u52a0\u4e86\u4e00\u4e9b\u6309\u94ae\uff0c\u7528\u4e8e\u91cd\u65b0\u52a0\u8f7d\u9875\u9762\u3001\u8fd4\u56de\u548c\u524d\u8fdb\u3002\u5728FloatingActionButton\u4e0a\u6dfb\u52a0\u4e86\u4e00\u4e2a\u53d1\u9001\u6d88\u606f\u7684\u6309\u94ae\uff0c\u5f53\u7528\u6237\u70b9\u51fb\u8fd9\u4e2a\u6309\u94ae\u65f6\uff0c\u6211\u4eec\u4f7f\u7528WebViewController\u7684evaluateJavascript\u65b9\u6cd5\u5411Web\u89c6\u56fe\u53d1\u9001\u6d88\u606f\u3002<\/p>\n<p>\u5728Web\u89c6\u56fe\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528JavaScript\u7684window.addEventListener\u65b9\u6cd5\u6765\u76d1\u542cFlutter\u53d1\u9001\u7684\u6d88\u606f\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<p>&#8220;`<\/p>\n<p>window.addEventListener(&#8220;message&#8221;, function(event) {<\/p>\n<p>  if (event.data === &#8220;Hello from Flutter&#8221;) {<\/p>\n<p>    alert(&#8220;Received message from Flutter!&#8221;);<\/p>\n<p>  }<\/p>\n<p>});<\/p>\n<p>&#8220;`<\/p>\n<p>\u8fd9\u4e2aJavaScript\u4ee3\u7801\u76d1\u542c\u4e86window\u5bf9\u8c61\u4e0a\u7684message\u4e8b\u4ef6\uff0c\u5f53Flutter\u53d1\u9001\u6d88\u606f\u65f6\uff0c\u5b83\u4f1a\u5f39\u51fa\u4e00\u4e2a\u5bf9\u8bdd\u6846\u663e\u793a\u201cReceived message from Flutter!\u201d\u3002<\/p>\n<p>\u603b\u7684\u6765\u8bf4\uff0cFlutter H5\u6df7\u5408\u5f00\u53d1\u662f\u4e00\u79cd\u975e\u5e38\u6709\u7528\u7684\u6280\u672f\uff0c\u5b83\u53ef\u4ee5\u8ba9\u5f00\u53d1\u4eba\u5458\u5728Flutter\u5e94\u7528\u7a0b\u5e8f\u4e2d\u5d4c\u5165Web\u89c6\u56fe\uff0c\u5e76\u5141\u8bb8Flutter\u548cWeb\u4e4b\u95f4\u76f8\u4e92\u901a\u4fe1\u3002\u4f7f\u7528Webview Flutter\u63d2\u4ef6\u53ef\u4ee5\u8f7b\u677e\u5730\u5b9e\u73b0H5\u6df7\u5408\u5f00\u53d1\uff0c\u800c\u4e14\u975e\u5e38\u5bb9\u6613\u4e0a\u624b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flutter\u662f\u4e00\u79cd\u6d41\u884c\u7684\u8de8\u5e73\u53f0\u79fb\u52a8\u5e94\u7528\u5f00\u53d1\u6846\u67b6\uff0c\u5b83\u53ef\u4ee5\u8ba9\u5f00\u53d1\u4eba\u5458\u4f7f\u7528\u5355\u4e00\u7684\u4ee3\u7801\u5e93\u521b\u5efaiOS\u548cAndroid\u5e94\u7528\u3002\u4f46\u662f\uff0c\u6709\u65f6\u5019\u6211\u4eec\u9700\u8981\u5728Flutter\u5e94\u7528\u7a0b\u5e8f\u4e2d\u96c6\u6210Web\u89c6\u56fe\uff0c\u4ee5\u4fbf\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u663e\u793aW<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[3891,22,145,3890,298],"topic":[],"class_list":{"0":"post-1801","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-kaifaapp","7":"tag-app","8":"tag-22","9":"tag-145","11":"tag-298"},"_links":{"self":[{"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/posts\/1801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/comments?post=1801"}],"version-history":[{"count":0,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/posts\/1801\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/media?parent=1801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/categories?post=1801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/tags?post=1801"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/topic?post=1801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}