微信小程序登录与注册（没有连接数据库）（2023年3月31日）

最新推荐文章于 2023-12-24 09:56:57 发布
最新推荐文章于 2023-12-24 09:56:57 发布
阅读量1.6k 收藏 19
点赞数 4
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52992084/article/details/129885468
版权

微信小程序登录与注册（没有连接数据库）

提示：以下是本篇文章正文内容，下面案例可供参考

一、登陆

在登录表单里，输入账号、密码进行登录，在账号、密码输入框里都有友好的提示信息；登录按钮
默认是灰色不可用状态，只有输入内容后，才会变为可用状态；在登录按钮的下面提供手机快速注
册、企业用户注册、找回密码链接；界面最下面是微信、QQ第三方登录方式，如图所示。
在这里插入图片描述
示例代码
(1) 创建一个form项目，填写AppID，后端服务选择“不使用云服务”，如图所示，并在pages同
目录下创建一个images目录，用于保存项目中需要用到的图片。

(2) 在app.json文件里添加"pages/login/login",“pages/mobile/mobile”,
“pages/company/company” 3个文件目录，并删除默认的文件目录以及相应的文件夹，如图
所示。
在这里插入图片描述
(3) 在“pages/login/login.wxml”文件里，进行账号密码输入框布局设计，代码如下所示。

<!--pages/login/login.wxml-->
<view class="content">
  <view class="account">
      <view class="title">账号</view>
      <view class="num">
          <input type="text" bindinput="nameInput" placeholder="账号/邮箱/手机号" placeholder-style="color:#999;" />
        </view>
  </view>
  <view class="hr"></view>
  <view class="account">
      <view class="title">密码</view>
      <view class="num">
          <input type="password" bindblur="passwordBlur" placeholder="请输入密
码" placeholder-style="color:#999;" />
        </view>
      <view class="see">
         
      <image src="/images/see.jpg" style="width: 42px; height:32px;" />
       
    </view>
  </view>
  <view class="hr"></view>
</view>

(4) 在“pages/login/login.wxss”文件中添加相应的样式，代码如下所示：

/* pages/login/login.wxss */
.content {
  margin-top: 20px;
}

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

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

.num {
  margin: 10px;
}

.hr {
  height: 1px;
  width: 90%;
  background-color: #ccc;
  opacity: 0.2;
}

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

运行效果如下图所示：
在这里插入图片描述
(5) 在“pages/login/login.wxml”文件里，进行登录按钮、手机快速注册、企业用户注册、找回
密码以及第三方登录布局的设计，代码如下:

<!--pages/login/login.wxml-->
<view class="content">
  <view class="account">
    <view class="title">账号</view>
      <view class="num">
      <input type="text" bindinput="nameInput" placeholder="账号/邮箱/手机号" placeholder-style="color:#999;" />
       
    </view>
  </view>
  <view class="hr"></view>
  <view class="account">
      <view class="title">密码</view>
      <view class="num">
          <input type="password" bindblur="passwordBlur" placeholder="请输入密码" placeholder-style="color:#999;" />
        </view>
      <view class="see">
         
      <image src="/images/see.jpg" style="width: 42px; height:32px;" />
       
    </view>
  </view>
  <view class="hr"></view>
  <button class="btn" disabled="{{disabled}}" type="{{btnType}}" bindtap="login">登录</button>
  <view class="operate">
      <view>
          <navigator url="../mobile/mobile">手机快速注册</navigator>
        </view>
      <view>
          <navigator url="../company/company">企业用户注册</navigator>
        </view>
  </view>
  <view class="login">
      <view>
          <image src="/images/wxlogin.jpg" style="width:70px;height:98px;">
      </image>
        </view>
      <view>
          <image src="/images/qqlogin.jpg" style="width:70px;height:98px;">
      </image>
        </view>
  </view>
</view>

(6) 在“pages/login/login.wxss”文件里添加对应的样式，代码如下：

/* pages/login/login.wxss */
.content {
  margin-top: 20px;
}

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

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

.num {
  margin: 10px;
}

.hr {
  height: 1px;
  width: 90%;
  background-color: #ccc;
  opacity: 0.2;
}

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

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

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

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

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

.login view {
  margin: 0 auto;
}

运行效果如下：
在这里插入图片描述
(7) 在“pages/login/login.js”文件中添加nameInput、passwordBlur事件函数，当账号里输入
内容后，登录按钮变为可用状态，代码如下所示:

/**
   * 页面的初始数据
   */
  data: {
    disabled: true,
    btnType: "default",
    name: "",
    password: ""
  },


  //输入账户触发的事件
  nameInput(e) {
    var account = e.detail.value; //获取账号的值
    if (account != "") {
      this.setData({ disabled: false, btnType: "primary", name: account });
    }
  },

  //输入密码触发的事件
  passwordBlur(e) {
    var pwd = e.detail.value;
    if (pwd != "") {
      this.setData({ password: pwd });
    }
  },

