评论

与表单相关的各种组件的使用

这篇讲和表单相关的组件

前言

本系列迟到的更新(时间比较少),虽然看的人越来越少哈哈哈,这篇文章要讲的东西,如我简介中所说的是和表单相关的组件,比如<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是憋一篇好的文章,冲一冲精选。给年轻人多一点动力,哈哈哈哈哈

最后一次编辑于  2019-08-04  
点赞 3
收藏
评论

1 个评论

  • Yalong
    Yalong
    2019-04-06

    你好,请教一下,如何使用官方提供的组件库呢?WebUI_Sketch组件库和WebUI_PS组件库https://developers.weixin.qq.com/miniprogram/design/#资源下载 下载下来只看到了.psd文件,不知如何用,多谢帮忙!

    2019-04-06
    赞同
    回复 1
    • Qiang
      Qiang
      2019-04-07

      官方的UI组件库你可以使用weui,你说的这两个我想是UI设计资源需要在对应的设计软件中打开

      2019-04-07
      回复
登录 后发表内容