小程序微信小程序设计登录页面

Page({data: {phone: '',password: '',success: false,text: ''},// 获取输入账号 phoneInput: function (e) {this.setData({phone: e.detail.value})},// 获取输入密码 passwordInput: function (e) {this.setData({password: e.detail.value})},// 登录 login: function () {var that = this;   var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空if (that.data.phone.length == 0) {wx.showToast({title: '用户名不能为空',icon: 'loading',duration: 1000})} else if (that.data.password.length == 0) {wx.showToast({title: '密码不能为空',icon: 'loading',duration: 1000})}else {wx.request({url: 'http://192.168.41.40:8002/login',method: "POST",data: {cardNo: that.data.phone,password: that.data.password},header: {'content-type': 'application/x-www-form-urlencoded'},success: function (res) {if (res.data.state == 1) {  //判断是否能正常登录warn = "卡号密码不匹配";wx.showModal({title: '提示',content: warn})return;} else {that.setData({success: true,text: res.data.url})}}})}},// 注册 register: function () {wx.navigateTo({url: '/pages/register/register',})}})

<!--pages/login.wxml-->
<view class="container"> <view class="login-icon"> <image class="login-img" src="/images/loginLog.jpg"></image> </view> <view class="login-from"> <!--账号--><view class="inputView"> <image class="nameImage" src="/images/name.png"></image> <label class="loginLab">账号</label> <input class="inputText" placeholder="请输入账号" bindinput="phoneInput" /> </view> <view class="line"></view> <!--密码--><view class="inputView"> <image class="keyImage" src="/images/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 class="registerBtnView"> <button class="registerBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="register">注册</button> </view> </view> </view><view class = 'success' wx:if="{{success}}"><web-view src="{{text}}"></web-view>
</view>

/* pages/login.wxss */
page{ height: 100%;
} .container { height: 100%; display: flex; flex-direction: column; padding: 0; box-sizing: border-box; background-color: #f2f2f2
} /*登录图片*/
.login-icon{ flex: none;
}
.login-img{ width: 750rpx;
} /*表单内容*/
.login-from { margin-top: 20px; flex: auto; height:100%;
} .inputView { background-color: #fff; line-height: 44px;
}
/*输入框*/
.nameImage, .keyImage { margin-left: 22px; width: 14px; height: 14px
} .loginLab { margin: 15px 15px 15px 10px; color: #545454; font-size: 14px
}
.inputText { flex: block; float: right; text-align: left; margin-right: 22px; margin-top: 11px; color: #cccccc; font-size: 14px
} .line { width: 100%; height: 1px; background-color: #cccccc; margin-top: 1px;
}
/*按钮*/
.loginBtnView { width: 100%; height: auto; background-color: #f2f2f2; margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px;
} .loginBtn { width: 100%; margin-top: 35px;
}.registerBtn { width: 100%; margin-top: 5px;
}

最后完成的效果图

小程序微信小程序设计登录页面相关推荐

微信小程序---微信信息授权登录以及手机号授权登录
微信小程序-微信信息授权登录以及手机号授权登录 (小白为了以后方便查看)点击微信信息授权登录后再次点击按钮进行手机号授权登录图片演示 wxml(login.wxml)代码 <view cl ...
微信小程序—微信小程序端支付代码
只有微信小程序端的代码,如下 Page({data: {},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数var that = this ...
小程序 | 微信小程序实现商品分类列表
小程序 | 微信小程序实现商品分类列表一.效果展示二.代码实现  <view class="container"> <! ...
小程序 | 微信小程序中使用位置API打开地图
小程序 | 微信小程序中使用位置API打开地图一.效果展示二.代码实现使用微信内置地图查看位置,调用wx.openLocationAPI,具体内容可以查看微信官方文档. // js let In ...
小程序 | 微信小程序实现循环嵌套数据选择
小程序 | 微信小程序实现循环嵌套数据选择一.效果展示二.代码实现在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常 ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
微信小程序----微信小程序浏览pdf文件
微信小程序----微信小程序浏览pdf文件说明:通过wx.downloadFile,wx.openDocumen来实现打开pdf文件.只需在js操作即可. HTTP.Config.Request(' ...
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序生鲜小程序开发功能介绍: 1.产品展示:通过扫码或者搜索小程序,用户可以看到不同品种的新鲜蔬菜.水果以及肉类. 2.定时收货:买家可以预 ...
python开发微信小程序-微信小程序开发：python+sanic 实现小程序登录注册
开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + sanic + 微信小程序实现用户快速注册登录全栈方案. 微信小程 ...
【愚公系列】2022年09月微信小程序-微信小程序实现网页一键登录功能
文章目录前言一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法二.相关第三方包源码前言如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...

小程序微信小程序设计登录页面

小程序微信小程序设计登录页面相关推荐

最新文章

热门文章