微信小程序 获取dom元素 进行操作

微信小程序中可以使用wx.createSelectorQuery()方法来选择DOM元素并进行操作。

例如，获取一个id为“myDiv”的div元素并设置其背景色为红色：

wx.createSelectorQuery().select('#myDiv').boundingClientRect(function(rect){
  console.log(rect.width)
}).exec()

//设置背景色
wx.createSelectorQuery().select('#myDiv').boundingClientRect(function(rect){
  wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
    var scrollTop = res.scrollTop
    var top = rect.top
    wx.pageScrollTo({
      scrollTop: scrollTop + top,
      duration: 300
    })
  }).exec()
}).exec()

需要注意的是，微信小程序中的DOM操作并不支持所有的CSS样式，需要根据官方文档进行查看和了解。

相关问题

微信小程序获取元素dom

微信小程序中获取元素 DOM 的方法是通过使用选择器或组件的唯一标识来获取。下面是两种常见的获取 DOM 元素的方法：

1. 使用选择器：可以使用 wx.createSelectorQuery() 方法创建一个选择器查询实例，然后使用 select() 方法选择对应的元素，再使用相关的 API 进行操作。例如：

const query = wx.createSelectorQuery();
query.select('.my-element').boundingClientRect(function(rect) {
  console.log(rect);  // 获取到元素的位置信息
}).exec();

这里使用了类选择器 `.my-element` 来选择元素，并使用 boundingClientRect() 方法获取元素的位置信息。

2. 使用组件的唯一标识：通过组件的唯一标识（id 或自定义属性）可以直接获取对应的组件实例，然后通过组件实例的方法来操作对应的 DOM 元素。例如：

const component = this.selectComponent('#my-component');
component.setData({
  'dataKey': 'value'  // 修改组件中的数据
});

这里使用了组件的唯一标识 `#my-component` 来获取组件实例，并使用 setData() 方法修改组件中的数据。

请注意，以上方法中的选择器查询和组件实例获取都是异步操作，需要通过回调函数或 Promise 来处理结果。具体的使用方法可以根据你的实际需求进行调整。

微信小程序保存dom为图片

微信小程序的Canvas组件可以绘制图片、文字和形状，并支持将绘制结果保存为图片。因此，可以使用Canvas组件将需要保存的DOM元素绘制到画布上，然后将画布保存为图片。下面是实现的具体步骤：

1. 在wxml文件中，添加一个Canvas组件，设置宽高和id：

<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>

2. 在js文件中，获取需要保存的DOM元素，将其绘制到Canvas上：

// 获取需要保存的DOM元素
const query = wx.createSelectorQuery()
query.select('#my-dom').boundingClientRect()
query.exec(res => {
  // 将DOM元素绘制到Canvas上
  const canvasCtx = wx.createCanvasContext('myCanvas')
  const width = res[0].width
  const height = res[0].height
  canvasCtx.drawImage('#my-dom', 0, 0, width, height)
  canvasCtx.draw(false, () => {
    // 保存Canvas为图片
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success(res) {
        console.log(res.tempFilePath)
      }
    })
  })
})

其中，`wx.createSelectorQuery()`用于获取DOM元素的尺寸，`wx.createCanvasContext()`用于创建Canvas上下文，`canvasCtx.drawImage()`用于将DOM元素绘制到Canvas上，`canvasCtx.draw()`用于将Canvas上的绘制结果显示出来，`wx.canvasToTempFilePath()`用于将Canvas保存为图片。

3. 在wxml文件中，将需要保存的DOM元素添加id：

<view id="my-dom">这是要保存的DOM元素</view>

通过以上步骤，即可将需要保存的DOM元素绘制到Canvas上，并将Canvas保存为图片。需要注意的是，Canvas的绘制和保存都是异步操作，因此需要使用回调函数来处理结果。同时，由于涉及到Canvas的操作，因此需要在小程序的app.json文件中声明Canvas组件的权限：

"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息将用于小程序定位"
  },
  "scope.record": {
    "desc": "你的录音功能将用于小程序录音"
  },
  "scope.writePhotosAlbum": {
    "desc": "你的相册将用于小程序保存图片"
  },
  "scope.camera": {
    "desc": "你的相机将用于小程序拍照"
  },
  "scope.userInfo": {
    "desc": "你的用户信息将用于小程序登录"
  },
  "scope.invoiceTitle": {
    "desc": "你的发票抬头将用于小程序申请发票"
  },
  "scope.invoice": {
    "desc": "你的发票信息将用于小程序申请发票"
  },
  "scope.werun": {
    "desc": "你的微信运动数据将用于小程序计步"
  },
  "scope.writePhotosAlbum": {
    "desc": "你的相册将用于小程序保存图片"
  },
  "scope.camera": {
    "desc": "你的相机将用于小程序拍照"
  },
  "scope.record": {
    "desc": "你的录音功能将用于小程序录音"
  },
  "scope.userLocationBackground": {
    "desc": "你的位置信息将在后台持续更新"
  },
  "scope.album": {
    "desc": "你的相册将用于小程序保存图片"
  },
  "scope.address": {
    "desc": "你的收货地址将用于小程序购物"
  },
  "scope.invoice": {
    "desc": "你的发票信息将用于小程序申请发票"
  },
  "scope.camera": {
    "desc": "你的相机将用于小程序拍照"
  },
  "scope.userInfo": {
    "desc": "你的用户信息将用于小程序登录"
  },
  "scope.userLocation": {
    "desc": "你的位置信息将用于小程序定位"
  },
  "scope.record": {
    "desc": "你的录音功能将用于小程序录音"
  },
  "scope.writePhotosAlbum": {
    "desc": "你的相册将用于小程序保存图片"
  },
  "scope.camera": {
    "desc": "你的相机将用于小程序拍照"
  },
  "scope.userLocationBackground": {
    "desc": "你的位置信息将在后台持续更新"
  }
}