devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序实现登录功能_wxlogin ts声明

作者：小丑西瓜9 | 2024-02-22 22:56:22

赞

踩

wxlogin ts声明

一、效果

二、代码

 a、 login.json文件

  1. {
  2.   "usingComponents": {},
  3.   "navigationBarBackgroundColor": "#F2F2F2",
  4.   "navigationBarTextStyle": "black",
  5.   "navigationBarTitleText": "登录",
  6.   "backgroundColor": "#eeeeee",
  7.   "backgroundTextStyle": "light",
  8.   "navigationStyle": "custom"
  9. }

b 、login.ts文件

  1. // pages/login/login.ts
  2. Page({
  3.  
  4.   /**
  5.    * {
  6.     "code": 200,
  7.     "msg": null,
  8.     "data": {
  9.         "access_token": "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjo5ODExNywidXNlcl9rZXkiOiI1OWM3NzQ3OS0zZTdjLTQ0ZWEtYjJjMi0yMzYzMGQxOTQ5ZjgiLCJ1c2VybmFtZSI6InN6eSJ9.c1zGCLfLjWIQCzUsmOnkee12d1IxV4F0gDvhWOYswJy1M210Fw6o073Kjuxzd4A_AMGYRAcrdrKv3abHBbKghA",
  10.         "expires_in": 720
  11.      }
  12.   }
  13.    * 页面的初始数据
  14.    */
  15.   data: {
  16.     is_disabled: false,
  17.     username: "",
  18.     password: "",
  19.     showPwd: false,
  20.     agree: false
  21.   },
  22.  
  23.   //显示隐藏 密码
  24.   show_no_pwd: function () {
  25.     var ishow = !this.data.showPwd;
  26.     this.setData({
  27.       showPwd: ishow
  28.     })
  29.   },
  30.  
  31.   //协议勾选
  32.   cnn_if_img: function () {
  33.     var agrees = !this.data.agree;
  34.     this.setData({
  35.       agree: agrees
  36.     })
  37.   },
  38.  
  39.   //隐私声明
  40.   cnn_if_cnn: function () {
  41.     // console.log("====生命周期函数====")
  42.     wx.navigateTo({
  43.       url: '/pakageloginandregist/pages/login/privacy/privacypg'
  44.     })
  45.   },
  46.  
  47.   /**
  48.    * 生命周期函数--
  49.    * 监听页面加载
  50.    */
  51.   onLoad() {
  52.  
  53.     var that = this;
  54.  
  55.   },
  56.  
  57.   // 注册
  58.   signup: function () {
  59.     wx.navigateTo({
  60.       url: '/pakageloginandregist/pages/regists/regist'
  61.     })
  62.   },
  63.  
  64.   // 登录
  65.   login: function () {
  66.  
  67.     var that = this
  68.     var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
  69.     if (that.data.username == '') {
  70.       wx.showModal({
  71.         title: '提示！',
  72.         showCancel: false,
  73.         content: '请输入账号！',
  74.         success: function (res) { }
  75.       })
  76.     } else if (false) {//that.data.phone.length !=11
  77.       wx.showModal({
  78.         title: '提示！',
  79.         showCancel: false,
  80.         content: '手机号长度有误，请重新输入！',
  81.         success: function (res) { }
  82.       })
  83.     } else if (false) {//!myreg.test(that.data.phone)
  84.       wx.showModal({
  85.         title: '提示！',
  86.         showCancel: false,
  87.         content: '请输入正确的账号！',
  88.         success: function (res) { }
  89.       })
  90.     } else if (that.data.password == '') {
  91.       wx.showModal({
  92.         title: '提示！',
  93.         showCancel: false,
  94.         content: '请输入密码！',
  95.         success: function (res) { }
  96.       })
  97.     } else {
  98.       var agrees = this.data.agree;
  99.       if (!agrees) {
  100.         wx.showModal({
  101.           title: '提示！',
  102.           showCancel: false,
  103.           content: '同意法律声明及隐私政策！',
  104.           success: function (res) {
  105.             that.loginPage()
  106.  
  107.           }
  108.         })
  109.         return;
  110.       }
  111.  
  112.       //登录
  113.     
  114.     }
  115.  
  116.   },
  117.  
  118.  
  119.  
  120.   phoneInput: function (e: any) {
  121.     this.data.username = e.detail.value
  122.   },
  123.  
  124.   passwordInput: function (e: any) {
  125.     this.data.password = e.detail.value
  126.   },
  127.  
  128.   /**
  129.    * 生命周期函数--监听页面初次渲染完成
  130.    */
  131.   onReady() {
  132.  
  133.   },
  134.  
  135.   /**
  136.    * 生命周期函数--监听页面显示
  137.    */
  138.   onShow() {
  139.    
  140.   },
  141.  
  142.   /**
  143.    * 生命周期函数--监听页面隐藏
  144.    */
  145.   onHide() {
  146.  
  147.   },
  148.  
  149.   /**
  150.    * 生命周期函数--监听页面卸载
  151.    */
  152.   onUnload() {
  153.  
  154.   },
  155.  
  156.   /**
  157.    * 页面相关事件处理函数--监听用户下拉动作
  158.    */
  159.   onPullDownRefresh() {
  160.  
  161.   },
  162.  
  163.   /**
  164.    * 页面上拉触底事件的处理函数
  165.    */
  166.   onReachBottom() {
  167.  
  168.   },
  169.  
  170.   /**
  171.    * 用户点击右上角分享
  172.    */
  173.   onShareAppMessage() {
  174.  
  175.   },
  176.  
  177. })

