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

kotoriyou

于 2019-06-09 10:41:06 发布

阅读量5.7k

点赞数 2

分类专栏：微信小程序踩坑心得文章标签：微信小程序 iview weapp 踩坑 button 表单提交

本文链接：https://blog.youkuaiyun.com/kotoriyou/article/details/91350978

版权

本文介绍了在微信小程序中使用iView Weapp组件库遇到的i-button点击无效问题，详细解析了问题原因及解决办法，通过修改组件代码并采用原生button实现表单提交。同时建议避免使用form表单提交，推荐单向绑定获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先介绍一下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:

 <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