运行结果如下：
在这里插入图片描述

二、手机号注册设计

在手机号注册里，需要设计输入框用来输入手机号，设计同意注册协议以及下一步按钮，如图所
示。
在这里插入图片描述
示例代码
(1) 在“pages/mobile/mobile.wxml”文件里，进行手机号输入框布局设计，代码如下所示。

<view class="content">
  <view class="hr"></view>
  <view class="numbg">
      <view>+86</view>
      <view><input placeholder="请输入手机号" maxlength="11" bindblur="mobileblur" /></view>
  </view>
</view>

(2) 在“pages/mobile/mobile.wxss”文件里添加相应的样式，代码如下所示。

.content {
  width: 100%;
  height: 600px;
  background-color: #f2f2f2;
}

.hr {
  padding-top: 20px;
}

.numbg {
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 50px;
  border: 1pxsolid#cccccc;
  border-radius: 5px;
  margin: 0 auto;
  background-color: #ffffff;
}

.numbg view {
  margin-left: 20px;
  margin-top: 14px;
}

运行结果如下所示：
在这里插入图片描述
(3) 在“pages/mobile/mobile.wxml”文件里，设计注册协议和下一步按钮操作，代码如下所
示。

<!--pages/mobile/mobile.wxml-->
<view class="content">
  <view class="hr"></view>
  <view class="numbg">
      <view>+86</view>
      <view><input placeholder="请输入手机号" maxlength="11" bindblur="mobileblur" /></view>
  </view>
  <view class="xieyi">
        <icon type="success" color="red" size="18"></icon>
        <text class="agree">同意</text>
        <text class="opinion">京东用户注册协议</text>
      </view>
</view>
<view>
  <button class="btn" disabled="{{disabled}}" type="{{btnType}}" bindtap="login">下一步</button>
</view>

(4) 在“pages/mobile/mobile.wxss”文件里添加相应的样式，代码如下所示。

/* pages/mobile/mobile.wxss */
.content {
  width: 100%;
  height: 600px;
  background-color: #f2f2f2;
}

.hr {
  padding-top: 20px;
}

.numbg {
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 50px;
  border: 1pxsolid#cccccc;
  border-radius: 5px;
  margin: 0 auto;
  background-color: #ffffff;
}

.numbg view {
  margin-left: 20px;
  margin-top: 14px;
}

.xieyi {
  margin-top: 15px;
  margin-left: 15px;
}

.agree {
  font-size: 13px;
  margin-left: 5px;
  color: #666666;
}

.opinion {
  font-size: 13px;
  color: #000000;
  font-weight: bold;
}

.btn {
  width: 90%;
  margin-top: 30px;
}

运行效果如下：
在这里插入图片描述
(5) 在“pages/mobile/mobile.js”文件里，添加mobileblur事件，如果输入手机号，下一步按
钮变为可用状态，代码如下所示。

/**
   * 页面的初始数据
   */
  data: {
    disabled: true,
    btnType: "default",
    mobile: ""
  },


  //当输入手机号结束以后，失去焦点时触发的事件。
  mobileblur(e) {
    var phone = e.detail.value;
    if (phone != "") { //当完成输入时，“下一步”可用
      this.setData({ disabled: false, btnType: "primary", mobile: phone });
    } else {
      this.setData({ disabled: true, btnType: "default", mobile: "" });
    }
  },

运行结果如下：
在这里插入图片描述
(6) 在mobile.json文件里，添加“navigationBarTitleText”这个属性，设置导航标题为手机快速
注册，代码如下所示：

{
"navigationBarTitleText":"手机快速注册"
}

在这里插入图片描述

未完

企业用户注册设计未上传，待续。有问题大家可以尽管提出，谢谢大家。

