微信小程序登录注册页面

news2024/10/7 10:20:26
// login.js
// 获取应用实例
var app = getApp()
var api = require("../../utils/api.js")

Page({
  data: {
    motto: '@zhenbei V1.0.0',
    userInfo: {},
    hasUserInfo: false,
    disabled: true,
    btnstate: 'default',
    username: '',
    password: '',
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  accountInput: function (e) {
      var username = e.detail.value
    if (username !== '') {
      this.setData({
        disabled: false, 
        btnstate: 'primary', 
        username: e.detail.value
      });
    } else {
      this.setData({
        disabled: true,
        btnstate: 'default'
      });
    }
  },

  pwdBlur: function(e) {
    var password = e.detail.value
    if (password != '') {
      this.setData({password: e.detail.value});
    }
  },

  onClickSubmit:function(e){
    wx.request({
      url: api.LoginAPI,
      data: { 
        username: this.data.username, 
        password: this.data.password, 
        // nickname: e.detail.userInfo.nickName,
        // avatar: e.detail.userInfo.avatarUrl
      },
      method: 'POST',
      dataType: 'json',
      success: function (res) {
          console.log(res)
        if (res.data.code) {
          // 初始化用户信息
          app.initUserInfo(res.data.data, e.detail.userInfo);
          // 跳转会上一级页面
          wx.redirectTo({
            url: '../index/index',
          });
        } else {
          wx.showToast({ title: "登录失败", icon: 'none' });
        }
      }
    })
  },
  bindViewTap() {
      
  },
  onLoad() {
  },

})

// login.json
{
    "usingComponents": {}
}```

帐号 密码
</view>
<view class="hr"></view>

<!-- <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bind:tap="login">登录</button> -->
<button class="btn" disabled="{{disabled}}" type="{{btnstate}}" open-type="getUserInfo"  bindgetuserinfo="onClickSubmit">登录</button>
<view class="operate">
	<view><navigator url="../mobile/mobile">手机快速注册</navigator></view>
	<view>找回密码</view>
</view>
<!-- <view class="login">
	<view><image src="..//images/wxlogin.png" /></view>
	<view><image src="../images/qqlogin.png" /></view>	
</view> -->
{{motto}}


/* pages/login/login.wxss */
/index.wxss/
.content {
margin-top: 60px;
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}

.userinfo-avatar {
overflow: hidden;
width: 200rpx;
height: 200rpx;
margin: 0rpx;
border-radius: 50%;
}

.account {
display: flex;
flex-direction: row;
padding-left: 0px;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}

.title {
margin-right: 30px;
font-weight: bold;
}

.hr {
border: 1px solid #ccc;
opacity: 0.2;
width: 90%;
margin: 0 auto;
}

.see {
position: absolute;
right: 20px;
}

.btn {
width: 90%;
margin-top: 40px;
color: #999;
}

.operate {
display: flex;
flex-direction: row;
}

.operate view {
margin: 0 auto;
margin-top: 40px;
font-size: 14px;
color: #333;
}

.login {
display: flex;
flex-direction: row;
margin-top: 60px;
}

.login view {
margin: 0 auto;
}

.login image {
width: 70px;
height: 98px;
}

.usermotto {
margin-top: 140px;
font-size: 15px;
}


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/441913.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

UE4/5 C++网络服务器编程纪录【零】--准备篇

前言 之前利用业余时间重新复习UE4/5的C开发&#xff0c;闲来无事做了个基于独立服务器的多人在线&#xff08;目前限定客户数量是20人以内&#xff09;DEMO&#xff0c;核心功能在我之前发的B站视频里面有&#xff0c;战斗、动作、交互以及场景演示都有了&#xff0c;有朋友看…

Linux使用:环境变量指南和CPU和GPU利用情况查看

Linux使用&#xff1a;环境变量指南和CPU和GPU利用情况查看 Linux环境变量初始化与对应文件的生效顺序Linux的变量种类设置环境变量直接运行export命令定义变量修改系统环境变量修改用户环境变量修改环境变量配置文件 环境配置文件的区别profile、 bashrc、.bash_profile、 .ba…

函数(有点难,要注重实战)

目录 1. 函数是什么2. C语言中函数的分类2.1 库函数2.1.1 如何学会使用库函数&#xff1f; 2.2 自定义函数 3. 函数的参数3.1 实际参数&#xff08;实参&#xff09;&#xff1a;3.2 形式参数&#xff08;形参&#xff09;&#xff1a; 4. 函数的调用&#xff1a;4.1 传值调用4…

Spark SQL实战(08)-整合Hive

1 整合原理及使用 Apache Spark 是一个快速、可扩展的分布式计算引擎&#xff0c;而 Hive 则是一个数据仓库工具&#xff0c;它提供了数据存储和查询功能。在 Spark 中使用 Hive 可以提高数据处理和查询的效率。 场景 历史原因积累下来的&#xff0c;很多数据原先是采用Hive…

Node内置模块 【url模块与queryString】

文章目录 &#x1f31f;前言&#x1f31f;url 模块&#x1f31f; URL各部分说明&#x1f31f; 将URL字符串转换为对象&#x1f31f; 将对象格式化为URL字符串&#xff1a;url.format(urlObj)&#x1f31f; URL路径处理&#xff1a;url.resolve(from, to) &#x1f31f; querySt…

MySQL-四大类日志

目录 &#x1f341;MySQL日志分为4大类 &#x1f341;错误日志 &#x1f343;修改系统配置 &#x1f341;二进制日志 &#x1f343;查看二进制日志 &#x1f343;删除二进制日志 &#x1f343;暂时停止二进制日志的功能 &#x1f341;事务日志(或称redo日志) &#x1f341;慢查…

SSM整合、环境配置以及详细综合测试(单表查询、多表查询和数据分页、前后端分离、Vue3)

SSM整合、环境配置以及基础综合测试 准备&#xff1a;创建maven项目以及项目框架准备 SSM整合简介 介绍: SSM(SpringSpringMVCMyBatis) 整合&#xff0c;就是三个框架协同开发。Spring整合Mybatis就是将Mybatis核心配置文件当中数据源的配置、事务处理、以及工厂的配置&…

OpenGL入门教程之 深入三角形

一、引言 本教程使用GLEW和GLFW库。  通过本教程&#xff0c;你能轻松的、深入的理解OpenGL如何绘制一个三角形。  如果你不了解OpenGL是什么&#xff0c;可以阅读OpenGL深入理解。 二、基本函数和语句介绍 通过阅读以下的函数&#xff0c;你的大脑里能留下关于OpenGL基本函…

通过CSIG—走进合合信息探讨生成式AI及文档图像处理的前景和价值

一、前言 最近有幸参加了由中国图象图形学学会&#xff08;CSIG&#xff09;主办&#xff0c;合合信息、CSIG文档图像分析与识别专业委员会联合承办的“CSIG企业行——走进合合信息”的分享会&#xff0c;这次活动以“图文智能处理与多场景应用技术展望”为主题&#xff0c;聚…

安全防御第四天:防病毒网关

一、恶意软件 1.按照传播方式分类 &#xff08;1&#xff09;病毒 病毒是一种基于硬件和操作系统的程序&#xff0c;具有感染和破坏能力&#xff0c;这与病毒程序的结构有关。病毒攻击的宿主程序是病毒的栖身地&#xff0c;它是病毒传播的目的地&#xff0c;又是下一次感染的出…

尚融宝21-整合springcloud

目录 一、整合注册中心nacos 二、整合openFeign &#xff08;一&#xff09;准备工作 &#xff08;二&#xff09;导入依赖 &#xff08;三&#xff09;接口的远程调用 &#xff08;四&#xff09;配置超时控制和日志打印 三、整合Sentinel 四、整合gateway服务网关 …

【Spring从成神到升仙系列 五】从根上剖析 Spring 循环依赖

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱敲代码的小黄&#xff0c;独角兽企业的Java开发工程师&#xff0c;CSDN博客专家&#xff0c;阿里云专家博主&#x1f4d5;系列专栏&#xff1a;Java设计模式、数据结构和算法、Kafka从入门到成神、Kafka从成神到升仙…

基于SpringBoot+Vue家乡特色推荐系统

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精…

【李老师云计算】HBase+Zookeeper部署及Maven访问(HBase集群实验)

索引 前言1. Zookeeper1.1 主机下载Zookeeper安装包1.2 主机解压Zookeeper1.3 ★解决解压后文件缺失1.4 主机配置Zookeeper文件1.4.1 配置zoo_sample.cfg文件1.4.2 配置/data/myid文件 1.5 主机传输Zookeeper文件到从机1.6 从机修改Zookeeper文件1.6.1 修改zoo.cfg文件1.6.2 修…

一文带你了解MySQL的前世今生,架构,组成部分,特点,适用场景

文章目录 一、MySQL的由来二、MySQL的架构2.1 客户端2.2 服务器 三、 MySQL的主要组成部分3.1 连接管理器3.2 查询缓存3.3 解析器3.4 查询优化器3.5 执行器3.6 存储引擎 四、MySQL的特点五、MySQL的应用场景六、总结 一、MySQL的由来 MySQL最初是由瑞典公司MySQL AB的Michael …

4年功能测试,我一进阶python接口自动化测试,跳槽拿了20k......

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 很多人在这求职市…

让ChatGPT告诉你Java的发展前景

Java版电商购物系统项目实战 最近很多人问我Java的发展前景怎么样&#xff1f;该怎么学Java基础&#xff1f;java这么卷还该不该学等等。那今天老王以电商场景为例&#xff0c;再结合ChatGPT的回答和大家聊的一下Java有哪些应用前景和技术层面的落地方案。&#xff08;在收获干…

【Spring】-- 02 -- Spring中Bean的配置、作用域

一、Bean的配置 Spring用于生产和管理Spring容器中的Bean&#xff0c;需要开发者对Spring的配置文件进行配置。在实际开发中&#xff0c;最常采用XML格式的配置方式&#xff0c;即通过XML文件来注册并管理Bean之间的依赖关系。 在Spring中&#xff0c;XML配置文件的根元素是…

iOS问题记录 - Xcode 14.3版本运行项目报错

文章目录 前言开发环境问题描述问题分析解决方案最后 前言 看到Xcode有新版本&#xff0c;没忍住点了升级&#xff0c;然后问题来了。 开发环境 macOS 13.3Xcode: 14.3 问题描述 Xcode 14.2版本运行项目一切正常&#xff0c;升级到14.3版本后运行报错。 运行到模拟器的报…

【PWN刷题__ret2text】——CTFHub之 简单的 ret2text

萌新第一阶段自然是了解做题的套路、流程&#xff0c;简单题要多做滴 目录 前言 一、checksec查看 二、IDA反汇编 三、exp编写 前言 经典的ret2text流程 一、checksec查看 64位程序&#xff0c;什么保护都没有&#xff0c;No canary found——可以栈溢出控制返回 二、IDA反汇…