利用学习到的表单组件知识,设计一个采集快递信息的表单,给出wxml和JavaScript代码使能在微信开发者工具中成功运行
时间: 2024-09-19 14:15:36 浏览: 43
设计一个微信小程序采集快递信息的表单,我们可以使用WXML (WeChat Markup Language) 和 JavaScript 来构建。这里是一个简单的例子:
**wxml部分(form.wxml):**
```html
<view class="container">
<view>
<label for="name">寄件人姓名:</label>
<input type="text" id="name" placeholder="请输入姓名" />
</view>
<view>
<label for="phone">手机号码:</label>
<input type="tel" id="phone" placeholder="请输入手机号" />
</view>
<view>
<label for="address">收件地址:</label>
<input type="textarea" id="address" placeholder="请输入地址" />
</view>
<view>
<label for="company">快递公司:</label>
<picker bindchange="onCompanyChange">
<view wx:for="{{companies}}" wx:key="*this">{{item}}</view>
</picker>
</view>
<button bindtap="submitForm">提交</button>
</view>
```
**JavaScript部分(form.js):**
```javascript
Page({
data: {
companies: ['顺丰', '圆通', '中通', '申通', '韵达'], // 示例快递公司列表
},
onCompanyChange(e) {
console.log('选择的快递公司:', e.detail.value);
},
submitForm: function() {
const formData = {
name: this.data.name,
phone: this.data.phone,
address: this.data.address,
company: this.data.companies[e.detail.value], // 获取当前选中的快递公司
};
// 这里你可以将formData发送到服务器或者做进一步处理
console.log('快递信息:', formData);
}
})
```
在这个例子中,用户可以输入姓名、手机号和地址,并通过下拉框选择快递公司。点击“提交”按钮时,会打印出填写的信息并记录在`formData`对象中。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)