微信小程序的webview如何本地取值

微信小程序中的webview组件可以通过postMessage方法向webview中嵌入的页面发送消息，从而实现本地取值。

具体步骤如下：

1. 在webview页面中，通过window.addEventListener方法监听message事件，接收小程序页面发送的消息。

2. 小程序页面中，通过webview组件的postMessage方法向webview中嵌入的页面发送消息，消息内容可以是任意类型的数据。

3. 在webview页面中，接收到消息后，可以通过event.data属性获取消息内容，进而获取小程序页面中的数据。

示例代码如下：

小程序页面：

<web-view src="https://example.com" bindmessage="onMessage"></web-view>

Page({
  onMessage: function(event) {
    console.log('收到webview消息：', event)
  }
})

webview页面：

window.addEventListener('message', function(event) {
  console.log('收到小程序消息：', event.data)
  // 获取小程序页面中的数据
})
wx.miniProgram.postMessage({
  data: '这是一条消息'
})

相关问题

微信小程序 webview

微信小程序中的webview组件可以用来在小程序中展示网页内容。使用webview组件可以让小程序具有更强的扩展性和灵活性，可以在小程序中嵌入第三方网页应用或者自己的网站。

在小程序中使用webview组件，首先需要在小程序的json配置文件中声明webview组件。然后在wxml文件中使用web-view标签来引用webview组件。在引用时，需要设置src属性来指定要展示的网页地址。

需要注意的是，由于小程序的安全限制，webview组件只能引用https协议的网页地址，不能引用http协议的地址。同时，webview组件只支持在小程序内部打开网页，不能通过外部浏览器打开。

示例代码：

在小程序的json配置文件中声明webview组件：

{
  "usingComponents": {
    "web-view": "/path/to/web-view"
  }
}

在wxml文件中引用webview组件：

<web-view src="https://www.example.com"></web-view>

微信小程序webview

微信小程序中的web-view是用来承载网页的容器，每个页面只能有一个web-view，并且它会自动铺满整个页面并覆盖其他组件。个人类型的小程序目前不支持使用web-view。\[1\]

在小程序中使用web-view加载网页有几种方法。一种是在webview.wxml文件中使用src属性指定网页地址，例如：

<web-view src="http://localhost:8081/html/my-webview.html"></web-view>

另一种方法是在webview.js文件中使用setData方法设置src属性的值，例如：

var webSrc = \[
  "http://localhost:8081/html/weichat-webview.html",
  "http://localhost:8081/html/my-webview.html"
\];

onLoad: function (options) {
  this.setData({ src: webSrc\[1\] });
}

可以根据需要选择其中一种方法来加载网页。\[2\]

微信小程序对WebView支持的库有wxParse和web-view。wxParse是一个自定义组件，用于解析富文本，支持HTML和markdown解析，但已过期不再提供支持。而web-view是微信官方提供的承载网页的容器，但个人类型的小程序暂不支持使用。\[3\]

web-view具有一些基本属性，例如src属性用于指定网页链接，message事件用于接收网页向小程序发送的消息，load事件在网页加载成功时触发，error事件在网页加载失败时触发。\[3\]

以上是关于微信小程序中web-view的基本使用和相关信息。
#### 引用[.reference_title]
- *1* [微信小程序web-view使用说明，及链接打不开问题](https://blog.csdn.net/m0_60312580/article/details/130357549)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [微信小程序开发之——WebView](https://blog.csdn.net/Calvin_zhou/article/details/121338517)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]