微信小程序登录注册页面

// 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;
}


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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python实现人脸识别检测, 对美女主播照片进行评分排名

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 素材、视频、代码、插件安装教程我都准备好了&#xff0c;直接在文末名片自取就可点击此处跳转 开发环境: Python 3.8 Pycharm 2021.2 模块使用&#xff1a; requests >>> pip install requests tqdm >…

如何利用WDM波分复用技术来扩展光纤容量?

文章导读&#xff1a; 如何利用WDM来扩展光纤容量&#xff1f; 什么是Mux合波和Demux分波&#xff1f; CWDM, DWDM, OADM 了解WDM的常用波段 WDM技术&#xff1a;TFF和AWG WDM-PON应用于接入网 WDM网络拓扑在5G传输中的应用 网络提供商一直面临着如何应对不断扩大的带宽需求&a…

【Pytorch】利用PyTorch实现图像识别

本文参加新星计划人工智能(Pytorch)赛道&#xff1a;https://bbs.csdn.net/topics/613989052 这是目录使用torchvision库的datasets类加载常用的数据集或自定义数据集使用torchvision库进行数据增强和变换&#xff0c;自定义自己的图像分类数据集并使用torchvision库加载它们使…

3月最新!AIGC公司生态地图;开发者实用ChatGPT工具清单;上手必会的SD绘图教程;字幕组全自动化流程大公开 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f916; 『光年之外诚邀产品经理加入』古典产品经理的复兴&#xff01; 光年之外创始人王慧文在社交平台发帖&#xff0c;公布联合创始人团队基…

【C语言初阶】循环语句

文章目录&#x1f490;专栏导读&#x1f490;文章导读&#x1f337;什么是循环&#x1f337;while循环&#x1f337;do while循环&#x1f337;for循环&#x1f337;循环结构中的break与continue&#x1f33a;break&#x1f33a;continue&#x1f337;goto语句&#x1f490;专栏…

5G将在五方面彻底改变制造业

想象一下这样一个未来&#xff0c;智能机器人通过在工厂车间重新配置自己&#xff0c;从多条生产线上组装产品。安全无人机处理着从监视入侵者到确认员工停车等繁琐的任务。自动驾驶汽车不仅可以在建筑物之间运输零部件&#xff0c;还可以在全国各地运输。工厂检查可以在千里之…

java基于SSH框架的超市管理系统mvc

目 录 1、引言 4 1.1 研究现状 4 1.2 主要研究的目的及内容 5 1.3 研究方法及设计思路 5 1.3.1 研究方法 5 1.3.2 设计思路 6 2、应用需求分析与可行性分析 6 2.1 应用需求分析 7 2.2 运行需求分析 8 2.3 其他需求分析 8 2.4 可行性分析 8 2.…

SpringBoot实战(十三)集成 Admin

目录一、简介二、搭建 springboot-admin 管理服务1.Maven 依赖2.application.yml3.添加 EnableAdminServer4.启动服务&#xff0c;查看页面三、搭建 springboot-admin-client 客户端服务1.Maven 依赖2.application.yml3.启动服务&#xff0c;查看页面四、搭配 Eureka 使用1.搭建…

二叉树的顺序存储与手撕数据结构—堆

TIPS树的话是一种非线性的数据结构&#xff0c;他实际上就是具有一定层次关系的数据集合&#xff0c;并且在树形结构当中&#xff0c;子树之间不能有任何的交集&#xff0c;否则就不是树形结构。然后对于树而言的话&#xff0c;在实际应用当中并不是特别多&#xff0c;在实际应…

Linux防火墙——SNAT、DNAT

目录 NAT 一、SNAT策略及作用 1、概述 SNAT应用环境 SNAT原理 SNAT转换前提条件 1、临时打开 2、永久打开 3、SNAT转换1&#xff1a;固定的公网IP地址 4、SNAT转换2&#xff1a;非固定的公网IP地址&#xff08;共享动态IP地址&#xff09; 二、SNAT实验 配置web服务…

力扣-银行账户概要 II

大家好&#xff0c;我是空空star&#xff0c;本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目&#xff1a;1587. 银行账户概要 II二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果前言 …

css总结12(盒子模型外篇)

前言 主要补充一下和盒子模型相关的一些样式属性&#xff1a;box-sizing、resize和outline box-sizing 可选值 ## (1) content-box 默认值&#xff0c;内容盒子&#xff0c;盒子的大小会随着内容(盒子模型的content)尺寸的变化而变化 ## (2) border-box边框盒子&#xff0c;与…

leetcode究极刷题笔记(16~20)

&#xff08;16&#xff09;最接近的三数之和&#xff08;中等&#xff09; 实现思路&#xff1a; 本题与前文讲的三数之和有相同之处&#xff0c;但是本题求的是最接近的三数之和&#xff0c;所以我们这里可以使用键值对来映射对应的差值与值的关系&#xff0c;从而达到目的。…

系统集成路由器OSPF动态、综合路由配置

实验任务&#xff1a;动态路由协议RIP、OSPF协议的内容和特点动态路由RIP、OSPF实验&#xff0c;建立拓扑pc1>>R1>>R2>>R3>>pc2&#xff0c;使pc1与pc2能相互通信&#xff0c;并配置PC端静默接口。熟悉配置vlan间路由技术&#xff1a;多层交换机虚拟接…

JavaScript到底如何存储数据?

1.var的迷幻操作 普遍的观点&#xff1a;JavaScript中的基本数据类型是保存在栈空间&#xff0c;而引用数据类型则是保存在堆空间里, 是否正确&#xff1f; 浏览器环境下JavaScript变量类型的运行实践结果: var a 10;console.log(a);console.log(window.a); console.log(wind…

【云原生】Linux进程控制(进程程序替换)

✨个人主页&#xff1a; Yohifo &#x1f389;所属专栏&#xff1a; Linux学习之旅 &#x1f38a;每篇一句&#xff1a; 图片来源 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 Good judgment comes from experience, and a lot of that comes from bad jud…

keepalived配置使用

keepalived安装tar -zxvf ***yum install -y gcc gcc-c wget popt-devel openssl openssl-devel yum install -y libnl libnl-devel libnl3 libnl3-devel yum install -y libnfnetlink-devel ./configure --sysconf/etc make make installmaster1 编辑keepalived的配置文件keep…

【C++】科普:C++中的浮点数怎么在计算机中表示?

这里我们以8.25这个数为例说明计算机时如何存取float类型的数据的&#xff1a; float a 8.25;引言 1. 所占位数 首先&#xff0c;明确一个概念&#xff0c;float类型的数据在常规计算机中通常占4个字节&#xff0c;也就是32位。其内存分布如图&#xff1a; 位字段说明所占位…

【pytorch源码剖析系列】优化器

写在前言&#xff1a;pyotrch优化器从源码的角度带你理解优化器的由来&#xff0c;实现&#xff0c;作用。pytorch的优化器&#xff1a;管理并更新模型中可学习参数的值&#xff0c;使得模型输出更接近真是标签。导数&#xff1a;函数在指定坐标轴上的变化率方向导数&#xff1…

ChatGPT来了你慌了吗?

文章目录一、ChatGPT是什么&#xff1f;一、ChatGPT到底多强大&#xff1f;三、各平台集成了ChatGPT插件&#xff1a;四、ChatGPT能否取代程序员&#xff1f;一、ChatGPT是什么&#xff1f; ChatGPT&#xff08;全名&#xff1a;Chat Generative Pre-trained Transformer&…