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

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

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

一、在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){}:触发事件。

                -END