微信小程序实战之登录页面制作

登录页面的效果图

目录结构：

实现项目所需图片

loginLog.jpg

name.png

key.png

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：

/* pages/login/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; height: 98rpx;line-height: 98rpx; } /*输入框*/ .nameImage, .keyImage { margin-left: 22px; width: 14px; height: 14px;} .loginLab { margin: 15px 15px 15px 10px; color: #545454; font-size: 28rpx;} .inputText { display: block; float: right; text-align: right; margin-right:44rpx; height: 70rpx;margin-top: 20rpx;color: #000; font-size: 28rpx ;
} .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; font-size: 32rpx;}

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: 'none',   duration: 2000    })   }else { // 这里修改成跳转的页面 wx.showToast({   title: '登录成功',   icon: 'success',   duration: 2000   })  // 跳转至index页面// wx.redirectTo({//   url: '../index/index'//})}   } })

**为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助。**

微信小程序实战之登录页面制作相关推荐

微信小程序实战篇-分类页面制作
https://blog.csdn.net/u012927188/article/details/73650264 转载于:https://www.cnblogs.com/bydzhangxiaowe ...
微信小程序入门（登录页面）
1.首先前往开发者工具下载安装开发工具: 2.安装后微信扫码,并填写自己的AppID选择自己的项目目录后登录: 登陆后点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预 ...
微信小程序开发---京东登录页面(company)
页面效果代码 company.wxml <form bindsubmit="formSubmit" bindreset="formReset">& ...
微信小程序开发(5)-新闻页面制作之banner
如图: 分四步: 1.在newspage.js中准备图片数据 bannerUrl:['/images/01.png','/images/02.png','/images/03.png'] //要 ...
php小程序开发新闻,微信小程序实战程序简易新闻的制作方法
这篇文章主要讲述微信小程序实战程序简易新闻的制作方法的相关资料,需要的朋友可以参考下微信小程序实战项目: 简易新闻制作先看下效果: 实现思路数据全部是采用的本地数据,图片也是本地图片,因为苦逼的 ...
微信小程序实战教程-闫涛-专题视频课程
微信小程序实战教程-38472人已学习课程介绍介绍微信小程序API,包括页面布局.网络交互.媒体文件.本地缓存.地理位置.WebSocket和传感器技术,后以翼健康为模板,开发一套 ...
基于云开发的微信小程序实战教程（一）
基于云开发的微信小程序实战教程(一) 最近刚开发了款小程序,在开发过程中发现,基于云开发的教程资源不是很多,而且很不详细.所以边实战边总结了下云开发的简单教程,希望对你有所帮助. 本章主要内容:什么是 ...
小程序swiper怎么让内容撑开高度_[视频]微信小程序实战优购商城，涵盖你所学的技能点...
很多友友都在找视频教程学习,IT技术教程分享网[http://www.mano100.cn]已经为你收集了各种各样的视频教程,不用再到处找视频教程学习了.无论是免费的,还是收费的,都在这里了.只要你注 ...
[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
微信小程序的详细登录(上)
前段时间发布了一个微信小程序的简单登录,那段时间我一直在忙着项目,有一天,我清闲下来准备进入小程序群里面看一下来着,刚好有人问问题了,我一看这哥们的问题好像是我写的东西啊,我感觉是时候秀一波了,是时候 ...

微信小程序实战之登录页面制作

login.wxml

login.wxss：

login.js：

微信小程序实战之登录页面制作相关推荐

最新文章

热门文章