微信小程序为什么不支持dom

抖音小程序 2024-01-09 16:47:31 52

微信小程序为什么不支持DOM操作呢？这是因为微信小程序的UI层和service层运行在不同webview下面，他们通过postMessage通讯，即便你能操作dom也没任何意义。在最新版的微信开发者工具中，虽然可以操作window以及下面的document对象，但他们是独立的运行环境，能操作也没用的。

那么，在微信小程序中，如何实现类似DOM的操作呢？我们可以采用变量绑定的方式来实现。以下是一种常见的例子：

一、实现view的显示和影藏：在js中的data设置变量bottomHidden1："block"；然后在wxml中的view中设置 ；在其它我们需要的地方使用bindtap等绑定事件，js中定义该事件的function，使用this.setData修改bottomHidden1变量为none或者block，实现对上文中的bottom1进行显示/影藏控制。

二、实现input中的placeholder在获取焦点时清空，失去焦点时显示：

  • 1. 在js中，data中设置变量priceHodler："请输入价格"；
  • 2. 我们可以设置两个function控制变量priceHodler的值（此处添加了一种的方法实现输入框中删除图标的显示和消失，所以在data中设置了变量clearImg）：
  • displayImg：function() var imgDisplay="block"; var holderDisplay=""; this.setData({ clearImg: imgDisplay, priceHodler: holderDisplay });
  • hiddenImg：function() var imgHidden="none"; var holderHidden="请输入价格"; this.setData({ clearImg: imgHidden, priceHodler: holderHidden });

3. 在wxml中添加这个input：

这里我们还实现了输入框内容删除图标的显示和消失功能：

doClearText：function() {

微信小程序为什么不支持dom

this.setData({

usdValue：null，

});

在上述示例中，我们通过变量绑定实现了微信小程序中的类似DOM的操作。这种操作方式不同于网页中的JavaScript概念，但它能满足小程序的开发需求。

The End

标签：