微信小程序学习——input 和 button的最基础使用

目的:在input栏中输入文字,然后,使用button按钮获取input栏中的内容,再作处理。

在全局的data中设置一个数据块,存放input中的输入文字。 此代码在 .js 的代码中

data: {
    inputValue: ,
  },

然后在wxml中的input代码段需要如下设定:

<input id=Message bindinput=bindKeyInput placeholder="请输入浏览,最大256个字节。" type=text maxlength=256></input>

bindinput 属性,绑定一个函数的调用。

bindKeyInput:function(e){
    this.setData({inputValue : e.detail.value});
  },

附:

  1. placeholder属性,作用是在未点击input做输入前,启提示作用。
  2. maxlength属性,限定最大字节数。

接下来是button按键设定:

<button id=sendBtn type=button bindtap=SendMsg>发送</button>

button属性有好多,找了半天,其实只要使用最基本的bindtap属性,来绑定一个函数。 附加:完成后对Input内值进行清理。

SendMsg: function(){
    var strMsg = this.data.inputValue;
    console.log(strMsg)
    this.data.setData({inputValue:});
  }

附:

  1. bindgetuserinfo这个是绑定用户信息,需要设定open-type="getUserInfo"这个属性,点击后就会弹出用户授权提示框,从而获取用户信息。

button的属性有很多,还没有一个一个使用过。

经验分享 程序员 微信小程序 职场和发展