c、login.wxml文件

  1. <!--pages/login/login.wxml-->
  2. <!-- 登录页面 -->
  3. <view class="background">
  4.   <view class="head">
  5.     
  6.     <view class="tiltle">
  7.       <view class="xiaoya">
  8.         <text class="tiltle_healthy">nini<text class="tiltle_xiaoya">ok</text></text>
  9.       </view>
  10.       <text class="title_tag">saad wwav</text>
  11.     </view>
  12.   </view>
  13.   <view class="first">
  14.     <image class="user_name" src='/images/login/user_name.png' />
  15.     <input id="name" placeholder="账号/手机号" placeholder-class='plas' maxlength='20' value='{{username}}' class='inputs' bindinput='phoneInput' type="text" />
  16.   </view>
  17.   <view class="second">
  18.     <image class="user_name" src='/images/login/password.png' />
  19.     <input id="psw" placeholder="密码" maxlength='20' placeholder-class='plas' class='inputs' value='{{password}}' type="{{showPwd?'text':'password'}}" bindinput='passwordInput' />
  20.     <image class="show_no" bindtap="show_no_pwd" src="{{showPwd?'/images/login/show_pswd.png':'/images/login/no_pswd.png'}}" />
  21.   </view>
  22.   <view class="cnn_if">
  23.     <image class="cnn_if_img" bindtap="cnn_if_img" src="{{agree?'/images/login/select_agree.png':'/images/login/no_agree.png'}}"></image>
  24.     <view class="cnn_if_cnn" bindtap="cnn_if_cnn">已阅读并同意 <view style="color: #06c8ad;">《法律声明及隐私政策》</view>
  25.     </view>
  26.   </view>
  27.   <button style="width: 80vw;height: 86rpx;border-radius:43rpx;background:  linear-gradient(to right, #06c6ad, #01c6d9);" id="btn" form-type='submit' type="primary" class="click" disabled="{{is_disabled}}" bindtap="login">登 录</button>
  28.  
  29.   <view class="cha" bindtap='signup'>
  30.     <text class="no">还没有账号？<text style="color: #06c8ad;">立即注册</text></text>
  31.   </view>
  32. </view>

