微信小程序实现登录页面

2024-09-29 05:26:21

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

实现在进入微信小程序首页前的登录验证页面，这里有两种方法，但其实原理都是一样的。

1. 在首页中加入一个弹窗作为登录窗口，效果如下图：

(1)index.wxml

登录窗口代码如下：

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{!hiddenmodalput}}"></view>
<view class="modal-dialog" wx:if="{{!hiddenmodalput}}" catchtouchmove="preventTouchMove">
  <view class="modal-title">{{tip}}</view>
  <view class="modal-content">
    <view class="modal-input">
      <input placeholder-class="input-holder" type="text" maxlength="20" bindinput="inputUsername" class="input" placeholder="用户名" value="{{username}}">
      </input>
    </view>
    <view class="modal-input">
      <input placeholder-class="input-holder" type="text" maxlength="20" bindinput="inputPassword" class="input" placeholder="密码" value="{{password}}">
      </input>
    </view>
  </view>
  <view class="modal-footer">
    <navigator class="btn-cancel" target="miniProgram" open-type="exit">
      退出
    </navigator>
    <!-- <view class="btn-cancel" bindtap="cancel" data-status="cancel">取消</view> -->
    <view class="btn-confirm" bindtap="confirm" data-status="confirm">确定</view>
  </view>
</view>

(2)index.js

在onload方法中判断当前的登录状态，这里我用了简单的 getStorage 来保存登录信息，hiddenmodalput控制登录窗口是否显示，这样就可以实现简单的登录页面，hideTabBar是用来隐藏底部tab栏按键。

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    wx.getStorage({
      key: 'username',
      success (res) {
        console.log(res.data);
        that.setData({
          hiddenmodalput:true,
        })
      },
      fail (res) {
        console.log(res);
        that.setData({
          hiddenmodalput:false,
        })
        wx.hideTabBar({
          animation: true,
          success: (res) => {},
          fail: (res) => {},
          complete: (res) => {},
        })
      }
    })
  },

2.新建一个登录页面

（1）在首页onload中进行登录转态验证，如果为未登录状态，则可以使用wx.navigateTo跳转到登录页面

（2）在登录页面中处理登录的相关逻辑，也可以实现相同的效果。

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

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

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

上图: 用户不存在: 代码: login.wxml <view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">  <view class="v2"> <view class="dltext" style="wi
微信小程序实战之登录页面制作（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>
微信小程序简洁登录页面的实现(附源码)

目录 1.上图 2.用户不存在 3.上代码 1.上图 2.用户不存在 3.上代码 3.1login.wxml <view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">  <view class="v2"> <view class="dltext"
微信小程序实现登录页面

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

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

1.首先下载小程序开发工具 2.小程序中的wxml就相当于html , wxss就相当于css 3.布局和html布局几乎一样 4.宽度使用百分比 5.input框里的文字上下居中是用padding撑出来的 6.最下面的文字靠右,view相当于一个块元素,设定宽度后,text-align右对齐简单的测试界面如图 index.wxml代码  <view class="container"> <text class=&quo
微信小程序用户登录和登录态维护的实现

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

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

本文实例为大家分享了微信小程序实现登录注册的具体代码,供大家参考,具体内容如下 html: <form bindsubmit="handleSubmit" wx:if="{{ onoff }}"> 用户名: <input type="text" name='username'/> 密码: <input type="password" name='password'/> 手机号: <in
微信小程序实现登录界面

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

目录 1.背景 2.什么是静默登录? 3.如何维护自定义登录态 4.静默登录整体流程 4.1app.onLaunch中发起登录 4.2处理小程序不支持异步阻塞 4.2.1粗糙的方案 4.2.2优雅的方式 4.3 整体流程图 5.写在最后 1.背景在小程序中,openid是一个用户对于一个小程序/公众号的标识,开发者可以通过这个标识识别出用户,就如同你的身份证一样. 2.什么是静默登录? 在普通的应用中,用户通过表单验证登录建立用户体系,这种常见的登录方式一般是通过登录页面表单进行登录,对用户来

微信小程序实现登录页面

相关推荐

随机推荐