{"id":593,"date":"2025-12-07T10:10:24","date_gmt":"2025-12-07T02:10:24","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=593"},"modified":"2025-12-07T10:10:24","modified_gmt":"2025-12-07T02:10:24","slug":"uniapp%e4%bd%bf%e7%94%a8webview%e8%b0%83%e7%94%a8%e8%b0%b7%e6%ad%8c%e5%9c%b0%e5%9b%be%e7%9a%84%e5%ae%8c%e6%95%b4%e8%bf%87%e7%a8%8b%e5%b0%8f%e7%a8%8b%e5%ba%8fapp%e7%ab%af","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/07\/uniapp%e4%bd%bf%e7%94%a8webview%e8%b0%83%e7%94%a8%e8%b0%b7%e6%ad%8c%e5%9c%b0%e5%9b%be%e7%9a%84%e5%ae%8c%e6%95%b4%e8%bf%87%e7%a8%8b%e5%b0%8f%e7%a8%8b%e5%ba%8fapp%e7%ab%af\/","title":{"rendered":"uniapp\u4f7f\u7528webview\u8c03\u7528\u8c37\u6b4c\u5730\u56fe\u7684\u5b8c\u6574\u8fc7\u7a0b(\u5c0f\u7a0b\u5e8f+app\u7aef)"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60 \u6700\u5b8c\u6574\u3001\u53ef\u76f4\u63a5\u8fd0\u884c\u3001\u8986\u76d6 App + \u5c0f\u7a0b\u5e8f + H5 \u7684\uff1a
\u300auni-app \u4f7f\u7528 WebView \u8c03\u7528\u8c37\u6b4c\u5730\u56fe\u7684\u5b8c\u6574\u5b9e\u73b0\u6d41\u7a0b\u300b<\/strong>
\u5305\u542b\uff1a<\/p>\n\n\n\n

\u2714 \u5c0f\u7a0b\u5e8f\u7aef\u53ef\u884c\u65b9\u6848
\u2714 App \u7aef\u53ef\u884c\u65b9\u6848
\u2714 H5 \u7aef\u53ef\u884c\u65b9\u6848
\u2714 WebView \u52a0\u8f7d Google Map
\u2714 \u5730\u56fe\u5b9a\u4f4d\u3001\u6807\u8bb0\u3001\u4e8b\u4ef6\u76d1\u542c
\u2714 \u5e38\u89c1\u62a5\u9519\u89e3\u51b3\u65b9\u6848\uff08\u56fd\u5185\u6253\u4e0d\u5f00\u3001API Key\u3001Content-Security-Policy \u7b49\uff09<\/p>\n\n\n\n

\n\n\n\n

\ud83d\ude80 \u603b\u89c8\uff1auni-app \u8c03 Google Map \u7684\u53ef\u884c\u6027<\/h1>\n\n\n\n
\u7aef<\/th>\u662f\u5426\u80fd\u7528 Google Map<\/th>\u9700\u8981\u65b9\u5f0f<\/th><\/tr><\/thead>
App\uff08Android\/iOS\uff09<\/strong><\/td>\u2714 \u5b8c\u6574\u652f\u6301<\/td>WebView + Google JS API<\/td><\/tr>
H5<\/strong><\/td>\u2714 \u5b8c\u6574\u652f\u6301<\/td>\u76f4\u63a5\u5f15\u5165 Google Maps JS<\/td><\/tr>
\u5fae\u4fe1\u5c0f\u7a0b\u5e8f<\/strong><\/td>\u274c \u4e0d\u80fd\u76f4\u63a5\u4f7f\u7528 Google<\/td>\u53ea\u80fd\u901a\u8fc7 web-view \u52a0\u8f7d H5 \u5916\u94fe<\/strong><\/td><\/tr>
\u652f\u4ed8\u5b9d\/\u6296\u97f3\u5c0f\u7a0b\u5e8f<\/strong><\/td>\u274c \u540c\u5fae\u4fe1<\/td>WebView \u5916\u94fe\u65b9\u5f0f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u7ed3\u8bba\uff1a<\/p>\n\n\n\n

\n

\u771f\u6b63\u80fd\u7528 Google \u5730\u56fe\u7684\u662f\uff1aApp + H5\u3002<\/strong>
\u5c0f\u7a0b\u5e8f\u5168\u90e8\u53ea\u80fd\u201c\u5d4c\u5916\u94fe\u9875\u9762 + WebView\u201d\u3002<\/p>\n<\/blockquote>\n\n\n\n

\n\n\n\n

\ud83c\udfaf \u4f60\u5c06\u5b9e\u73b0\u7684\u6548\u679c<\/h1>\n\n\n\n
    \n
  • uni-app \u9875\u9762 \u2192 WebView<\/li>\n\n\n\n
  • WebView \u52a0\u8f7d\u4e00\u4e2a\u627f\u8f7d Google Maps \u7684\u7f51\u9875<\/li>\n\n\n\n
  • \u5730\u56fe\u53ef\u7f29\u653e\u3001\u62d6\u62fd<\/li>\n\n\n\n
  • \u53ef\u663e\u793a\u5f53\u524d\u4f4d\u7f6e<\/li>\n\n\n\n
  • \u53ef\u6dfb\u52a0 Marker<\/li>\n\n\n\n
  • \u5c0f\u7a0b\u5e8f\u4e5f\u80fd\u663e\u793a\uff08\u901a\u8fc7 WebView \u627f\u8f7d H5\uff09<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n

    \ud83e\udde9 \u76ee\u5f55<\/h1>\n\n\n\n
      \n
    1. \u7533\u8bf7 Google Maps API Key<\/li>\n\n\n\n
    2. \u521b\u5efa\u4e00\u4e2a\u53ef\u5355\u72ec\u8bbf\u95ee\u7684 googlemap.html<\/code><\/li>\n\n\n\n
    3. uni-app \u8c03\u7528 WebView\uff08\u5c0f\u7a0b\u5e8f + App\uff09<\/li>\n\n\n\n
    4. H5 \u7aef\u7684\u5904\u7406<\/li>\n\n\n\n
    5. uni-app \u4e0e WebView \u9875\u9762\u901a\u4fe1<\/li>\n\n\n\n
    6. \u5e38\u89c1\u62a5\u9519\u53ca\u89e3\u51b3\u65b9\u6848<\/li>\n<\/ol>\n\n\n\n
      \n\n\n\n

      \u2705 \u7b2c 1 \u6b65\uff1a\u7533\u8bf7 Google Maps API Key<\/h1>\n\n\n\n

      \u6253\u5f00 Google Cloud
      \u521b\u5efa\u9879\u76ee \u2192 \u542f\u7528\uff1a<\/p>\n\n\n\n

      \u2714 Maps JavaScript API
      \u2714 Geolocation API
      \u2714 Geocoding API\uff08\u5982\u9700\u9006\u5730\u7406\uff09<\/p>\n\n\n\n

      \u7136\u540e\u83b7\u53d6 API Key\u3002<\/p>\n\n\n\n

      \n\n\n\n

      \u2705 \u7b2c 2 \u6b65\uff1a\u521b\u5efa\u4e00\u4e2a HTML \u9875\u9762\u7528\u4e8e WebView \u627f\u8f7d<\/h1>\n\n\n\n

      \u5728 uniapp<\/code> \u9879\u76ee\u6839\u76ee\u5f55\u5efa\u7acb\uff1a<\/p>\n\n\n

      \n\/static\/googlemap\/map.html\n\n<\/pre><\/div>\n\n\n
      \u5185\u5bb9\u5982\u4e0b\uff08\u53ef\u76f4\u63a5\u590d\u5236\uff0c\u7528\u6700\u65b0 API\uff09\uff1a<\/p>\n\n\n
      \n&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;meta charset="utf-8" \/>\n  &lt;meta name="viewport"\n        content="width=device-width, initial-scale=1, maximum-scale=1" \/>\n\n  &lt;style>\n    html, body, #map {\n      width: 100%; height: 100%; margin: 0; padding: 0;\n    }\n  &lt;\/style>\n\n  &lt;script src="https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY">&lt;\/script>\n&lt;\/head>\n\n&lt;body>\n  &lt;div id="map">&lt;\/div>\n\n  &lt;script>\n    let map;\n\n    function initMap() {\n      map = new google.maps.Map(document.getElementById("map"), {\n        center: { lat: 25.033964, lng: 121.564468 }, \/\/ \u53f0\u5317101\n        zoom: 14\n      });\n\n      new google.maps.Marker({\n        position: { lat: 25.033964, lng: 121.564468 },\n        map,\n        title: "Hello Google Maps!"\n      });\n    }\n\n    initMap();\n  &lt;\/script>\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
      \ud83d\udccc \u6ce8\u610f
      \u5982\u679c\u662f \u5c0f\u7a0b\u5e8f\u7aef<\/strong>\uff0c\u65e0\u6cd5\u8bbf\u95ee\u672c\u5730\u6587\u4ef6\uff0c\u9700\u90e8\u7f72\u5230 HTTPS\uff1a<\/p>\n\n\n\n
      \u4f8b\u5982\uff1a<\/p>\n\n\n
      \nhttps:\/\/yourdomain.com\/googlemap.html\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u2705 \u7b2c 3 \u6b65\uff1auni-app \u901a\u8fc7 WebView \u52a0\u8f7d Google \u5730\u56fe<\/h1>\n\n\n\n
      \ud83d\udccc App \u7aef\uff08Android\/iOS\uff09<\/h2>\n\n\n
      \n&lt;!-- pages\/map\/map.vue -->\n&lt;template>\n  &lt;view class="container">\n    &lt;web-view :src="url">&lt;\/web-view>\n  &lt;\/view>\n&lt;\/template>\n\n&lt;script>\nexport default {\n  data() {\n    return {\n      \/\/ \u672c\u5730 HTML \u65b9\u5f0f\uff08App \u53ef\u7528\uff09\n      url: '\/static\/googlemap\/map.html'\n      \/\/ \u82e5\u9700\u4f20\u53c2\uff0c\u53ef\u4f7f\u7528 ?lat=&amp;lng=\n    }\n  }\n}\n&lt;\/script>\n\n&lt;style>\n.container, web-view {\n  width: 100%; height: 100%;\n}\n&lt;\/style>\n\n<\/pre><\/div>\n\n\n
      \u2714 App \u539f\u751f WebView \u5b8c\u6574\u652f\u6301 Google Maps
      \u2714 \u4e0d\u53d7\u56fd\u5185\u7f51\u7edc\u9650\u5236\uff08Android \u53ef\u4ee5\u81ea\u5e26\u79d1\u5b66\u73af\u5883\uff09<\/p>\n\n\n\n
      \n\n\n\n
      \ud83d\udccc \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7aef\uff08\u4e0d\u80fd\u672c\u5730\u52a0\u8f7d\uff09<\/h2>\n\n\n\n
      \u5c0f\u7a0b\u5e8f WebView \u5fc5\u987b\u52a0\u8f7d HTTPS \u5916\u94fe\u9875\u9762\u3002<\/p>\n\n\n
      \n&lt;!-- pages\/map\/map.vue -->\n&lt;template>\n  &lt;view class="container">\n    &lt;web-view :src="h5Url">&lt;\/web-view>\n  &lt;\/view>\n&lt;\/template>\n\n&lt;script>\nexport default {\n  data() {\n    return {\n      h5Url: "https:\/\/your-domain.com\/googlemap.html"\n    }\n  }\n}\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
      \u5fc5\u987b\u914d\u7f6e\uff1a<\/p>\n\n\n\n
      \/miniprogramRoot\/project.config.json<\/h3>\n\n\n
      \n{\n  "webviewDomain": [\n    "your-domain.com"\n  ]\n}\n\n<\/pre><\/div>\n\n\n
      \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e25\u683c\u9650\u5236\u5916\u94fe\u57df\u540d\uff0c\u5fc5\u987b\u5907\u6848 + HTTPS\u3002<\/p>\n\n\n\n
      \n\n\n\n
      \ud83d\udccc H5 \u7aef\uff08\u6700\u7b80\u5355\uff09<\/h2>\n\n\n\n
      \u5728\u7f51\u9875\u4e2d\u76f4\u63a5\u8bbf\u95ee\uff1a<\/p>\n\n\n
      \nhttp:\/\/localhost:8080\/#\/pages\/map\/map\n\n<\/pre><\/div>\n\n\n
      \u4f1a\u81ea\u52a8\u52a0\u8f7d WebView \u2192 map.html\uff0c\u4f46 H5 \u4e0d\u9700\u8981 WebView\uff0c\u53ef\u4ee5\u76f4\u63a5\u7528 <iframe><\/code> \u65b9\u5f0f\u4f18\u5316\uff1a<\/p>\n\n\n\n
      \n\n\n\n
      \u2b50 \u7b2c 4 \u6b65\uff1aWebView \u4e0e uni-app \u901a\u4fe1<\/h1>\n\n\n\n
      \u5047\u8bbe\u4f60\u8981\u70b9\u51fb\u5730\u56fe Marker \u540e\u56de\u4f20\u5750\u6807\u5230 uni-app\u3002<\/p>\n\n\n\n
      HTML \u9875\u9762 \u4e2d\u53d1\u9001\u6d88\u606f\u7ed9 uni-app\uff1a<\/h3>\n\n\n
      \nuni.postMessage({\n  data: {\n    lat: position.lat(),\n    lng: position.lng()\n  }\n});\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      uni-app \u7aef\u63a5\u6536\uff08App + \u5c0f\u7a0b\u5e8f\uff09<\/h3>\n\n\n
      \n&lt;web-view :src="url" @message="onMessage">&lt;\/web-view>\n\n<\/pre><\/div>\n\n
      \nmethods: {\n  onMessage(e) {\n    console.log("\u6765\u81ea\u5730\u56fe\u9875\u9762\u7684\u6570\u636e\uff1a", e.detail.data);\n  }\n}\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u26d1 \u5e38\u89c1\u95ee\u9898\u4e0e\u89e3\u51b3\u65b9\u6848<\/h1>\n\n\n\n
      \u2757 1. \u5c0f\u7a0b\u5e8f\u65e0\u6cd5\u6253\u5f00 Google<\/h2>\n\n\n\n
      \u56e0\u4e3a\u56fd\u5185\u7f51\u7edc\u88ab\u5899\uff0c\u5c0f\u7a0b\u5e8f\u53ea\u80fd\u4f7f\u7528 WebView \u52a0\u8f7d\u5916\u94fe\u3002<\/p>\n\n\n\n
      \u89e3\u51b3\uff1a
      WebView \u9875\u9762\u5fc5\u987b\u90e8\u7f72\u5728\u6d77\u5916\u670d\u52a1\u5668\uff08Google \u53ef\u6b63\u5e38\u8bbf\u95ee\uff09<\/strong><\/p>\n\n\n\n
      \n\n\n\n
      \u2757 2. \u51fa\u73b0 Google Map is not defined<\/h2>\n\n\n\n
      \u539f\u56e0\uff1a<\/p>\n\n\n\n