微信小程序之输入框文本的获取与展示

上一篇说到了小程序的带参跳转问题，没有看过，现在去看看

此篇还是通过比较单间的示例来展示输入文本的获取，在当前界面的展示。

一、在wxml页面中进行简单布局

<view>
  <label>用户名：</label>
  <input class="input" name="user" placeholder="输入姓名" bindinput="username" />
</view>>
<view>
  <label>密码：</label>
  <input class="input" name="psw" placeholder="请输入密码！" password="true" bindinput="password" />
</view>
<view style="margin-top:30px;">
  <button style="width:30%;"  bindtap="subbutton">登录</button>
</view>

<view>用户名：{{userName}}</view>
<view>密码：{{psw}}</view>

 说明：
1、password，true是隐藏密码，false是不隐藏密码。
2、margin-top，对象上面空出多少，30px。
3、最后，”“调用的是函数，{{}}引用的是值。

二、在JS页面中获取文本

1、定义:全局使用

  /**
   * 页面的初始数据
   */
  data: {
    username: '',
    userpws: ""
  },

2、获取第一个文本用户名，username接收

  username: function (e) {
    this.setData({
      username: e.detail.value
    })
  },

3、获取第二个文本密码，userpws接收

 password: function (e) {
    this.setData({
      userpws: e.detail.value
    })
  },

4、绑定登录按钮点击事件，获取两个文本展示更新到当前页面

subbutton: function (e) {
    console.log("姓名" + this.data.username + "密码：" + this.data.userpws)
    this.setData({
      userName: this.data.username,
      psw: this.data.userpws
    })
  }

js文件说明：
1、代码都要写在page({})中。
2、data：{}给个初始化的值。
3、this.Data({})这也是个固定的，定义函数更新data的数据。
4、数据结构是json格式的。
subbutton: function (e){}：触发事件。

input的更多属性

button的更很多属性
 

                                                            -END