微信小程序 WebView 访问网站并读取元素值示例

"微信小程序 WebView 访问网站并读取元素值示例"\n\n本文详细介绍了使用微信小程序 WebView 组件访问网站并读取特定元素值的方法。包括如何在 wxml 文件中添加 WebView 组件，监听消息事件，通过 evaluateJavaScript 方法执行 JavaScript 代码读取元素值，以及在网站 HTML 中添加元素 id。\n\n1. 在 wxml 文件中添加 WebView 组件：\n\nhtml\n<!-- index.wxml -->\n\n<web-view src=\"https://example.com\" bindmessage=\"onMessage\"></web-view>\n\n\n2. 在 js 文件中监听 WebView 组件的消息事件，并通过 WebView 组件的 evaluateJavaScript 方法执行 JavaScript 代码来读取元素的值：\n\njavascript\n// index.js\n\nPage({\n onMessage(e) {\n // 监听 WebView 组件的消息事件\n const webViewContext = wx.createWebViewContext('webview');\n\n if (e.detail.data.type === 'load') {\n // 页面加载完成后执行 JavaScript 代码\n webViewContext.evaluateJavaScript(`document.getElementById('myElement').innerText`, (res) => {\n console.log(res.result); // 输出元素的值\n });\n } \n }\n})\n\n\n3. 在网站的 HTML 代码中，给要读取的元素添加一个 id：\n\nhtml\n<!-- example.com -->\n\n<div id=\"myElement\">Hello, World!</div>\n\n\n以上代码中，我们通过监听 WebView 组件的消息事件，当网页加载完成后执行 JavaScript 代码来读取元素的值。在 JavaScript 代码中，我们使用 document.getElementById('myElement').innerText 来获取 id 为 "myElement" 的元素的文本内容，并通过 console.log 输出到小程序的控制台中。