微信小程序登陆界面(效果图+源代码)
微信小程序登陆界面
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>
</view>
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: right;
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: 80%;
margin-top: 35px;
}
login.js:
Page({
data: {
phone: '',
password:''
},
// 获取输入账号
phoneInput :function (e) {
this.setData({
phone:e.detail.value
})
},
// 获取输入密码
passwordInput :function (e) {
this.setData({
password:e.detail.value
}) },
// 登录
login: function () {
if(this.data.phone.length == 0 || this.data.password.length ==
0){
wx.showToast({
title: '用户名和密码不能为空',
icon: 'loading',
duration: 2000
})
}else {
// 这里修改成跳转的页面
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
})
}
}
})
这个只是登陆页面,其余页面可以点我主页下载
key.png
loginLog.jpg
name.png
微信小程序登陆界面(效果图+源代码)相关推荐
- 视频教程-微信小程序商城-界面设计实战教学(含源代码)-微信开发
微信小程序商城-界面设计实战教学(含源代码) 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥90.00 ...
- php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码
这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下 微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将 ...
- 微信小程序开发登录界面mysql_微信小程序 欢迎界面开发的实例详解
微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局 ...
- 微信小程序初始界面设置密码
如何在微信小程序初始界面输入密码,看到网上给出了很多方法,较为常见的是如何输入一个六位密码.这里介绍一种觉得比较可行的方法,具体实现如下: 最终效果: 代码实现: wxml: <input cl ...
- 微信小程序登陆凭证校验出现{errcode:40029,errmsg:invalid code, hints: [ req_id: weh8ka0297hc58 ]}
问题描述: 微信小程序登陆校验时需要使用临时登录凭证code ,appID和appsecret获取 session_key 和 openid 等.但是后台向微信服务器请求时一直报{"errc ...
- 微信小程序——登陆凭证校验报错{errcode:40029,errmsg:invalid code, hints: [ req_id: weh8ka0297hc58 ]}
微信小程序登陆校验时需要使用临时登录凭证code ,appID和appsecret来向微信服务接口来获取 session_key 和 openid .但是后台向微信服务器请求时得到的一直是{" ...
- 微信小程序之界面交互API07
微信小程序之界面交互API07 关于界面交互,在官方文档上提供了API来 wx.showToast(Object object) 土司(只有提示,会在延迟时间过后消失)! 显示消息提示框 参数 Obj ...
- 微信小程序开发界面介绍
这里是引用 主要是简单的介绍一下微信小程序开发界面的各个文件 先看下这个图片 这是最简单的目录了 pages: 所有的页面都要在这里面创建,在这里面创建的页面需要在app.json里面添加一下路径如下 ...
- 2、微信小程序开发界面
2.微信小程序开发界面 针对于上节需要补充的点 在新建微信小程序时,要注意区分微信公众号IP和微信小程序IP.我们在开发小程序的时候是要用微信小程序IP不然编译不了哈哈哈. 左边是模拟器的视图,右边是 ...
- PHP —— 用 ThinkPHP5.0 实现微信小程序登陆
PHP -- 用 ThinkPHP5.0 实现微信小程序登陆 <工欲善其事,必先利其器> 大家好,之前学习了 原生 PHP 和框架,今天我们运用框架 TP5.0 来实现一下微信小程序的用户 ...
最新文章
- Python程序设计题解【蓝桥杯官网题库】 DAY5-基础练习
- 新疆兵团谋定丰收美景-万祥军:对话农民丰收节交易会
- 验证 Swarm 数据持久性 - 每天5分钟玩转 Docker 容器技术(104)
- WatchOS系统开发大全(5)-WKInterfaceController的生命周期
- vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作
- linux共享磁盘给指定ip,linux想挂载通过ipsan协议推送上来的磁盘,两个ip共分配了21个未分区的盘,...
- Elasticsearch Java Low Level REST Client(通用配置)
- Win7旗舰版系统0x0000007f蓝屏怎么办
- 通用职责分配软件原则之9-受保护变量原则
- 菜鸟教程java二维数组_asp数组的使用介绍
- android入门问题--R文件丢失
- 最严格的身份证校验(Java版)
- RTOS osDelay和taskDelay关系
- zngnqfxtuubuosmo
- 海康威视球形摄像头激活,web二次开发
- 在matlab中产生dsp程序学习
- CS 61A Spring 2019 HW02 学习笔记
- python调用鼠标驱动_python+selenium 鼠标事件操作方法
- vue解决跨域问题(Vue-CLI)
- 计算个人所得税 (10 分)2019年个税新版规定:应纳税所得额为税前工资扣除五险一金,五险一金按工资22%比例计算。 个税起征点为5000元;