d、login.wxss文件

  1. /* pages/login/login.wxss */
  2. page {
  3.   left: 0rpx;
  4.   right: 0rpx;
  5.   background-color: white;
  6. }
  7.  
  8. .background{
  9.   display: flex;
  10.   flex-direction: column;
  11.   justify-content: center;
  12.   align-items: center;
  13.   margin-top: 160rpx;
  14. }
  15.  
  16. /* 标题 */
  17. .head{
  18.    display: flex;
  19.    width: 100%;
  20.    justify-content: center;
  21.    flex-direction: row;
  22.    align-items: center;
  23.    margin-top: 80rpx;
  24. }
  25.  
  26. .headpic_vparent{
  27.   width: 160rpx;
  28.   height: 160rpx;
  29.   border-radius: 80rpx;
  30.   display: flex;
  31.   align-items: center;
  32.   justify-content: center;
  33. }
  34.  
  35. .headpic{
  36.   width: 140rpx;
  37.   height: 150rpx;
  38.   align-items: center;
  39.   border-radius: 65rpx;
  40. }
  41.  
  42. .tiltle{
  43.   margin-left: 20rpx;
  44. }
  45.  
  46. .user_name{
  47.   width: 40rpx;
  48.   height: 34rpx;
  49.   margin-left: 20rpx;
  50. }
  51.  
  52. .show_no{
  53.   width: 66rpx;
  54.   height: 40rpx;
  55.   margin-right: 30rpx;
  56. }
  57.  
  58. .tiltle_healthy{
  59.   font-size: 40rpx;
  60.   font-weight: bold;
  61. }
  62.  
  63. .tiltle_xiaoya{
  64.   font-size: 40rpx;
  65.   color:#06c8ad;
  66.   font-weight: bold;
  67. }
  68.  
  69.  
  70. /* 同意协议 */
  71. .cnn_if{
  72.  height: 60rpx;
  73.  margin-top: 100rpx;
  74.  width: 80%;
  75.  display: flex;
  76.  flex-direction: row;
  77.  align-items: center;
  78.  justify-content: flex-start;
  79. }
  80.  
  81. .cnn_if_img{
  82.   width: 40rpx;
  83.   height: 40rpx;
  84.   margin-left: 30rpx;
  85. }
  86.  
  87. .cnn_if_cnn{
  88.   display: flex;
  89.   flex-direction: row;
  90.   font-size: 24rpx;
  91.   margin-left: 10rpx;
  92. }
  93.  
  94. /* 同意协议 */
  95.  
  96. .title_tag{
  97.   font-size: 32rpx;
  98.   color: #CCCCCC;
  99. }
  100.  
  101. /* 标题 */
  102. .first {
  103.   width: 80%;
  104.   height: 90rpx;
  105.   display: flex;
  106.   flex-direction: row;
  107.   align-items: center;
  108.   justify-content: center;
  109.   margin-top: 80rpx;
  110.   margin-left: 5%;
  111.   margin-right: 5%;
  112.   border-radius: 45rpx;
  113.   background-color: #f2f2f2;
  114. }
  115.  
  116. .plas {
  117.   font-size: 30rpx;
  118.   color: #CCCCCC;
  119. }
  120.  
  121. .inputs {
  122.   line-height: 100rpx;
  123.   font-size: 30rpx;
  124.   color: #000;
  125.   margin-right: 60rpx;
  126.   margin-left: 20rpx;
  127.   width: 100%;
  128. }
  129.  
  130. .second {
  131.   width: 80%;
  132.   height: 90rpx;
  133.   display: flex;
  134.   flex-direction: row;
  135.   align-items: center;
  136.   justify-content: center;
  137.   margin-top: 30rpx;
  138.   margin-left: 5%;
  139.   margin-right: 5%;
  140.   border-radius: 45rpx;
  141.   background-color: #f2f2f2;
  142. }
  143.  
  144. .click {
  145.   width: 90%;
  146.   height: 100rpx;
  147.   line-height: 100rpx;
  148.   margin: auto;
  149.   margin-top: 20rpx;
  150.   margin-left: 5%;
  151.   margin-right: 5%;
  152.   background-color: #F76968;
  153.   text-align: center;
  154.   color: white;
  155.   font-size: 33rpx;
  156.   border-radius: 15rpx;
  157.   display:flex;
  158.   align-items: center;
  159.   justify-content: center;
  160. }
  161.  
  162. .cha {
  163.   width: 80%;
  164.   height: 50rpx;
  165.   margin: auto;
  166.   margin-top: 30rpx;
  167.   margin-left: 5%;
  168.   margin-right: 5%;
  169. }
  170.  
  171. .no {
  172.   color: black;
  173.   font-size: 28rpx;
  174.   margin-left: 15rpx;
  175.   font-family: "PingFangSC-regular";
  176. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/131767
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号