微信小程序系列（1）关于iview weapp简单使用及 i-button 使用无效问题

首先先介绍一下iview weapp 这个微信小程序组件库吧，这个看官方文档能学到非常明白，简单易用。虽然东西少了点，但应付微信小程序开发还是可以用一用的。

首页是这个样子：

到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看：

1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：

"usingComponents": {
    "i-button": "../../dist/button/index"
}

2. 在 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:

 <view class = 'backpicture'>
     
<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，只是靠多次重复(太菜了研究了几个小时)试找到了解决方法，有知道的同学可以评论说一下哦