二、简单的登陆实现（非授权登录）

新建文件夹

文件夹内新建js、wxss等文件

进入login.wxml界面

<view class="box"><view class="titleText">微信登录页面</view><view class="input"><view class="inputs"><view class="user">用户名:<input class="username" type="text" placeholder="请输入用户名" placeholder-style="color:blue" bindinput="name" maxlength="10"></input></view><view class="pwd">密码:<input class="password" type="password" placeholder="请输入密码" placeholder-style="color:blue" bindinput="pw" maxlength="10"></input></view></view></view><button bindtap="login">登录</button>
</view>

进入login.wxss

样式就自由发挥啦（wxss）

进入login.js

var app = getApp()
Page({data: {username:'',password:'',users:[],},//options(Object)onLoad: function(options){},name(e){this.data.username = e.detail.value;},pw(e){this.data.password = e.detail.value;},login(){var that = thisif (that.data.username === "") {wx.showToast({title: '请输入用户名',icon: 'none',duration: 1500,});} else if (that.data.password === ""){wx.showToast({title: '请输入密码',icon: 'none',duration: 1500,});} else{wx.request({url: 'http://localhost:8055/user/login',//接入自己的接口data: {password:this.data.password,username:this.data.username},header: {"Content-Type": "application/x-www-form-urlencoded"},success: (result)=>{if (result.data.code === 200){wx.reLaunch({url: '../index/index'//成功跳到主页})wx.showToast({title: "登录成功",icon: 'success',duration: 1500,});} else if (result.data.code === 0){wx.showToast({title: result.data.msg,icon: 'none',duration: 1500,});} else{wx.showToast({title: '登陆失败',icon: 'error',duration: 1500,});}},fail: ()=>{wx.showToast({title: '网络错误',icon: 'error',duration: 1500,});},});}}}})

进入json

{"usingComponents": {},"navigationBarTitleText": "登录"
}

进入app.json

{"pages": ["pages/login/login","pages/index/index","pages/logs/logs"],}

将登录页面login加入pages中

简单的登录页面就完成啦！

效果图

微信小程序开发（2）—— 简单的页面登陆实现相关推荐

自学微信小程序开发第五天- 页面切换相关
自学微信小程序开发第五天- 页面切换相关创建多个页面页面间跳转页面间传值另一个页面跳转的方式(重定向) 点击跳转元素时的样式导航API 研究过页面样式设计后,就是多页面的呈现了,这就需要研究 ...
Python+微信小程序开发（四）页面跳转和获取用户信息
上一篇已经介绍了如何搭建一个自己的静态页面,接下来则涉及到一些用户信息获取与跳转的操作. 一.页面跳转首先新建一个跳转页面,按上篇的操作生成pages/redirect/redirect. 1.对标 ...
微信小程序开发：简单列表界面的实现
最近,想了解下微信小程序的开发. 看了下官网的组件和API介绍,想通过一个简单的列表展示,来学习下如何开发微信小程序. 先来看下最后的效果(使用的测试数据,后期可改为http请求返回的数据). 底部的 ...
【零基础】学会微信小程序开发-实现第一个页面
上一篇我们了解了微信小程序代码结构组成,本篇文章,我们将要开始进行小程序的真正开发工作,Let's go! ##第一个页面让我们来创建第一个页面右键单击 pages 目录,在弹出来的菜单里,选择 ...
微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
微信小程序开发使用onreachBottom实现页面触底加载及分页
目录一简要介绍一下onreachBottom事件二实例展示三遇到的一些问题一简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样, ...
微信小程序开发一个简单的摇骰子游戏
页面代码 <view class='top'>{{txt}}</view> <view class='point1'><image src='{{one_im ...
微信小程序开发之侧边栏与页面分开滑动
需要用到视图容器组件scroll-view,使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height. wxml代码如下: <view class=" ...
学习笔记（1):微信小程序开发实战-计算器实战页面布局
立即学习:https://edu.csdn.net/course/play/3011/49695?utm_source=blogtoedu 20200701晚,学到12min
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...

微信小程序开发（2）—— 简单的页面登陆实现

微信小程序开发（2）

二、简单的登陆实现（非授权登录）

新建文件夹

进入login.wxml界面

进入login.wxss

进入login.js

进入json

进入app.json

效果图

微信小程序开发（2）—— 简单的页面登陆实现相关推荐

最新文章

热门文章