微信小程序实现登录注册功能

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

html：

<form bindsubmit="handleSubmit" wx:if="{{ onoff }}">
 用户名： <input type="text" name='username'/>
 密码： <input type="password" name='password'/>
 手机号： <input type="text" name='phone'/>
 <button form-type="submit"> 注册 </button>
</form>

<form bindsubmit="handleLogin" wx:else>
 用户名： <input type="text" name='username'/>
 密码： <input type="password" name='password'/>
 <button form-type="submit"> 登录 </button>
</form>

js:

// pages/login/login.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 onoff: false
 },
 handleSubmit(e){
 const {value} = e.detail;
 // console.log(value)
 const that = this;
 wx.request({
 url: 'http://pddapi.h5sm.com/index/pdduser/getpddregister',
 method: 'post',
 data: value,
 success(res){
 if(res.data.status == 1){
  that.setData({
  onoff: false
  })
 }
 }
 })
 },

 handleLogin(e){
 const {username, password} = e.detail.value;

 const that = this;
 wx.request({
 url: 'http://pddapi.h5sm.com/index/pdduser/getpddlogin',
 method: 'post',
 data:{
 username, password
 },
 success(res){
  console.log(res)
 }
 })
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

效果图：

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

赞 (0)

相关推荐

  • 微信小程序登录态和检验注册过没的app.js写法

    0.可参考的官方页面 获取登录凭证:https://developers.weixin.qq.com/miniprogram/dev/api/wx.login.html 检查登录态是否过期: https://developers.weixin.qq.com/miniprogram/dev/api/wx.checkSession.html 备注:你要明白什么是登录态:这里的登录态是微信小程序自己的登录态,我们可以再自己写个登录页面作为自己的登录态,不过为了用户体验良好我直接以微信登录态做为自己的登

  • 微信小程序实现登录注册tab切换效果

    微信小程序实现登录注册tab切换效果

    利用三元运算符实现登录注册效果切换,供大家参考,具体内容如下 直接上代码 wxml: <view class='top'> <text class="{{login?'active':''}}" catchtap='login'>登录</text> <text class="{{login?'':'active'}}" catchtap='register'>注册</text> </view>

  • 微信小程序+云开发实现欢迎登录注册

    前段时间和同学一起做了一个小程序,用来参加学校的比赛,完成后把项目内容分割一下,贴到博客上面,算是学习记录和总结吧. 因为是学生党,而且并没有很大的需要,所以选择了微信小程序为开发者提供的"云开发"选项. 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 按照微信的说法: 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并

  • 微信小程序实现注册登录功能(表单校验、错误提示)

    微信小程序实现注册登录功能(表单校验、错误提示)

    口说无凭,实现效果如下 前端 部分 注册功能 1.wxml文件 <view> <view class="frm"> <view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;"> <view class="ui-col ui-col-border-right

  • 详解微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）

    (一) 准备工作 (1) 登录注册 注册账号:这就不谈了,只需要注意使用一个全新的邮箱,别之前注册过公众号小程序等就可以了 https://mp.weixin.qq.com/wxopen/waregister?action=step1 登录账号:通过邮箱密码登录,亦或者绑定微信后使用扫码也是可以的 https://mp.weixin.qq.com/ (2) 获取 APPID 登录后,在开发入门的阶段有一个比较重要的内容需要了解,那就是 APPID,很好理解,就是这个小程序的唯一标识,就类似我们的

  • 微信小程序实现登录注册功能

    微信小程序实现登录注册功能

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

  • Django实现微信小程序的登录验证功能并维护登录态

    这次自己做了一个小程序来玩,在登录方面一直有些模糊,网上看了很多文档后,得出以下一种解决方案. 环境说明: 1.小程序只需要拿到openid,其他信息不存储. 2.Django自带的User类不适合. 具体操作流程: 1.用户点进小程序,就调用wx.login()获取临时登录凭证code, wx.login()用户是无感知的, 2.通过wx.request()将code传到开发者服务器的后台程序, 3.后台拿到code之后,调用微信提供的接口,获取openid和session_key, 4.后台

  • 如何基于uni-app实现微信小程序一键登录与退出登录功能

    目录 起因 总体思路 详细流程 总结 起因 目前正在使用uni-app开发一个微信小程序,开发到登录模块时通过查阅uni-app官方教程.微信小程序官方文档.网上的教程终于是实现了微信小程序的登录模块,现总结分享给大家,共同学习. 总体思路 创建Vuex进行状态管理(可根据实际需求自行选择是否使用) 创建一个登录按钮并添加触发事件 调用官方uni.getUserProfile() 接口获取用户信息 调用官方uni.login() 接口获取临时登录凭证code 调用后端的登录接口将code 传过去

  • 微信小程序实现的涂鸦功能示例【附源码下载】

    微信小程序实现的涂鸦功能示例【附源码下载】

    本文实例讲述了微信小程序实现的涂鸦功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 布局文件index.wxml: <view class="container"> <!--画布区域--> <view class="canvas_area"> <!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作--> &

  • 基于PHP实现微信小程序客服消息功能

    项目说明: 本项目是一个简单微信小程序客服消息类,实现客服消息相关功能.官方给的php示例有误,这里就不再吐槽了. 本示例是采用开发者服务器,没有采用云调用的形式. 官方文档: 客服消息指南 客服消息服务端 适用场景 客户消息流程图 使用步骤 1.开启客服消息 https://mp.weixin.qq.com/wxam... 登录-开发-开发设置-消息推送 []( https://raw.githubusercontent... 点击"启动" []( https://raw.githu

  • 微信小程序用户登录和登录态维护的实现

    微信小程序用户登录和登录态维护的实现

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

  • 微信小程序授权登录的优雅处理方式

    微信小程序授权登录的优雅处理方式

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

  • 微信小程序实现登录界面

    微信小程序实现登录界面

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

  • uni-app 微信小程序授权登录的实现步骤

    uni-app 微信小程序授权登录的实现步骤

    目录 一.appID相关申请和配置 1. appid获取方式 2. appID配置 二.获取用户基础数据 2.1. 获取用户信息 2.2. 获取用户信息2 三.调用登录api 3.1. 登录api 3.2. 案例代码 四.获取唯一标识信息 4.1. 官网文档 4.2. 接口简述 五.绑定用户 实现登录 5.1. 代码案例(未封装) 5.2. 代码案例(封装) 六.项目开源地址 6.1. 前端 6.2. 后端 一.appID相关申请和配置 1. appid获取方式 登录微信公众平台 官网链接:ht

随机推荐