热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序之登录页面制作实例详解

这篇文章主要为大家详细介绍了微信小程序实战之登录页面制作代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要为大家详细介绍了微信小程序实战之登录页面制作代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

提供一个登录页的案例,供同学们使用

项目效果图:

 
  
  

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 
  }) 
 } 
 } 
})

运行结果

以上就是微信小程序之登录页面制作实例详解的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 个人总结_软件工程课程——个人总结
    本文由编程笔记#小编为大家整理,主要介绍了软件工程课程——个人总结相关的知识,希望对你有一定的参考价值。前言时长4个与的软件工程实践结束。Alpha与B ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例,帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时,文章还提供了常见问题的解决方案和优化建议,确保上传过程的高效性和稳定性。 ... [详细]
  • 本书《.NET Core 2.* 开发者指南》是面向开发者的全面学习与实践手册,涵盖了从基础到高级的各个层面。书中详细解析了 .NET Core 的核心概念,包括如何创建 .NET Core 网站,并通过视频教程直观展示操作过程。此外,还深入探讨了 Startup 类的作用、项目目录结构的组织方式以及如何在应用中使用静态文件等内容。对于希望深入了解 .NET Core 架构和开发技巧的开发者来说,本书提供了丰富的实践案例和详尽的技术指导。 ... [详细]
  • 后端开发|php教程numbering,addClass,COOKIE,POST,instanceof后端开发-php教程一:php变量商场项目源码,ubuntu安装其他系统,to ... [详细]
  • 三周学会小程序第七讲:提交问题
    截止到上一讲可以支持数据库存储了,所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩,文末附源码。对小 ... [详细]
  • 开始实现之前先上个效果图tips网络图片需先配置download域名,可通过wx.getImageInfo转为临时路径;个人习惯问题,我习 ... [详细]
  • 在Java应用中实现只读模式的切换方法与技巧 ... [详细]
  • 微信小程序的核心功能与优势在于其独特的运行环境,区别于传统网页应用,它不依赖于浏览器的BOM和DOM对象,因此无法通过常规的`console.log(window)`或`console.log(document)`获取相关信息。此外,小程序还具备一系列专有特性,如高效的数据绑定、丰富的API接口以及良好的用户交互体验,这些都为开发者提供了更为灵活和强大的开发工具,使得小程序能够更好地适应移动互联网时代的需求。 ... [详细]
  • 本课程首先介绍了全栈开发的最后一公里为何重要,并详细探讨了搭建线上生产环境的关键步骤。随后,通过五个本地Node.js项目的实战演练,逐步展示了从快速构建纯静态简易站点到复杂应用的全过程,涵盖了环境配置、代码优化、性能调优等多方面内容。 ... [详细]
  • 基于Spring Boot与WebSocket的网吧客户管理系统毕业设计【详细代码解析、安装调试及文档指导】
    本毕业设计基于Spring Boot和WebSocket技术,开发了一套功能完善的网吧客户管理系统。系统不仅涵盖了客户信息管理、在线聊天等功能,还提供了详细的代码解析、安装调试指南及全面的文档支持。适用于计算机科学与技术专业学生,特别是对JavaWeb开发感兴趣的读者。 ... [详细]
  • 在微信小程序中,长按图片无法像H5页面那样自动弹出保存图片的选项。为了提升用户体验,开发者需要自定义实现这一功能。具体而言,该功能的实现涉及两个关键步骤:首先,需要监听图片的长按事件;其次,调用微信提供的API来实现图片的保存操作。通过这些技术手段,可以显著改善用户在小程序中保存图片的体验。 ... [详细]
  • 1.木棉说分类:知识服务平台,融资情况:完成a轮融资,金额3000万人民币,投资方得盛投资。简介:木棉说是一家基于互联网大数据为女性用户提供全方位的知识服务平台,旗下已拥有2000 ... [详细]
  • 2017-09-07前端日报精选JavaScriptEventLoop机制详解与Vue.js中实践应用Redux基础与实践如何用js获取虚拟键盘高度?( ... [详细]
  • 万物智联新时代!跨时代的智慧综合体开启全新领域探索
    万物智联新时代!跨时代的智慧综合体开启全新领域探索 ... [详细]
author-avatar
UN周_179
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有