精华内容
下载资源
问答
  • 微信小程序实现登录页面

    万次阅读 多人点赞 2019-05-06 08:51:08
    wxml文件: <view class="container"> <view class="login-icon"> ... ---------------长按二维码关注程序媛姐姐公众号有更多彩蛋哦---------------  

    wxml文件:

    <view class="container"> 
    
     <view class="login-icon"> 
     <image class="login-img" src="../../img/loginLog.jpg"></image> 
     </view> 
     <view class="login-from"> 
    
     <!--账号-->
     <view class="inputView"> 
      <image class="nameImage" src="../../img/name.png"></image> 
      <label class="loginLab">账号</label> 
      <input class="inputText" placeholder="请输入账号" bindinput="usernameInput" /> 
     </view> 
     <view class="line"></view> 
    
     <!--密码-->
     <view class="inputView"> 
      <image class="keyImage" src="../../img/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>

    wxss文件:

    page{ 
     height: 100%; 
    } 
    
    .container { 
     height: 100%; 
     display: flex; 
     flex-direction: column; 
     padding: 0; 
     box-sizing: border-box; 
     /* background-color: rgb(156, 23, 78) */
    } 
    
    /*登录图片*/
    .login-icon{ 
     flex: none; 
    } 
    
    .login-img{ 
     width: 750rpx;
    } 
    
    /*表单内容*/
    .login-from { 
     margin-top: 20px; 
     flex: auto; 
     height:100%; 
    } 
    
    .inputView { 
     /* background-color: #fff;  */
     line-height: 45px; 
     border-radius:20px;
      border:1px solid #999999;
    } 
    
    /*输入框*/
    .nameImage, .keyImage { 
     margin-left: 22px; 
     width: 18px; 
     height: 16px
    } 
    
    .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 { 
     margin-top: 8px; 
    } 
    
    /* .line { 
     width: 100%; 
     height: 1px; 
     background-color: #cccccc; 
     margin-top: 1px; 
    }  */
    
    /*按钮*/
    .loginBtnView { 
     width: 100%; 
     height: auto; 
     /* background-color:#DCDCDC;  */
     margin-top: 0px; 
     margin-bottom: 0px; 
     padding-bottom: 0px; 
    } 
    
    .loginBtn { 
     width: 90%; 
     margin-top: 40px; 
     border-radius:10px;
    }

    js文件:

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        username: '',
        password: ''
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onShow: function () {
        // 生命周期函数--监听页面显示
        wx.hideTabBar({})
      },
      onLoad: function () {
       
      },
    
    
      // 获取输入账号 
      usernameInput: function (e) {
        this.setData({
          username: e.detail.value
        })
      },
    
      // 获取输入密码 
      passwordInput: function (e) {
        this.setData({
          password: e.detail.value
        })
      },
    
      // 登录处理
      login: function () {
        var that = this;
        if (this.data.username.length == 0 || this.data.password.length == 0) {
          wx.showToast({
            title: '账号或密码不能为空',
            icon: 'none',
            duration: 2000
          })
        } else {
          wx.request({
            url: app.globalData.globalReqUrl +'/login/login', // 仅为示例,并非真实的接口地址
            method: 'post',
            data: {
              username: that.data.username,
              password: that.data.password
            },
            header: {
              'content-type': 'application/x-www-form-urlencoded' // 默认值
            },
            success(res) {
              if (res.data.code == "OK") {
                var unitName = res.data.data.User.unitName;
                var unitId = res.data.data.User.unitId;
                wx.setStorageSync('unitId', unitId);
                wx.setStorageSync('unitName', unitName);
                wx.switchTab({
                  url: '../overviewData/realTimeData'
                })
              } else {
                wx.showToast({
                  title: res.data.message,
                  icon: 'none',
                  duration: 2000
                })
              }
            }
          })
        }
      }
    })
    
    

     

    效果图:

       这里界面里用到的两个图标

     

     

     

     

     

                                ---------------长按二维码关注程序媛小姐姐公众号有更多彩蛋哦---------------

                                                

    展开全文
  • 前言:由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发。官方连接:点击打开链接 1.实现思路 自己写一个微信授权登录页面让用户实现点击的功能,也...
  • 因为一些原因,我就开始学习了小程序,这次做了一个登录一个注册页面,源码地址:https://gaoyixiang1.github.io/Lunch/大概功能:登录在账户和密码都没有输入的情况下,页面不会跳转。当登录成功和信息输入不全时...

    因为一些原因,我就开始学习了小程序,这次做了一个登录一个注册页面,源码地址:https://gaoyixiang1.github.io/Lunch/

    大概功能:

    登录

    • 在账户和密码都没有输入的情况下,页面不会跳转。
    • 当登录成功和信息输入不全时都会有相应的提示
    • 可以跳转至注册页面

    注册

    • 在全部信息都没有输入的情况下,不会跳转页面
    • 在信息输入完全的情况下显示注册成功
    • 用户返回到登录页面

    效果图

    feadbdae2e78ead9dd0e5f92296c61bb.png

    登录.png

    9cd387e648673cc7d45d43de2ddd23a2.png

    注册.png

    登录代码

    • wxml
    账号 密码 登录 还未注册?去注册
    • 验证部分
     region: function () { if (this.data.phonenum.length == 0 || this.data.password.length == 0 || this.data.repwd.length == 0 || this.data.username.length == 0) { wx.showToast({ title: '请输入信息', icon: 'loading', duration: 2000 }) }else if(this.data.repwd!=this.data.password){ wx.showToast({ title: '密码有误', icon: 'loading', duration: 2000 }) } else { wx.showToast({ title: '注册成功', icon: 'success', duration: 2000 }) } }})

    注册

    • wxml
    欢迎注册啊注册 
    • 验证部分
     region: function () { if (this.data.phonenum.length == 0 || this.data.password.length == 0 || this.data.repwd.length == 0 || this.data.username.length == 0) { wx.showToast({ title: '请输入信息', icon: 'loading', duration: 2000 }) }else if(this.data.repwd!=this.data.password){ wx.showToast({ title: '密码有误', icon: 'loading', duration: 2000 }) } else { wx.showToast({ title: '注册成功', icon: 'success', duration: 2000 }) } }})
    展开全文
  • 微信小程序登录页面 实现在进入微信小程序首页前的登录验证页面,这里有两种方法,但其实原理都是一样的。 1. 在首页中加入一个弹窗作为登录窗口,效果如下图: (1)index.wxml 登录窗口代码如下: <view class=...

    微信小程序登录页面

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

    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)在登录页面中处理登录的相关逻辑,也可以实现相同的效果。

    展开全文
  • 微信小程序实现登录功能

    千次阅读 2019-01-08 14:18:32
    wxml代码就不写了,就一普通的登录页面,这里就把js代码贴出来吧。 //项目的路径 var serverUrl = 'xxxxx'; //用户名 var username = ''; //密码 var password = ''; Page({ /** * 页面的初始数据 */ data: { ...

    wxml代码就不写了,就一普通的登录页面,这里就把js代码贴出来吧。

    //项目的路径
    var serverUrl = 'xxxxx';
    //用户名
    var username = '';
    //密码
    var password = '';
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        username: '',
        password: '',
        serverUrl: serverUrl
      },
    
      // 获取输入账号
      // 给账号的input加上bindinput="usernameInput",赋值
      usernameInput: function (e) {
        username = e.detail.value
        this.setData({
          username : e.detail.value
        })
      },
    
      // 获取输入密码
      // 给密码的input加上bindinput="passwordInput",赋值
      passwordInput: function (e) {
        password = e.detail.value;
        this.setData({
          password: e.detail.value
        })
      },
    
      loginApp:function(e){
        console.log(username);
        console.log(password);
        wx.request({
          url: serverUrl + '/user_login.action',
          data: {
            loginName: username,
            loginPwd: password
          },
          header: { 'content-type': 'application/json' },
          success: function (res) {
            if (res.data == "isNotExist"){
          	  //后台返回isNotExist,用户名错误
              wx.showToast({
                title: '用户不存在!',   //内容
                icon: 'none',   //图标,支持"success"、"loading" ,“none”即为无图标
                // image: '/img/ceshi.jpg',   //自定义图标的本地路径,image 的优先级高于 icon
                duration: 1000,   //提示的延迟时间,单位毫秒,默认:1500
                mask: true   //是否显示透明蒙层,防止触摸穿透,默认:false 
              })
            } else if (res.data == "pwdError"){
              // 后台返回pwdError,密码错误
              wx.showToast({
                title: '密码错误!',   //内容
                icon: 'none',  //图标,支持"success"、"loading" ,“none”即为无图标
                // image: '/img/ceshi.jpg',   //自定义图标的本地路径,image 的优先级高于 icon
                duration: 1000,   //提示的延迟时间,单位毫秒,默认:1500
                mask: true   //是否显示透明蒙层,防止触摸穿透,默认:false 
              })
            } else {
              wx.reLaunch({
              	// 用户名密码正确,跳转主页
                url: 'pages/index/index'
              })
            }
          }
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
       
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
      
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
      
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
      
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
      
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
      
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
      
      }
    })
    
    展开全文
  • 因为一些原因,我就开始学习了小程序,这次做了一个登录一个注册页面,源码地址:https://gaoyixiang1.github.io/Lunch/大概功能:登录在账户和密码都没有输入的情况下,页面不会跳转。当登录成功和信息输入不全时...
  • 使用微信小程序实现学生登录

    千次阅读 2018-05-21 10:56:39
    首先 ,先登录微信小程序创建login目录,使用Page自动生成文件小程序采用wxml,js,wcss,json页面结构,wxml如同html,wcss如同css在微信开发者工具中编写小程序时,切记使用div实现学生登录,第一要搭建页面参考以下...
  • 记录一下最近微信小程序 电能服务 开发遇到的一些问题1,退出按钮一开始设置的是wx.navigateTo({url:"../login/login"})从登录页面输入账号进到小程序里,点击退出按钮,能实现完全退出,进入home=>A 子页面=>A...
  • 第三方登录模块使开发者能快捷灵活的拥有自己的用户系统,是 ...支持开发者不写任何后端代码实现微信小程序用户系统与 LeanCloud 用户系统的关联。v3.6:增加 unionid 登录接口。支持开发者使用 unionid 关联一...
  • 微信小程序登录思路及代码 因为项目要求要做微信小程序登录功能,因为比较繁琐所以记录一下笔记,梳理一下思路 思路 当用户点击个人主页或者购买物品收藏物品的时候往往都需要验证个人信息,比如提交订单要确定是...
  • 最近有网友利用空余时间用小程序实现了个动态的登录页效果,所以下面我们51小程序就吧这篇文章主要介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料分享给大家,需要的朋友可以参考借鉴,下面来一起看看吧...
  • 微信小程序 新建登录页并实现tabBar隐藏 实现的效果如下两张图: app.json 设置的pages的path如下: 在app.json里面设置tabBar的值: 如果你不想在登录页有tabBar的内容,则在app.json 里面tabBar–>list–>...
  • 微信小程序登录注册 实现 前提:本案例是配合API工场的后台接口实现的 1,首先是给页面加上一个按钮或者弹出层 <button class="l" open-type="getUserInfo" bindgetuserinfo="processLogin">允许</...
  • 结: 1 如何自定义组件 - 组件和页面一样,也是由四个文件组成,所以我们自定义组件的时候,模拟pages文件夹,把所有的所有的组件都放在一个文件夹中,每个组件又由一个文件夹包裹,方便管理,在对应目录右击,...
  • 如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一。原因如下: 表单组件在数量上达到11个,居各类组件之首。当然幸运的是,并不是所有的都需要校验。 而这些组件操作方式多样,可分为滑动、...
  • 微信小程序云数据库实现登录

    千次阅读 2019-04-14 17:49:53
    微信小程序自带的云数据库的优势在于,不用搭建服务器...微信小程序自带的云数据库可以生成登录注册系统,以下是简单实现功能的示例代码: 登录界面如下: login.wxml页面: <view class='username_it...
  • 1. 用户打开小程序,在user表中记录用户的相关信息,可以导出在别的地方做记录 2. 在页面中也需要能够显示用户姓名头像等信息 3. 由于用户的昵称可以随时改,需要每次登录的时候更新一下信息,否则的话,导出来的...
  • 微信小程序登录注册实现

    千次阅读 2018-10-12 15:03:16
    实现微信小程序页面注册和登录 【参考】 https://blog.csdn.net/qq_19558705/article/details/65935818 wxml源码: 1. 顶部提示错误信息 2. 输入内容长度限制 3. 点击注册进行表单验证 4. 存在问题:输入框...
  • 1. 获取微信小程序专用JS登录 Mob开发者后台 ,选择MobLink项目,确认相关配置项无误后选择页面配置,切换到引用JS文件选项卡,点击微信小程序专用JS对应的一键下载JS文件按钮,下载MobLink提供的JS文件,如下图: ...
  • 微信小程序前端代码: login.js const app = getApp() import Notify from '../../components/vant/notify/notify'; Page({ /** * 页面的初始数据 */ data: { userInfo: [], code: '' }, /** * 生命...
  • 微信小程序之授权登录实现(button按钮)

    万次阅读 多人点赞 2018-08-03 22:23:38
    前言:由于微信官方修改了 getUserInfo、authorize 接口,无法弹出授权窗口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发 1.实现思路 微信授权登录仅适用于使用微信用户信息的...
  • 选择小程序开发---> 新建(图标 )一个项目---->填写以下信息: a.AppId:(暂无,不影响工具预览,无法手机微信预览,需要注册微信公众平台的应用号,才可具有(与开发者微信有关联,不是随便别人给一个就行))) b.项目名...
  • SpringBoot实现微信小程序登录

    千次阅读 热门讨论 2020-04-08 15:51:50
    文章目录一、登录流程二、后端实现1、SpringBoot项目结构树2、实现auth.code2Session 接口的封装3、建立用户信息表及用户增删改查的管理4、实现登录认证及令牌生成三、前端实现与测试1、编写登录公共函数2、搭建登录...
  • 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3.通过微信接口把code换取成openid 4.后端将openid作为用户名和密码 5.后端通过JSON web token方式登录,把token和用户id...
  • 微信小程序授权登录

    2020-11-29 17:16:25
    由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发。官方连接https://developers.weixin.qq.com/miniprogram/dev/component/button.html 二、实现思路...
  • 接上节简单介绍完wxml,这节实际运用小程序的wxml来实现一套简单登录和个人信息展示。 登录页面 创建好项目后,在pages下新建一个login目录,右键login文件夹,选择新建page,创建login的page,如下图: 创建后...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 369
精华内容 147
关键字:

微信小程序实现登录页面

微信小程序 订阅