微信小程序登录时如何获取input框中的内容-成都快上网建站

微信小程序登录时如何获取input框中的内容

这篇文章主要介绍了微信小程序登录时如何获取input框中的内容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站制作,高端网页制作,对活动板房等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业网站推广优化,H5建站,响应式网站。

最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助。下面是登录页,点击登录时获取input框中的值,

效果如下:

wxml布局如下:


   


   

 

js代码如下:

const app = getApp();
Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  userName: "",
  passWord: "",
 },
 //监听输入的账号
 userNameInp: function (e) {
  this.data.userName = e.detail.value;
 },
 //监听输入的密码
 usePasswordInp: function (e) {
  this.data.passWord = e.detail.value;
 },
 //登录
 loginFn: function () {
  var that = this;
  if (that.data.userName.length == 0 || that.data.passWord.length == 0) {
   wx.showToast({
    title: '账号或密码为空',
    icon: 'loading',
    duration: 2000
 
   })
  } else {
   wx.showLoading({
    title: '登录中...',
   })
   wx.request({
    url: 'https://localhost:8180/exam/login',
    data: {
     username: that.data.userName,
     password: that.data.passWord
    },
    header: {
     'content-type': 'application/x-www-form-urlencoded' // 默认值
    },
    method: 'post',
    success: function (res) {
     wx.hideLoading();
     wx.removeStorageSync('sessionid');
     // console.log('登录成功', res.data.data);
     if (res.data.code == "0000") {
      wx.showToast({
       title: '登录成功',
       icon: 'success',
       duration: 1000
      })
      wx.setStorageSync('sessionid', res.header['Set-Cookie']); //保存Cookie到Storage
      wx.setStorage({
       key: 'myData',
       data: res.data.data
      })
      wx.redirectTo({
       url: '/pages/index/index',
      })
     } else {
      wx.showToast({
       title: '登录失败',
       icon: 'none',
       duration: 2000
      })
     }
    },
    fail: function (e) {
     wx.showToast({
      title: '服务器出现错误',
      icon: 'none',
      duration: 2000
     })
    }
 
   })
  }
  },
  //跳转到忘记密码页面
 onTapDayWeather() {
  wx.navigateTo({
   url: '/pages/updatepwd/updatepwd',
  })
 },
  /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


当前名称:微信小程序登录时如何获取input框中的内容
文章网址:http://kswjz.com/article/iehghs.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流