极乐门资源网 Design By www.ioogu.com

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

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

效果如下:

wxml布局如下:

<view >
   <input type="text" placeholder-style="color:#fff;" bindinput="userNameInp" placeholder="请输入账号" />
</view>
<view >
   <input password placeholder-style="color:#fff;" bindinput="usePasswordInp" placeholder="请输入密码"/>
</view>
 <button class="loginBtn" bindtap='loginFn'>登录</button>

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,内容

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

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

暂无微信小程序登录时如何获取input框中的内容的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。