微信小程序(四十五)登入界面-简易版

注释很详细,直接上代码

上一篇

此文使用了vant组件库,没有安装配置的可以参考此篇vant组件的安装与配置

新增内容:
1.基础组件的组合
2.验证码倒计时的逻辑处理

源码:

app.json

json 复制代码
{
  "usingComponents": {
    "van-field": "@vant/weapp/field/index",
    "van-count-down": "@vant/weapp/count-down/index",
    "van-button": "@vant/weapp/button/index"
  },
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

index.wxml

xml 复制代码
<view class="login-header">
  <view class="label">用户登入</view>
</view>
<view class="login-form">
  <van-cell-group>
  <!--  1.type 控制弹出手机键盘的类型
        2.maxlength 控制最大长度
        3.use-slot使用插槽
        4.placeholder-style占位内容样式
   -->
    <van-field placeholder="请输入手机号码" type="number" maxlength="{{11}}" use-slot placeholder-style="color: #999999;">
      <!-- slot在官方文档里面有几个特定的类型,可以自己找来康康 -->
      <view wx:if="{{!countDownVisble}}" slot="button">
        <van-button size="small" type="primary" bind:tap="sendCode">
          发送验证码
        </van-button>
      </view>
      <!-- 稍微调整一下文字位置 -->
      <view slot="right-icon" wx:else style="margin-top: -20rpx;">
        <!-- 倒计时组件 -->
        <!-- 
          1. time计时时常单位毫秒
          2.bind:change时间变化触发
         -->
        <van-count-down use-slot time="{{60*1000}}" bind:change="countDownChange">
          <text style="color: #999999; ">
            {{timeData.seconds}}秒后重新获取
          </text>
        </van-count-down>
      </view>
    </van-field>

    <van-field placeholder="请输入6位数验证码" maxlength="{{6}}" placeholder-style="color:#999999" />
  </van-cell-group>

  <view class="login-tip">未注册的手机号验证后将自动注册</view>
</view>

<!-- 在行内写样式,如果在css文件里要提高权值才行 -->
<button size="mini" style="margin:30rpx 0 0 300rpx; background-color: palegreen; padding: 0 50rpx;">登入</button>

index.wxss

css 复制代码
.label{
  font: 1em SimHei;
  font-size: 50rpx;
  margin: 60rpx 0 50rpx 30rpx;
}

.login-tip{
  margin: 20rpx 0 90rpx 30rpx;
  color: #dadada;
  font-size: 27rpx;
}

index.js

js 复制代码
Page({
  data:{
    countDownVisble:false,//是否显示倒计时
    timeData: {}//时间数据
  },
  //发送验证码
  sendCode(){
    this.setData({
      countDownVisble:true
    })
  },
  //倒计时变化
  countDownChange(ev){
    //console.log(ev)
    this.setData({
      //倒计时组件数据
      timeData:ev.detail,
      //倒计时是否显示判断
      countDownVisble:ev.detail.minutes===1||ev.detail.seconds>0
    })
  }
})

效果演示:(更加完善的会后续更新)

相关推荐
00后程序员张33 分钟前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差10 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张11 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬13 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063213 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI13 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_1772972206914 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld14 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄16 小时前
mobx-miniprogram小程序的数据传输
小程序
说私域19 小时前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在直播公屏引流中的应用与效果
人工智能·小程序·开源