微信小程序之登录页面制作实例详解

微信小程序之登录页面制作实例详解
这篇文章主要为大家详细介绍了微信小程序实战之登录页面制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了微信小程序实战之登录页面制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

提供一个登录页的案例，供同学们使用

项目效果图：

目录结构：

图片资源：

name.png

key.png

loginLog.jpg

login.wxml：

<view class="container"> <view class="login-icon"> <image class="login-img" src="../images/loginLog.jpg"></image> </view> <view class="login-from"> <!--账号--> <view class="inputView"> <image class="nameImage" src="../images/name.png"></image> <label class="loginLab">账号</label> <input class="inputText" placeholder="请输入账号" bindinput="phoneInput" /> </view> <view class="line"></view> <!--密码--> <view class="inputView"> <image class="keyImage" src="../images/key.png"></image> <label class="loginLab">密码</label> <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> </view> <!--按钮--> <view class="loginBtnView"> <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button> </view> </view> </view>