微信小程序如何在js里面动态的创建vant weapp ui组件到界面上以实现在js里面布局

要在JavaScript中动态创建Vant Weapp UI组件并将其添加到界面上，您可以使用Vant Weapp提供的wx.createSelectorQuery()方法来获取页面中指定的节点信息，然后使用Vant Weapp提供的组件工厂方法来创建组件并设置相应的属性和事件处理程序，最后将组件添加到节点中即可。

以下是一个示例代码，演示如何在JavaScript中动态创建Vant Weapp的按钮组件并将其添加到页面中：

// 获取页面中指定节点的信息
const query = wx.createSelectorQuery();
query.select('#container').boundingClientRect();
query.exec((res) => {
  // 创建按钮组件
  const button = require('../../miniprogram_npm/vant-weapp/button/index');
  const buttonComponent = button({
    data: {
      text: 'Click me!',
      type: 'primary'
    },
    methods: {
      onClick() {
        console.log('Button clicked!');
      }
    }
  });
  
  // 将按钮组件添加到指定节点中
  const container = res[0];
  const buttonNode = buttonComponent.$el;
  buttonNode.style.position = 'absolute';
  buttonNode.style.left = '50%';
  buttonNode.style.top = '50%';
  buttonNode.style.transform = 'translate(-50%, -50%)';
  container.appendChild(buttonNode);
});

在这个例子中，我们首先使用wx.createSelectorQuery()方法获取了ID为“container”的节点的信息。接下来，我们使用require()方法加载Vant Weapp的按钮组件，并创建一个新的组件实例。我们设置了按钮的text属性为“Click me!”，type属性为“primary”，并定义了一个onClick()方法作为按钮的事件处理程序。

最后，我们将按钮组件添加到容器节点中，并使用CSS样式将其居中显示。

注意，由于Vant Weapp是一个小程序组件库，因此您需要在小程序的.json配置文件中声明Vant Weapp作为依赖库，以便在JavaScript中加载Vant Weapp组件。

{
  "usingComponents": {
    "van-button": "../../miniprogram_npm/vant-weapp/button/index"
  }
}

在.json配置文件中，我们将Vant Weapp的按钮组件声明为一个自定义组件，并指定其路径。这样，在JavaScript中使用require()方法加载组件时，就可以通过路径引用Vant Weapp的按钮组件了。