微信小程序不用云开发可以使用mongodb吗 微信小程序不用数据库

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

• 一、登陆
• 二、手机号注册设计
• 未完

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

一、登陆

在登录表单里，输入账号、密码进行登录，在账号、密码输入框里都有友好的提示信息；登录按钮

默认是灰色不可用状态，只有输入内容后，才会变为可用状态；在登录按钮的下面提供手机快速注

册、企业用户注册、找回密码链接；界面最下面是微信、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":"手机快速注册"
}

未完

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