前言

本系列迟到的更新（时间比较少），虽然看的人越来越少哈哈哈，这篇文章要讲的东西，如我简介中所说的是和表单相关的组件，比如<button>，<from>,<checkbox>,<input>等等，表单至关重要，因为我们要用它来进行登陆，和其他一些和用户交互的操作。所以不多说进主题

<button>组件

顾名思义，<button>会在页面上显示一个按钮，可以说<button>组件是任何小程序都要使用的一个组件，因为我们有很多的交互和逻辑都是通过<button>去完成，比如说获得用户的userinfo信息，转发等等，都只有<button>标签可以完成。它有很多的属性，这些属性各司其职，使得按钮能够根据不同的需求完成不同的操作。关于属性文档有很详细的讲解。这篇文章就不赘述属性的介绍了，下面会选取一些属性给出操作的具体代码实现，如获取用户的头像和昵称。。。等等

获取用户的昵称信息

  <!-- 
  	open-type属性：它的用途是使用微信的开放能力，它有一些有效值，当值为 getUserInfo时就是可以获取用户的信息
    
    bindgetuserinfo属性：它后面跟一个函数名，说白了你要通过这个属性来调用获得用户信息的函数。
    
    如果要成功获得用户信息，那么如上两个属性要配合使用
    -->
    
  <button class='but' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
    微信登录
  </button>

js代码

bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      //用户按了允许授权按钮
      var that = this;
      // 获取到用户的信息了，打印到控制台上看下
      console.log("用户的信息如下：");
      console.log(e.detail.userInfo);
      nickName = e.detail.userInfo.nickName
      avatarUrl = e.detail.userInfo.avatarUrl
      //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function (res) {
          // 用户没有授权成功，不需要改变 isHide 的值
          if (res.confirm) {
            console.log('用户点击了“返回授权”');
          }
        }
      });
    }
  }

我这里没有做是否已经授权的判断，在新建一个项目的时候快速生成的模板中有更加完善的代码，有需要的同学可以借鉴学习。

<input>组件

<input>是输入框，常常用于表单验证的账号，密码信息的收集，但是看似平常的一个组件，其实它也是一个原生组件（在获得焦点的时候才是原生组件），所以在使用的时候注意一下这点就行！它是我用过的最好用的input，因为它给了我们很多以前不好实现的的操作，比如改变光标的位置，和限制可输入长度……等等。的确啊，它的使用很简单很方便，没什么好讲的，要讲可能也只是说如何设计出更加好看的输入框的样式。传送门

<checkbox>组件

在小程序中实现多选也是很简单的事情，使用的是<checkbox-group>，它叫多项选择器，它有一个属性bindchange，这个属性会触发一个事件，后面可以跟上一个函数。它是通过在其中嵌套<checkbox>组件来完成多选的，<checkbox>的属性中value推荐要有值，没有也是可以的。因为不是很难就附上一段文档的例子代码结束

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</checkbox-group>

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  checkboxChange(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})

结语

第八篇了，也算是讲了一些东西，还有一些讲完就结束了（勿喷😂），flag是憋一篇好的文章，冲一冲精选。给年轻人多一点动力，哈哈哈哈哈