微信小程序实现登录界面示例

本文实例为大家分享了微信小程序实现登录界面的具体代码,供大家参考,具体内容如下

注:这里使用的是原生微信小程序

使用wxss和wxml

index.wxml文件中代码

<view class="v1">
 
<!-- v2父容器  子view使用绝对布局 -->
  <view class="v2">
    <view class="dltext">登录</view>
 
    <!-- 手机号 -->
    <view class="phoneCs">
      <image src="/images/phone.png" class="ph"></image>
      <input placeholder="请输入手机号" />
    </view>
 
    <!-- 密码 -->
    <view class=passwordCs">
      <image src="/images/password.png" class="ps"></image>
      <input placeholder="请输入密码" />
      <image src="/images/eye-open.png" class="eye"></image>
    </view>
 
    <!-- 注册 和忘记密码  -->
    <view class="zhuce">
      <navigator>立即注册</navigator>
      <navigator>忘记密码?</navigator>
    </view>
 
    <!-- 登录按钮 -->
    <view class="denglu">
      <button class="btn-dl" type="primary">登录</button>
    </view>
 
    <!-- 协议区  xieyi -->
    <view class="xieyi">
      <checkbox class="isXY"></checkbox>
      <view class="text-xy">同意小程序的《使用协议》</view>
    </view>
  </view>
 
<!-- 提示框  使用以下方式登录 -->
  <view class="v3">
    <view class="line"></view>
    <view class="lText">您还可以使用以下方式登录</view>
    <view class="line"></view>
  </view>
 
<!-- qq  weixin  weibo 图标展示view -->
  <view class="qwwIcon">
    <image src="/images/weixin.png"></image>
    <image src="/images/qq.png"></image>
    <image src="/images/weibo.png"></image>
  </view>
 
</view>

index.wxss样式文件代码(使用绝对布局和相对布局)

