微信小程序实现登录页面

wxml文件：

<view class="container"> <view class="login-icon"> <image class="login-img" src="../../img/loginLog.jpg"></image> </view> <view class="login-from"> <!--账号--><view class="inputView"> <image class="nameImage" src="../../img/name.png"></image> <label class="loginLab">账号</label> <input class="inputText" placeholder="请输入账号" bindinput="usernameInput" /> </view> <view class="line"></view> <!--密码--><view class="inputView"> <image class="keyImage" src="../../img/key.png"></image> <label class="loginLab">密码</label> <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> </view> <!--按钮--><view class="loginBtnView"> <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button> </view> </view>
</view>

wxss文件：

page{ height: 100%;
} .container { height: 100%; display: flex; flex-direction: column; padding: 0; box-sizing: border-box; /* background-color: rgb(156, 23, 78) */
} /*登录图片*/
.login-icon{ flex: none;
} .login-img{ width: 750rpx;
} /*表单内容*/
.login-from { margin-top: 20px; flex: auto; height:100%;
} .inputView { /* background-color: #fff;  */line-height: 45px; border-radius:20px;border:1px solid #999999;
} /*输入框*/
.nameImage, .keyImage { margin-left: 22px; width: 18px; height: 16px
} .loginLab { margin: 15px 15px 15px 10px; color: #545454; font-size: 14px
} .inputText { flex: block; float: right; text-align: right; margin-right: 22px; margin-top: 11px;color: #cccccc; font-size: 14px
}
.line { margin-top: 8px;
} /* .line { width: 100%; height: 1px; background-color: #cccccc; margin-top: 1px;
}  *//*按钮*/
.loginBtnView { width: 100%; height: auto; /* background-color:#DCDCDC;  */margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px;
} .loginBtn { width: 90%; margin-top: 40px; border-radius:10px;
}

js文件：

//index.js
//获取应用实例
const app = getApp()Page({data: {username: '',password: ''},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onShow: function () {// 生命周期函数--监听页面显示wx.hideTabBar({})},onLoad: function () {},// 获取输入账号 usernameInput: function (e) {this.setData({username: e.detail.value})},// 获取输入密码 passwordInput: function (e) {this.setData({password: e.detail.value})},// 登录处理login: function () {var that = this;if (this.data.username.length == 0 || this.data.password.length == 0) {wx.showToast({title: '账号或密码不能为空',icon: 'none',duration: 2000})} else {wx.request({url: app.globalData.globalReqUrl +'/login/login', // 仅为示例，并非真实的接口地址method: 'post',data: {username: that.data.username,password: that.data.password},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},success(res) {if (res.data.code == "OK") {var unitName = res.data.data.User.unitName;var unitId = res.data.data.User.unitId;wx.setStorageSync('unitId', unitId);wx.setStorageSync('unitName', unitName);wx.switchTab({url: '../overviewData/realTimeData'})} else {wx.showToast({title: res.data.message,icon: 'none',duration: 2000})}}})}}
})

效果图：

这里界面里用到的两个图标

---------------长按二维码关注程序媛小姐姐公众号有更多彩蛋哦---------------

微信小程序实现登录页面相关推荐

微信小程序授权登录页面（有提示窗）
微信小程序授权登录(有弹窗提示) 1 效果显示 1.1 授权登录页面 1.2 授权登录提示弹窗 1.3 拒绝授权登录 1.4 允许登录后,跳转到小程序首页 2 代码 2.1 wxml 文件 <v ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
webform窗体怎么实现session唯一标识_微信小程序用户登录和登录态维护的实现_javascript技巧...
这篇文章主要介绍了微信小程序用户登录和登录态维护的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧让用户登录,标识用户和获取 ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...
微信小程序用户登录信息过期处理
微信小程序用户登录信息过期处理由于小程序对获取用户信息的新规定,获取用户信息必须通过一个button调出获取窗口,然而用户的token会过期,而本地存在的缓存可能会让用户误以为自己仍处于登录状态,但 ...
微信小程序授权登录取消授权重新授权处理方法附可用代码
微信小程序授权登录基本是小程序的标配了,但是官方的demo,取消授权后,就不能再重新点击登录,除非重新加载小程序才可以,这下怎么办? 我们可以先在首页引导用户点击,然后跳转到一个新的页面,在新的页面进 ...
微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式一.背景众所周知,我们写完小程序,发到线上,是需要经历设置版本.提交代码审核.等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过, ...

微信小程序实现登录页面

微信小程序实现登录页面相关推荐

最新文章

热门文章