首页 > 小程序教程 > 微信小程序生活类蓝色按钮手机号登录页面设计制作开发教程

微信小程序生活类蓝色按钮手机号登录页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序生活类蓝色按钮手机号登录页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/login/login.wxml-->
<view class="login-container">

  <view class="section-container">
    <view class="common-text">手机号</view>
    <input class="common-input" maxlength="11" type="number" data-type="phone" bindinput="bindKeyInput" placeholder="请输入手机号/互联网+服务账号" />
  </view>

  <view class="section-container">
    <view class="common-text" >密码</view>
    <input class="common-input" password type="text" data-type="pwd" bindinput="bindKeyInput" placeholder="请输入密码" />
  </view>

  <view class="btn-area">
        <button class="btn" type="default" style="background:#0164a6; color:white" bindtap="tapBtnLogin">登录</button>
      </view>
</view>
 
二、wxss样式文件代码如下:
/* pages/login/login.wxss */
.login-container {
   display: flex;
   flex-direction: column;
   background-color: #f5f5f9;
}

.section-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50px;
  margin-top: 8px;
  background-color: #fff;

}

.common-text {
  font-size: 15px;
  width: 20%;
  height: 100%;
  line-height: 100%;
  vertical-align: middle;
  margin: 16px 12px;
}
.common-input {
  width: 70%;
  font-size: 13px;
  height: 100%;
  
}

.btn-area {
  margin-top: 20px;
  margin-left: 5%;
  height: 50px;
  width: 90%;
  align-items: center;
}
三、js页面代码如下:
// pages/login/login.js

const config = require('../../config')
var util = require('../../utils/util.js')
var utilMd5 = require('../../utils/md5.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    nameValue: "", //用户名(登录手机号码)
    pwdValue: ""   //密码
  },
  bindKeyInput: function (e) {

    if (e.currentTarget.dataset.type == "phone") { //手机号码

      this.setData({ nameValue: e.detail.value })

      if (e.detail.value.length == 11) {
        // 收起键盘
        wx.hideKeyboard()
      }

    } else if (e.currentTarget.dataset.type == "pwd") { //密码

      this.setData({ pwdValue: e.detail.value })

    } else {

    }
  },
  /**  点击登录按钮 */
  tapBtnLogin: function (e) {

    let url = config.loginUrl

    var userName = this.data.nameValue;
    var pwd = this.data.pwdValue;

    if (!util.verificationUserName(userName)) {
      //wx.showToast({ title: '无效手机号', icon: 'loading' })
      wx.showModal({
        title: '',
        content: '无效手机号',
        showCancel: false,
      })
      return;
    }

    if (!util.verificationPwd(pwd)) {
      wx.showModal({
        title: '',
        content: '密码不符合规则',
        showCancel: false,
      })
      return;
    }

    /**
     登录
     
     @param userName 用户名
     @param passWord 密码
     @param Type 用户名类型 0-手机号;1-普通用户名
     @param res 成功
     @param fail 失败
     */
    var para = {
      "system": "02",
      "password": utilMd5.hexMD5(pwd),
      "userName": userName,
      "imei": "C75C7019-29FA-4F2B-8311-BAA6F29D1845",
      "currentVersion": "3.1.81",
      "model": "iPhone 5s (A1457/A1518/A1528/A1530)",
      "clientId": "HGP",
      "type": "0",
      "accessToken": "",
      "systemVersion": "10.3.2",
      "sig": ""
    }

    wx.showLoading({ title: '登录中...' })

    util.RequestManager(url, para, function (res, fail) {

      wx.hideLoading()

      if (res.code == "000000") {
        //成功 - 缓存用户信息
        //headImg token nickName userId userName
        wx.setStorage({
          key: "headImg",
          data: res.data.headImg
        })
        wx.setStorage({
          key: "token",
          data: res.data.token
        })
        wx.setStorage({
          key: "nickName",
          data: res.data.nickName
        })
        wx.setStorage({
          key: "userId",
          data: res.data.userId
        })

        wx.setStorage({
          key: "userName",
          data: res.data.userName
        })


        wx.navigateBack({
          delta: 1
        })
      } else {
        //失败
        wx.showModal({
          title: '',
          content: res.msg,
          showCancel: false,
        })
      }
    })

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

模板简介:该模板名称为【微信小程序生活类蓝色按钮手机号登录页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 30,166次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-25
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信公众平台 单页式简历模板 微信图片 企业网站 微信模板 微信素材 自适应 html5 微信文章 响应式
您可能会喜欢的其他模板