无名joker
关注
  • 4
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
微信小程序登录注册界面代码，包含当前界面的所有源码，使用手机验证码注册或账号登录
04-21
在微信小程序中，创建一个既能实现登录又能进行注册的界面是一项常见的需求。本文将通过分析提供的标题、描述和部分源代码，深入讲解如何构建这样一个高效且简洁的登录注册界面。 首先，从WXML（微信小程序的标记...
实现注册与登录（企业级）
chengbo_eva的博客
06-23 1547
实现注册与登录（企业级）
微信小程序开发之注册登录
duke_ding2的博客
06-17 5587
微信小程序开发之注册登录
微信小程序之———登录注册！
perry
02-07 3万+
好了，我觉得有必要对前一阶段的小程序开发过程中的一些经验写出来，总结一下，今天呢，就来总结一下小程序登录注册相关的流程和开发过程中需要注意的问题，好了，废话不多说，开始咯！ 一：登录 思路： 当用户在未登录状态下点击“登录”按钮之后，执行login函数，先用wx.login获取登录凭证code，encryptedData和iv， 然后把这三个参数发送过去，取回来is
微信小程序（无数据库）实现发布功能，跨页面获取数据
qq_54147492的博客
05-25 458
功能描述：输入内容，点击发布，实现在首页发布逻辑：在app.js中定义全局变量，再在发布界面的js中调用并进行插入，即对全局变量进行修改，首页刷新即可获取新加入的变量，从而实现发布帖子。
微信小程序登录步骤
A12536365214的博客
12-24 656
将获取到的 `code` 发送到你的后台服务器，后台服务器使用 `code` 向微信服务器换取用户的 `openId` 和 `sessionKey`。使用 `wx.login` 获取登录凭证，然后使用 `wx.getUserInfo` 获取用户信息。微信小程序的用户登录通常使用微信提供的开放能力，包括微信登录、获取用户信息等功能。在小程序中，你可以通过 `wx.getUserInfo` 获取用户的头像、昵称等信息，并进行相应的展示和业务逻辑。在小程序的页面中，添加一个按钮，用于触发登录操作。
微信小程序——如何实现账号的注册、登录？
qq_54462755的博客
06-07 8240
微信小程序——如何实现账号的注册、登录？
基于微信小程序的点餐系统源码+数据库
最新发布
06-14
基于微信小程序的点餐系统源码+数据库基于微信小程序的点餐系统源码+数据库基于微信小程序的点餐系统源码+数据库基于微信小程序的点餐系统源码+数据库基于微信小程序的点餐系统源码+数据库基于微信小程序的点餐系统...
微信小程序云开发之使用云数据库
11-28
本节将深入探讨如何在微信小程序中使用云数据库，结合云存储实现高效的数据管理。 首先，我们要理解云数据库的核心作用。数据库是应用程序中存储、管理和检索数据的关键组件，尤其对于前端界面展示的内容来说更是...
基于微信小程序的个人博客平台+数据库（附源码）.zip
02-01
基于微信小程序的个人博客平台+数据库（附源码）.zip WeHalo 是配合 Halo 轻快，简洁，功能强大的博客系统而开发出来的简约风 微信小程序版博客。 下载下来之后，即可使用，可根据个人的需求，进行一些修改，即可...
微信小程序期末大作业-点奶茶微信小程序源码+数据库（高分项目）
06-12
微信小程序期末大作业-点奶茶微信小程序源码+数据库（高分项目）高分项目期末大作业开发的97分高分设计项目，可作为高分课程设计和期末大作业的参考，含有代码注释小白也可看的懂，有能力的小伙伴也可以在此基础上...
微信小程序——登录注册的简单实现
m0_64813192的博客
03-17 6501
微信小程序——登录注册的简单实现
小程序实战（2） | 用户注册界面搭建
ic2121的博客
03-11 730
之前讲了一些关于小程序、服务器、外部UI调用、云函数使用、数据库搭建，环境配置等**，在这里进行小程序的项目实战，来搭建一下用户注册界面，​这样可以加深巩固一下学习过的内容。我们先在word中进行编辑，当然也可以用其它的工具进行页面设计，这里方便起见，老刘在word中画了一个草图，包含以下信息​：用户名、密码、确认密码、身份*号、手机号、疫苗接种次数、以及确认注册和取消注册的按钮​。键逻辑，判断两次输入的密码是否相同，如果相同，添加到数据库中，如果不相同，​提示注册不成功。运行一下，可以查看效果。
微信小程序登录注册功能(超详细)
m0_53912016的博客
03-26 7939
一键登录 类似于这种效果图 PS 这个点击的效果必须是button 必须是button 代码 wxml <!--miniprogram/pages/login/login.wxml--> <button bindgetuserinfo='login' open-type='getUserInfo' type='primary'>一键登录</button> js login:function(res){ if(res.detail.errMsg == "ge
微信小程序原生开发功能合集十四：登录健权及注册功能实现
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
05-12 358
本章实现微信自动登录及注册修改功能，包括匿名账号生成、权限自动检测、注册界面及注册流程的实现。
微信小程序开发(第一天)-注册新建项目以及登录页面获取用户信息
梁白开的博客
09-04 263
微信小程序开发第一天，主要介绍小程序注册新建项目等信息
微信小程序云数据库实现注册
kkshuaicc的博客
04-14 2660
微信小程序自带的云数据库的优势在于，不用搭建服务器和后端就可以直接调用数据库 我们接下来使用云数据库实现注册功能，效果图如下 云数据库结构如下： 这是用云数据库实现注册功能，实现代码如下，： register.wxml <view class="page"> <view class="zhuce">注册</view&g...
微信小程序简洁登录页面和注册页面（附源码）
热门推荐
code袁的博客
12-01 6万+
微信小程序登录页面和注册页面的代码
"微信小程序食疗设计与实现源码数据库论文
本论文旨在探讨微信小程序食疗的设计与实现，包括源码数据库方面的详细讨论。本论文主要内容包括以下几个部分：课题背景及意义、相关技术介绍、系统架构设计、数据库设计与实现、系统功能实现、系统测试与性能分析、...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无名joker

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值