/* 最大的父元素 */
.v1{
  display: block;
  position:absolute;
  height: 100%;
  width: 100%;
  background: #356363;
  /* 换图片 */
  
}
/* 白色区域 */
.v1 .v2{
  position: relative;
  margin-top: 150rpx;
  left: 100rpx; 
  width: 545rpx;
  height: 750rpx;
  background: #FFFFFF;
  border-radius: 50rpx;
}
/* 白色区域内的登录文本 */
.v1 .v2 .dltext{
  margin-top: 50rpx;
  position: absolute;
  margin-left:80rpx;
  width: 150rpx;
  height: 100rpx;
  font-size: 60rpx;
  font-family: Helvetica;
  color: #000000;
  line-height: 100rpx;
  letter-spacing: 2rpx;
}
/* 手机图片+输入框+下划线的父容器view */
.v1 .v2 .phoneCs{
  margin-top: 200rpx;
  margin-left: 35rpx;
  position: absolute;
  display: flex;
  width:450rpx ;
  height: 80rpx ;
  border-bottom: 3rpx solid rgb(58, 57, 57);
}
/* 手机图标 */
.v1 .v2 .phoneCs .ph{
  margin-top: 5rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 手机号输入框 */
.v1 .v2 .phoneCs input{
  width: 200rpx;
  font-size: 25rpx ;
  margin-top: 15rpx;
  margin-left: 30rpx;
}
/* 密码图标+输入框+小眼睛图标+下划线父容器view */
.v1 .v2 .passwordCs{
  margin-top: 400rpx;
  margin-left: 35rpx;
  position: absolute;
  display: flex;
  width:450rpx ;
  height: 80rpx ;
  border-bottom: 3rpx solid rgb(58, 57, 57);
}
/* 密码图标 */
.v1 .v2 .passwordCs .ps{
  margin-top: 5rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 眼睛 图标*/
.v1 .v2 .passwordCs .eye{
  margin-top: 5rpx;
  margin-left: 65rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 密码输入框 */
.v1 .v2 .passwordCs input{
  width: 200rpx;
  font-size: 25rpx ;
  margin-top: 15rpx;
  margin-left: 30rpx;
}
/* 注册+忘记密码父容器 */
.v1 .v2 .zhuce{
  font-size: 25rpx;
  margin-left: 85rpx;
  width: 370rpx;
  margin-top: 540rpx;
  position: absolute;
  display: flex;
  justify-content: space-between;
}
/* 登录按钮容器view */
.v1 .v2 .denglu{
  width: 350rpx;
  height: 50rpx;
  position: absolute;
  margin-top: 600rpx;
  margin-left: 85rpx;
  
}
/* 登录按钮 */
.v1 .v2 .denglu button{
  padding: 0rpx;
  line-height: 50rpx;
  font-size: 25rpx;
  width: 100%;
  height: 100%;
  border-radius: 30rpx;
}
/* 复选框+协议文字容器view */
.v1 .v2 .xieyi{
  margin-left: 10rpx;
  margin-top: 680rpx;
  width: 400rpx;
  display: flex;
  position: absolute;
}
/* 复选框 */
.v1 .v2 .xieyi .isXY{
  margin-left: 85rpx;
  /* 修改复选框的大小 */
  transform:scale(.6);
}
/* 协议文本 */
.v1 .v2 .xieyi .text-xy{
  margin-left: 10rpx;
  margin-top: 20rpx;
  color: #000000;
  font-size:18rpx;
}
/* 提示文本 */
.v3{
  padding-left: 100rpx;
  display: flex;
  position: relative;
  width: 100%;
  height: 60rpx;
  padding-top: 50rpx;
}
.v3 .line{
  margin-left: 5rpx;
  margin-top: 18rpx;
  width: 120rpx;
  height: 3rpx;
 background-color:#FFFFFF;
}
.v3 .lText{
  color: #FFFFFF;
  font-size: 25rpx;
}
/* qq wx wb */
.qwwIcon{
  margin-top: 100rpx;
  padding-top: 50rpx;
  position: relative;
  display: flex;
  width: 100%;
  height: 150rpx;
}
.qwwIcon image{
  padding-left: 120rpx;
  width: 80rpx;
  height: 80rpx;
}

结果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实战之登录页面制作(5)

    提供一个登录页的案例,供同学们使用 项目效果图: 目录结构: 图片资源: name.png key.png loginLog.jpg login.wxml: <view class="container"> <view class="login-icon"> <image class="login-img" src="../images/loginLog.jpg"></image>

  • 微信小程序实现登录界面

    微信小程序的登录界面实现,供大家参考,具体内容如下 <view class="container"> <view class="wrapper"> <view class="left-top-sign">LOGIN</view> <view class="welcome"> 欢迎回来! </view> <view class="input-

  • 微信小程序实现登录页面

    本文实例为大家分享了微信小程序实现登录页面的具体代码,供大家参考,具体内容如下 实现在进入微信小程序首页前的登录验证页面,这里有两种方法,但其实原理都是一样的. 1. 在首页中加入一个弹窗作为登录窗口,效果如下图: (1)index.wxml 登录窗口代码如下: <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="

  • 微信小程序简洁登录页面的实现(附源码)

    目录 1.上图 2.用户不存在 3.上代码 1.上图 2.用户不存在 3.上代码 3.1login.wxml <view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}"> <!-- v2父容器 子view使用绝对布局 --> <view class="v2"> <view class="dltext"

  • jsf实现微信小程序简洁登录页面(附源码)

    上图: 用户不存在:  代码: login.wxml <view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">    <!-- v2父容器  子view使用绝对布局 -->    <view class="v2">      <view class="dltext" style="wi

  • 微信小程序 本地存储及登录页面处理实例详解

    实例内容 登陆界面 处理登陆表单数据 处理登陆表单数据(异步) 清除本地数据 登录界面: 在app.json中添加登陆页面pages/login/login,并设置为入口. 保存后,自动生成相关文件(挺方便的). 修改视图文件login.wxml <!--pages/login/login.wxml--> <view class="container"> <form bindsubmit="formSubmit"> <vie

  • 微信小程序实现登录界面示例

    本文实例为大家分享了微信小程序实现登录界面的具体代码,供大家参考,具体内容如下 注:这里使用的是原生微信小程序 使用wxss和wxml index.wxml文件中代码 <view class="v1">   <!-- v2父容器  子view使用绝对布局 -->   <view class="v2">     <view class="dltext">登录</view>       &l

  • 微信小程序 后台登录(非微信账号)实例详解

    微信小程序 后台登录 实现效果图: 最近写了一个工具类的小程序,按需求要求不要微信提供的微信账号登录,需要调取后台登录接口来登录.由于小程序大部分都是调取微信信息登录,很少有调用自己后台来登录的,所以写的时候各种坑,现在把趟好坑的代码共享给大家吧!(PS:如有不妥之处,共勉之.) 废话不说,直接上代码 找到app.js在里面写如下代码 App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('log

  • uni-app 微信小程序授权登录的实现步骤

    目录 一.appID相关申请和配置 1. appid获取方式 2. appID配置 二.获取用户基础数据 2.1. 获取用户信息 2.2. 获取用户信息2 三.调用登录api 3.1. 登录api 3.2. 案例代码 四.获取唯一标识信息 4.1. 官网文档 4.2. 接口简述 五.绑定用户 实现登录 5.1. 代码案例(未封装) 5.2. 代码案例(封装) 六.项目开源地址 6.1. 前端 6.2. 后端 一.appID相关申请和配置 1. appid获取方式 登录微信公众平台 官网链接:ht

  • 微信小程序 新建登录页并实现tabBar隐藏

    微信小程序 新建登录页并实现tabBar隐藏 实现的效果如下两张图: app.json 设置的pages的path如下: 在app.json里面设置tabBar的值: 如果你不想在登录页有tabBar的内容,则在app.json 里面tabBar-->list-->pagePath 不能写登录页面的路径,并且首页跳转到登录页时,用 navigateTo 跳转到新页面即可实现tabBar的隐藏,如下图所示: login页面如何设置整个页面都是蓝色(#2da1ed)? 在login.json里面设

  • 微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)

    本文实例为大家分享了微信小程序授权登录解决方案的具体代码,供大家参考,具体内容如下 getUserInfoF:function(){ var that = this; wx.getSetting({ success: (res) => { console.info(res.authSetting); wx.getUserInfo({ success: res => { this.globalData.userInfo = res.userInfo console.info("一开始同

  • Django实现微信小程序的登录验证功能并维护登录态

    这次自己做了一个小程序来玩,在登录方面一直有些模糊,网上看了很多文档后,得出以下一种解决方案. 环境说明: 1.小程序只需要拿到openid,其他信息不存储. 2.Django自带的User类不适合. 具体操作流程: 1.用户点进小程序,就调用wx.login()获取临时登录凭证code, wx.login()用户是无感知的, 2.通过wx.request()将code传到开发者服务器的后台程序, 3.后台拿到code之后,调用微信提供的接口,获取openid和session_key, 4.后台

  • 微信小程序用户登录和登录态维护的实现

    让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情.我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Session)状态. 在微信小程序中,我们大致会涉及到以下三类登录方式: 自有的账号注册和登录: 使用其他第三方平台账号登录: 使用微信账号登录(即直接使用当前已登录的微信账号来作为小程序的用户进行登录). 第一和第二种方式是目前Web应用中最常见的两种方式,在微信小程序中同样可以使用,但是需要值的注意的是,小程序中没有Cookie

  • springboot+jwt+springSecurity微信小程序授权登录问题

    场景重现:1.微信小程序向后台发送请求 --而后台web采用的springSecuriry没有token生成,就会拦截请求,,所以小编记录下这个问题 微信小程序授权登录问题 思路 参考网上一大堆资料 核心关键字: 自定义授权+鉴权 (说的通俗就是解决办法就是改造springSecurity的过滤器) 参考文章 https://www.jb51.net/article/204704.htm 总的来说的 通过自定义的WxAppletAuthenticationFilter替换默认的UsernameP

  • 微信小程序授权登录的优雅处理方式

    前言 当微信小程序项目中涉及到获取用户信息并实现用户登录时,可以通过微信官方提供的登录能力方便地获取微信的用户身份标识,快速建立小程序内的用户体系.官方文档只是提供如何去调用授权登录,如果直接原封不动的照搬文档来进行代码编写,这样势必会造成代码的维护性差,所以本篇着重介绍如果更优雅的处理微信小程序的授权登录. 授权登录的基本流程 上图是微信小程序官网提供的授权登录基本流程图,这里我只从前端开发的角度来讲解一下该流程. 通过wx.login()获取临时登录凭证code. 通过调用服务端提供的接口把

随机推荐