设计一个采集快递信息的表单微信小程序

设计一个采集快递信息的微信小程序表单，我们可以按照以下步骤进行：

1. **页面结构**:
- 创建一个主页面（如：`pages/index/index.wxss` 和 `pages/index/index.js`），通常命名为 `index`。
- 使用 WXML 来构建表单布局，如上面提供的例子，包括姓名、电话、寄件地址和收件地址输入框，以及一个提交按钮。

2. **WXML 示例** (`pages/index/index.wxml`):

   <!-- pages/index/index.wxml -->
   <view class="page">
     <view class="form-container">
       <view class="form-item">
         <label>姓名：</label>
         <input type="text" placeholder="请输入姓名" wx:if="{{showName}}" @input="onNameInput" />
       </view>
       <!-- 添加更多输入项... -->
     </view>
     <button bindtap="submitForm">提交</button>
   </view>

3. **JS 示例** (`pages/index/index.js`):

   // pages/index/index.js
   Page({
     data: {
       showName: true,
       phoneNumber: "",
       shippingAddress: "",
       recipientAddress: ""
     },
     onNameInput: function(e) {
       console.log("姓名变化:", e.detail.value);
       // 可在此处添加实时验证规则，如必填等
     },
     // ...其他输入项的处理方法类似
     submitForm: function() {
       if (!this.data.phoneNumber || !this.data.shippingAddress || !this.data.recipientAddress) {
         wx.showToast({
           title: "请填写完整信息",
           icon: "none"
         });
         return;
       }
       console.log("收集到的信息:", {
         name: this.data.name,
         phone: this.data.phoneNumber,
         shippingAddress: this.data.shippingAddress,
         recipientAddress: this.data.recipientAddress
       });
       // 提交至后台或其他操作
     }
   })

4. **CSS 样式** (`pages/index/index.wxss`):

   .form-item {
     margin-bottom: 20rpx;
   }
   /* 添加样式以美化界面 */

5. **页面逻辑**:
- 使用条件渲染 (`wx:if`) 控制是否显示姓名输入框。
- 检查每个输入字段是否为空，在提交表单前进行验证。