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