百度小程序与微信小程序相似度90%。微信小程序转换为百度小程序，部分还是需要人工修改！
做了一个form留言表单，点击提交之后，input框第一次会清空，但是第二次就不会清空了！
不多说直接上代码！
.swan文件
<view class="page">
<form bindreset="formReset">
<view class="weui-cells__title">基本信息</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">姓名：</view>
</view>
<view class="weui-cell__bd">
<input name="name" class="weui-input" placeholder="请输入你的姓名" type="text" bindinput="getName" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">电话：</view>
</view>
<view class="weui-cell__bd">
<input name="contact" maxlength="11" class="weui-input" placeholder="请输入联系电话" type="number" bindinput="getNumber" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">邮箱：</view>
</view>
<view class="weui-cell__bd">
<input name="email" class="weui-input" placeholder="请输入电子邮箱" type="text" bindinput="getEmail" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">地址：</view>
</view>
<view class="weui-cell__bd">
<input name="addr" class="weui-input" placeholder="请输入地址信息" type="text" bindinput="getAddress" />
</view>
</view>
</view>
<view class="weui-cells__title">留言内容</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">
<textarea name="message" class="weui-textarea" placeholder="请输入留言内容" style="min-height: 3.3em" bindinput="getMessage" />
</view>
</view>
</view>
<view class="weui-btn-area">
<button class="weui-btn" type="primary" disabled="{{falg}}" style="background:#3CA700" form-type="reset">提交</button>
</view>
</view>
</form>
<!-- 底部版权 S-->
<copyright></copyright>
<!-- 底部版权 E-->
</view>
.js文件
const app = getApp();
Page({
data: {
formDataList: { userName: "", mobileNumber: "", Email: "", Address: "", Message: "" },
falg: true,
},
onLoad: function () {
// 监听页面加载的生命周期函数
},
onReady: function () {
// 监听页面初次渲染完成的生命周期函数
},
onShow: function () {
// 监听页面显示的生命周期函数
app.setInfo();
},
onHide: function () {
// 监听页面隐藏的生命周期函数
},
onUnload: function () {
// 监听页面卸载的生命周期函数
},
onPullDownRefresh: function () {
// 监听用户下拉动作
},
onReachBottom: function () {
// 页面上拉触底事件的处理函数
},
onShareAppMessage: function () {
// 用户点击右上角转发
},
getName: function (e) {
// console.log(e);
this.setData({
'formDataList.userName': e.detail.value,
});
this.falg(); },
getNumber: function (e) {
// console.log(e);
this.setData({
'formDataList.mobileNumber': e.detail.value, })
this.falg();
},
getEmail: function (e) {
// console.log(e);
this.setData({
'formDataList.Email': e.detail.value,
})
},
getAddress: function (e) {
// console.log(e);
this.setData({
'formDataList.Address': e.detail.value,
})
},
getMessage: function (e) {
// console.log(e);
this.setData({
'formDataList.Message': e.detail.value,
})
},
formReset: function (e) {
var that = this;
// console.log(this.data.formDataList)
// console.log('哦豁，form表单被reset了');
swan.request({
url: app.globalData.baseUrl + 'Index/Message',
method: 'get',
data: {
name: that.data.formDataList.userName,
contact: that.data.formDataList.mobileNumber,
email: that.data.formDataList.Email,
message: that.data.formDataList.Message,
addr: that.data.formDataList.Address
},
header: {
genToken: app.globalData.genToken
},
success: function (res) {
if (res.data.status = 1) {//留言成功
swan.showToast({
title: '留言成功',
icon: 'success',
duration: 1000,
});
}
},
fail: function (err) {
swan.showToast({
title: '失败咯！',
duration: 1000,
});
},
complete: function (res) {
that.setData({
falg: true
});
}
});
},
falg: function () {
var name = this.data.formDataList.userName;
var number = this.data.formDataList.mobileNumber;
if (name && number) {
this.setData({
falg: false
})
} else {
this.setData({
falg: true
})
}
} });
利用input输入框监听事件，获取到输入的内容，存储起来，同时button按钮，这里是reset，清空表单内容的同时，存储起来数据并且发送数据到后台！
falg 为按钮开关状态控制器，防止恶意点击提交空数据！