微信小程序系列（1）关于iview weapp简单使用及 i-button 使用无效问题
首先先介绍一下iview weapp 这个微信小程序组件库吧，这个看官方文档能学到非常明白，简单易用。虽然东西少了点，但应付微信小程序开发还是可以用一用的。
首页是这个样子：
到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看：
- 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：
"usingComponents": {
"i-button": "../../dist/button/index"
}
- 在 wxml 中使用组件：
<i-button type="primary" bind:click="handleClick">这是一个按钮i-button>
废话不多说，上我自己实际项目中的代码：
json:
{
"usingComponents":
{
"i-input": "../../dist/input/index" ,
"i-button": "../../dist/button/index",
"i-card": "../../dist/card/index",
"i-toast": "../../dist/toast/index"
}
}
wxml:
<text> \n text>
<form bindsubmit="formSubmit" bindreset="formReset">
<i-input name="userName" type="textarea" title="报修人" autofocus placeholder="姓名" />
<i-input name="userNum" type="textarea" title="学号" placeholder="请输入" />
<i-input name="userPhone" type="textarea" title="联系电话" placeholder="请输入手机号" />
<i-input name="areaLocation" type="texarea" title="损坏地点" placeholder="如：丹青楼 120"/>
<i-input name="areaContext" type="textarea" title="报修内容" placeholder="如：中间第三排桌子断裂，有安全隐患" />
<text> \n text>
<i-card title="小贴士">
<view slot="content">
<text class="tip">在这里可以报修学校的相关设施问题，请一定要详细填写损坏地点和损坏程度哦，这样问题才能得到最快的解决！text>view>
i-card>
<text> \n text>
<text> \n text>
<text> \n text>
<text> \n text>
<i-button form-type="submit" type="ghost" >提交i-button>
form>
view>
<i-toast id="toast" />
这个代码乍一看没有什么问题，但是实际上点击button并不会提交！！！
可能是iview weapp的一个小bug，解决方法：
把这里
<i-button form-type="submit" type="ghost" >提交i-button>
修改为
<button form-type="submit" type="ghost" >提交button>
用原生的button可以成功实现提交
觉得原生不好看的可以加点css样式
button {
width: 80%;
margin-top: 20rpx;
background-color:#ffcc66;
color: white;
border-radius: 98rpx;
}
贴心的我把js代码也放上来吧>_<
var app = getApp();
const { $Toast } = require('../../dist/base/index');
Page({
formSubmit(e) {
var that = this;
console.log(e.detail.value)
if(e.detail.value.userName==null||e.detail.value.userNum==null||e.detail.value.userPhone==null||e.detail.value.areaLocation==null||e.detail.value.areaContext==null||e.detail.value.userName==''||e.detail.value.userNum==''||e.detail.value.userPhone=='' ||e.detail.value.areaLocation=='' ||e.detail.value.areaContext=='')
{
$Toast({
content: '所有填写内容都不能为空哦！',
type: 'warning'
});
}else{
$Toast({
content: '提交成功！',
type: 'success'
});
wx.request({
url: app.globalData.url+'addUser',
data:{
'userName': e.detail.value.userName,
'userNum': e.detail.value.userNum,
'userPhone': e.detail.value.userPhone,
'areaLocation': e.detail.value.areaLocation,
'areaContext': e.detail.value.areaContext,
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success:function(res) {
console.log('submit success');
},
fail:function(res){
console.log('submit fail');
}
})
}
},
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
这样就很好看了，最后效果：
说实话现在我也没弄清楚为什么会有这种bug，只是靠多次重复(太菜了研究了几个小时)试找到了解决方法，有知道的同学可以评论说一下哦
破案了破案了！
以下是官方文档 ↓
没啥好说的，尽量别用form表单提交了，直接单向绑定取值不香吗？