[微信小程序]使用input组件实现简单的输入框功能—————（2020.2.16学习笔记）

在之前的文章中，我们谈过用导入的方式实现搜索框（诺，这是这篇https://blog.csdn.net/qq_37704442/article/details/103500904)，那篇文章实现搜索框的原理，就是使用了input组件，当然，今天要实现的输入框，虽然比搜索框要简单，但同样也是用input组件实现的，所以，介于input组件如此重要，我们有必要在开始之前认识一下input组件
input组件是微信小程序自带组件，不需要额外导入，就可以直接在wxml中使用，所以这里着重介绍input的常用属性，如果想看input组件的完整介绍可以查看微信官方文档（官方文档链接在此:https://developers.weixin.qq.com/miniprogram/dev/component/input.html),说回来，input的常用属性有五种，分别为type，bindinput，placeholder，confirm-type，bindconfirm，接下来分别介绍一下这五种属性。
一，type，决定input输入的类型。
二，bindinput，挂载触发事件，当键盘在input输入时触发
三，placeholder，input输入框为空时的占位符
四，confirm-type，设置键盘右下角按钮的文字，仅在type='text’时生效
五，bindconfirm，可挂载点击事件，当点击完成按钮时触发
以上就是input常用属性的介绍，接下来开始利用input组件和上面介绍的属性，实现一个简单的输入框。
首先在wxml上新建一个input，然后为了方便控制组件布局，所以用view包裹这个input，接着，新建一个button，这个button的主要作用就是用来提交input输入框内的值，然后稍微在wxss中设置一下组件样式，嗯，这样输入框的大概样子已经出来（代码如下）
wxml中的代码

<view class="Undreaming_Body">
<view class="container" >
    <view class="search-body">
        <input type="text" bindinput="Undreaming_ChangeSearchKey" placeholder="你梦到了什么" confirm-type="search" bindconfirm="Undreaming_Inquire" />     
    </view>
</view>
<button bindtap="Undreaming_Inquire">点击查询</button>

</view>

wxss中的代码

  
.search-body {
  position: absolute;
  width: 600rpx;
  height: 76rpx;
  margin: 0 auto;
  line-height: 76rpx;
  top: 30%;
  left: 50%;
  margin-left: -300rpx;
  color: #888;
  border: 1rpx solid #888;
  border-radius: 40rpx;
  /*border: 1px solid red;*/
}

.search-body input {
  display: inline-block;
  width: 500rpx;
  height: 76rpx;
  padding-left: 34rpx;
}

.search-body input::-webkit-input-placeholder {
  color: #b2b2b2;
}

.search-body-icon {
  position: absolute;
  top: 50%;
  right: 20rpx;
  height: 76rpx;
  margin-top: -30rpx;
  line-height: 76rpx;
}

.search-body-icon image {
  width: 38rpx;
  height: 38rpx;
}
.Undreaming_Body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.Undreaming_Body button{
  width: 600rpx;
  height: 76rpx;
  border-radius: 70rpx;
  background-color: #FF556A;
  color: white;

}

输入框的效果图如下

然后，就是获取input输入的值，并完善好button的点击事件，关于如何获取input的值，这点可以通过 detail获取，确切点说， e.detail.value就是input输入框内的值，接下来，为了方便调用，我们可以在页面声明一个变量，来装载input输入框内的值，最后，把这个值放入button的点击事件内进行提交或者处理，这样的话，一个基础的输入框就完成了（代码如下，PS：关于这里代码，我个人还添加了一些功能，比如检查输入框内的值是否为空之类的）

js中的代码

// pages/Page_Undreaming/Page_Undreaming.js
const app=getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    TitleBar_Height_Component:app.globalData.TitleBar_Height,
    searchKey:'',
   
    Undreaming_Results:'',
  },
  Undreaming_Inquire()
  {
    if(this.Undreaming_CheckData())
    {
      console.log(this.data.searchKey);
      this.Undreaming_GetData();
      wx.showLoading({
        title: '正在查询中',
        mask: true
    })
      setTimeout(() => {
        wx.hideLoading({
          complete: (res) => {
            this.Undreaming_Results_ShowModal();
          },
        })
       
         
      }, 1000);
  
     
   
     

    }
    else{
      console.log("输入框为空");
    }
   

  },
  Undreaming_CheckData() {
    const key = this.data.searchKey
    if (key == '') {
        wx.showModal({
            content: '输入框不能为空',
            contentColor:'#FF556A',
            showCancel: false,
            confirmText: '确定',
            confirmColor: '#FF556A'
        })
        return false;
    }
    return true;
   
},
  Undreaming_ChangeSearchKey(e) {
    const val = e.detail.value

    this.setData({
        searchKey: val
    })
},
  Undreaming_GetData()
  {
     wx:wx.request({
       url: 'http://v.juhe.cn/dream/query',
       data:{
          key:'4705f6c7303d8753788b53243715455d',
          q:this.data.searchKey
       },
       header: {},
       method: 'GET',
       dataType: 'json',
       responseType: 'text',
       success:(res)=>{
         console.log(res);

         this.setData(
           {
            Undreaming_Results:res.data.result[0].des
           }
         )
         console.log(this.data.Undreaming_Results);
       },
     })
  },
  Undreaming_Results_ShowModal()
  {
    wx.showModal({
      content: this.data.Undreaming_Results,
      contentColor:'#dbdbdb',
      showCancel: false,
      confirmText: '确定',
      confirmColor: '#FF556A',
    
    })
  
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

最后实现的效果如下图