1. Toy模板网首页
  2. > Toy博客

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

7月前 作者：无名joker 分类：Toy博客 阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序登录与注册（没有连接数据库）（2023年3月31日）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

一、登陆

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

(2) 在app.json文件里添加"pages/login/login",“pages/mobile/mobile”,
“pages/company/company” 3个文件目录，并删除默认的文件目录以及相应的文件夹，如图
所示。
微信小程序登录与注册（没有连接数据库）（2023年3月31日）
(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;
}

运行效果如下图所示：
微信小程序登录与注册（没有连接数据库）（2023年3月31日）
(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;
}

运行效果如下：
微信小程序登录与注册（没有连接数据库）（2023年3月31日）
(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 });
    }
  },

运行结果如下：
微信小程序登录与注册（没有连接数据库）（2023年3月31日）

二、手机号注册设计

在手机号注册里，需要设计输入框用来输入手机号，设计同意注册协议以及下一步按钮，如图所
示。
微信小程序登录与注册（没有连接数据库）（2023年3月31日）
示例代码
(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;
}

运行结果如下所示：
微信小程序登录与注册（没有连接数据库）（2023年3月31日）
(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;
}

运行效果如下：
微信小程序登录与注册（没有连接数据库）（2023年3月31日）
(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: "" });
    }
  },

运行结果如下：
微信小程序登录与注册（没有连接数据库）（2023年3月31日）
(6) 在mobile.json文件里，添加“navigationBarTitleText”这个属性，设置导航标题为手机快速
注册，代码如下所示：

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

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

未完

企业用户注册设计未上传，待续。有问题大家可以尽管提出，谢谢大家。文章来源地址https://www.toymoban.com/news/detail-482498.html

到了这里，关于微信小程序登录与注册（没有连接数据库）（2023年3月31日）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Node.js连接数据库 实现注册、登录、判断注册

    Node.js连接数据库 实现注册、登录、判断注册

    Node.js连接数据库实现注册，登录，在登录时检测账号是否进行注册。 此创建文件夹可以不是使用Vue-cli进行创建，只是简单创建文件夹便可。 使用npm进行mysql插件的安装,cmd黑窗口运行下列指令 此指令运行完成，文件夹根目录出现 node_modules 文件 黑窗口运行 npm init 指令，出现

    2024年02月09日
    浏览(40)
  • 微信小程序连接数据库与WXS的使用

    微信小程序连接数据库与WXS的使用

      🎉🎉欢迎来到我的CSDN主页！🎉🎉 🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《 微信小程序开发实战 》。🎯🎯 👉点击这里，就可以查看我的主页啦！👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧！🎁🎁 💖期待

    2024年02月08日
    浏览(38)

  • 微信小程序登录注册页面代码

    以下是一个简单的微信小程序注册登录页面的代码示例： 上面代码中，index.wxml 文件定义了注册页面的视图，包括用户名、密码、确认密码的输入框以及提交按钮和一个跳转到登录页面的链接。index.js 文件定义了注册页面的逻辑，当用户点击提交按钮时会发送注册请求，并根

    2024年02月11日
    浏览(29)
  • MVC框架实现用户登录注册功能（连接数据库）

    MVC框架实现用户登录注册功能（连接数据库）

    一、简单理解MVC框架 二、项目结构 三、项目源码 3.1 User 3.2 UserDao 3.3 RegisterDao 3.4 servletControll 3.5 servletControllRegister 3.6 web.xml 3.7 login.jsp 3.8 register.jsp 3.9 success.jsp 3.10 failure.jsp  四、实现效果 总结 本篇文章主要介绍利用MVC框架去实现一个简单的用户登录注册功能，内容主

    2024年02月06日
    浏览(43)

  • Flutter框架实现登录注册功能，不连接数据库

    要在Flutter框架中实现登录和注册功能，而不连接数据库，可以使用本地存储来存储用户信息。以下是一个简单的示例，演示如何使用本地存储来实现登录和注册功能。 首先，我们需要添加 shared_preferences 插件到 pubspec.yaml 文件中： 然后，在 lib 文件夹中创建一个新的文件夹

    2024年02月08日
    浏览(33)

  • 微信小程序——登录注册的简单实现

    首先在微信开发者工具中创建一个登录注册界面，代码如下： longin.wxml部分： longin.wxss部分： longin.js部分： 接下来是注册界面 register.wxml部分： register.wxss部分： register.js部分： 后端部分： 需在navicat中创建user表，在idea中创建User类

    2024年02月11日
    浏览(34)
  • JavaWeb实现简易的注册登录功能（与数据库连接）

    JavaWeb实现简易的注册登录功能（与数据库连接）

    一、创建数据库表连接 这里我们创建一个数据库名为db_user，创建库的使用可视化工具很简单就不细说了，下面sql代码块是我们创建一个简易用户表为了方便我们后续进行登录注册操作。 下面就是建好的表： 1、建一个与数据库连接的file文件:db.properties 二、创建前端页面 1、

    2024年01月19日
    浏览(36)
  • 微信小程序实现登录授权，并将获取到的用户授权信息存储到数据库中

    微信小程序实现登录授权，并将获取到的用户授权信息存储到数据库中

    官方开发文档 注意：在实现授权登录时，不要使用测试号进行 wx.getUserProfile使用文档 config文件代码如下 路由模块 主要代码（如果不想多个文件，可以将wxuserHandle.wxuser这个位置内容替换为exports.wxuser的内容） 注意： 在返回token的字符串拼接时，Bearer 后面必须有一个空格 数据

    2024年02月10日
    浏览(42)
  • java连接数据库实现登录与注册小功能(小白版)

    java连接数据库实现登录与注册小功能(小白版)

    准备工作: 创建数据库stu;        create database stu charset=utf8; 使用数据库stu;            use stu; 创建用户表user(id,username,password,nick) create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50));   1.开始创建springboot工程,勾选Web-spring Web,  SQL-MyBatis Frame

    2024年02月08日
    浏览(32)
  • 微信小程序——如何实现账号的注册、登录？

    微信小程序——如何实现账号的注册、登录？

    用到的数据库表： 用户表：chat-user，用于存放用户的基本信息，比如账号、密码、头像等等 用户的注册 1.先获取用户信息 使用wx.getUserProfile接口，获取用户的基本信息 可以与一个事件进行绑定。 2.用户输入账号密码，把基本信息添加到数据库chat-user中 完成这一步，用户的基

    2024年02月09日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包