`

小程序之获取用户输入信息

 
阅读更多
需要注意的问题:
变量在赋值后如果需要访问,需要用this.data.变量名才可以访问到

页面代码:
<!--miniprogram/pages/login/login.wxml-->
<view class='title'>
  <text>会员后台管理系统</text>
</view>

<view>
<form bindsubmit="formSubmit" bindreset="formReset">
  <view class='main'>
    <lable class='lable'>账号:</lable>
    <input class='input' type='text' bindinput="getUserID" placeholder='请输入用户名'/>
  </view>
  <view class='main2'>  
    <lable class='lable'>密码:</lable>
    <input class='input' type='text' bindinput="getPwd" password placeholder="请输入密码"/>
  </view>

  <view class='bottom'>
    <button type='primary' form-type='submit'>登陆</button>
    <button type='default' form-type='reset'>重置</button>
  </view>
</form>
</view>


js
// miniprogram/pages/login/login.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userID:'',
    pwd:''
  },
  
  //获取登陆用户名
  getUserID(e){
      this.setData({
        userID:e.detail.value
    })
  },
 
  //获取登陆密码
  getPwd(e) {
    this.setData({
      pwd:e.detail.value
    })
  },
  
  //提交事件
  formSubmit(e) {
    console.log('账号:'+ this.data.userID)
    console.log('密码:' + this.data.pwd)
  },


  //重置事件
  formReset() {
    console.log('form发生了reset事件')
  },


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

  }
})
分享到:
评论

相关推荐

    微信小程序弹出对话框,可设置获取用户信息type

    本文将深入探讨如何使用微信小程序的API来创建弹出对话框,并结合`type`属性实现用户信息和电话号码的获取。 一、微信小程序的对话框组件 微信小程序提供了`wx.showModal`接口,用于弹出一个基础的对话框,可以...

    小程序输入手机号并点击获取验证码

    综上所述,这段代码示例较为完整地展示了如何在微信小程序中实现用户输入手机号后获取验证码的功能,包括页面布局设计、数据绑定与交互逻辑处理等方面。开发者可以根据实际需求进一步完善和优化。

    微信小程序打卡定位签到系统源代码,利用微信小程序的地图组件获取到用户的地理位置信息,再通过腾讯地图 SDK 获取到对应位置信息

    签到流程一般包括以下步骤:用户打开小程序,调用地图组件获取位置,通过腾讯地图SDK反编译得到详细地址,将这些信息发送到服务器,服务器端验证位置合法性(例如是否在预设的签到范围内),如果合法则记录签到信息...

    序列号输入小程序

    "序列号输入小程序"是一种专为简化序列号输入设计的软件工具,主要针对那些需要频繁输入各种产品序列号的用户,如IT技术人员、系统管理员或软件激活操作员。这款小程序旨在提高工作效率,减少手动输入可能导致的错误...

    微信小程序车牌号输入功能页demo完整源码下载.zip

    2. **输入框组件**:微信小程序提供了`input`组件用于接收用户输入。在车牌号输入场景下,`input`组件可以设置特定的占位符、类型(如文本或数字)、最大长度等属性,以适应车牌号的格式要求。 3. **数据绑定**:在...

    微信小程序例子——使用form表单获取输入框数据

    在这个例子中,我们将深入探讨如何在微信小程序中使用`form`表单来获取用户输入的数据。 一、`&lt;form&gt;`组件介绍 在微信小程序中,`&lt;form&gt;`组件用于创建一个表单容器,它允许用户输入数据并通过提交操作将数据传递到...

    微信小程序getPhoneNumber获取用户手机号

    为了简化这一过程,微信小程序提供了一个名为`getPhoneNumber`的API,允许开发者直接获取用户在微信中绑定的手机号,无需用户手动输入。以下是关于`getPhoneNumber`的详细说明。 1. **使用场景**: 微信小程序中的...

    微信小程序-获得用户输入内容

    在微信小程序开发中,获取用户输入内容是常见的需求,这对于构建交互式的用户界面至关重要。本文将详细介绍在微信小程序中如何有效地获取用户通过输入组件提供的数据。 首先,与传统的Web开发不同,微信小程序不...

    微信小程序项目实例——体质计算器

    总的来说,这个体质计算器项目展示了微信小程序在健康类应用中的实际应用,它利用小程序的特性,为用户提供了一种快速获取健康信息的途径。通过学习和理解这个项目,开发者可以进一步提升在微信小程序开发上的技能,...

    停车收费功能小程序

    在"输入牌照、查询费用"这一功能中,小程序需要与后台服务器进行交互,获取车辆的停车记录和费用信息。这涉及到前端数据的展示和后端API接口的调用。前端需要设计一个输入车牌号的表单,用户输入车牌后,通过Ajax...

    通过H5链接在微信端或者外部浏览器输入链接打开微信小程序

    标题中的“通过H5链接在微信端或者外部浏览器输入链接打开微信小程序”指的是利用HTML5(H5)页面中的特定技术实现从网页直接跳转到微信小程序的功能。这一功能允许用户在浏览H5页面时,点击特定链接或按钮,无缝地...

    毕业设计 微信小程序设计 小程序模板【截图+源码】 卡卡汽车 获取用户 设备信息

    7. **安全性考虑**:在获取用户信息时,需要遵循微信的隐私政策,确保数据的安全传输和存储,同时对用户输入进行校验,防止XSS攻击。 8. **测试与发布**:使用微信开发者工具进行真机调试、模拟器测试,确保在不同...

    小程序-调用API获取行政区划.zip

    在小程序中,通常会使用腾讯地图SDK或高德地图SDK提供的接口来获取用户当前的地理位置。例如,通过调用`wx.getLocation`方法可以获取到用户的经纬度信息,包括经度longitude和纬度latitude。这个过程涉及到用户授权...

    汽车微信小程序 获取用户 设备信息.rar

    在开发汽车相关的微信小程序时,获取用户设备信息是一项重要的功能,这可以帮助我们更好地了解用户使用的设备情况,从而提供个性化服务或优化应用体验。本压缩包“汽车微信小程序 获取用户 设备信息.rar”可能包含...

    微信小程序之音乐小程序

    - **API调用**:小程序提供了丰富的API,如网络请求、数据存储、用户信息获取等,用于实现各种功能。 2. 音乐播放功能: - **音频组件**:利用`&lt;audio&gt;`组件实现音乐播放。需要理解如何设置音频源(src)、控制...

    小程序获取验证码倒计时

    在微信小程序开发中,用户注册或登录过程中...总之,小程序获取验证码倒计时是提高用户安全性并优化注册、登录体验的关键步骤。理解其背后的工作原理和实现方式,对于微信小程序的开发人员来说,是提升技能的重要一环。

    微信小程序自动完成文本框autocompletetext

    这种功能常见于搜索框,当用户输入文字时,系统会根据已有的数据集提供匹配的建议,方便用户快速找到目标信息。 一、`input`组件介绍 在微信小程序中,`input`组件用于创建各种输入框,如文本、密码、数字等。在...

    一个适用于微信小程序的输入组件可以发送文字语音图片

    在微信小程序的开发中,构建一个能够发送文字、语音和图片的输入组件是提升用户体验的关键要素之一。这个组件通常用于聊天、评论或者反馈等场景,让用户可以自由选择适合的表达方式。下面我们将深入探讨如何利用...

    微信小程序——登录页面

    在微信小程序中,可以通过调用微信接口发送短信验证码,如`wx.request()`来向服务器发送请求,获取和验证验证码。 ### 注册功能 注册新账号通常涉及到收集用户的基本信息,如手机号或邮箱、密码等。在微信小程序中...

Global site tag (gtag.js) - Google Analytics