利用学习到的表单组件知识，设计一个采集快递信息的表单微信小程序，信息包括姓名，电话，寄件地址和收件地址，给出wxml和js代码，要求提交后能在console中看见信息

好的，首先我们需要在微信小程序中创建一个包含姓名、电话、寄件地址和收件地址四个字段的表单，并在用户点击提交按钮时显示收集到的信息。下面是一个简单的示例：

**wxml (页面文件)**:

<!-- pages/index/index.wxml -->
<view class="container">
  <view class="form-container">
    <view class="form-item">
      <label for="name">姓名:</label>
      <input type="text" id="name" placeholder="请输入姓名" bindinput="handleNameInput"/>
    </view>
    <view class="form-item">
      <label for="phone">电话:</label>
      <input type="tel" id="phone" placeholder="请输入电话" bindinput="handlePhoneInput"/>
    </view>
    <view class="form-item">
      <label for="shipping">寄件地址:</label>
      <input type="text" id="shipping" placeholder="请输入寄件地址" bindinput="handleShippingInput"/>
    </view>
    <view class="form-item">
      <label for="recipient">收件地址:</label>
      <input type="text" id="recipient" placeholder="请输入收件地址" bindinput="handleRecipientInput"/>
    </view>
    <button open-type="submit" onclick="handleSubmit">提交</button>
  </view>
</view>

**js (业务逻辑文件)**:

// pages/index/index.js
Page({
  data: {
    name: '',
    phone: '',
    shipping: '',
    recipient: ''
  },
  
  handleNameInput: function(e) {
    this.setData({
      name: e.detail.value
    });
  },
  
  handlePhoneInput: function(e) {
    this.setData({
      phone: e.detail.value.replace(/[^\d]/g, '')
    });
  }, // 确保只接受数字

  handleShippingInput: function(e) {},
  handleRecipientInput: function(e) {},

  handleSubmit: function() {
    let info = {
      name: this.data.name,
      phone: this.data.phone,
      shipping: this.data.shipping,
      recipient: this.data.recipient
    };
    console.log('提交信息:', info);
    // 这里可以进一步处理数据并将其发送到后台
  }
})

这个例子中，我们在每次用户输入完某个字段后，通过`bindinput`事件更新相应的数据，并在`handleSubmit`函数中将所有信息打印到控制台。注意，为了防止非数字字符进入电话号码字段，我们在`handlePhoneInput`中做了简单的清理处理。