一、新建pages
Ⅰ、手动
1、手动新建文件夹（pages）
2、在login文件新建page
就会自动生成对应的js以及json，wxml，wxss文件
Ⅱ自动
在app.json文件中
实例：
login.js
Page({
data: {
phone: ”,
password: ”,
success: false,
text: ”
},
// 获取输入账号
phoneInput: function (e) {
this.setData({
phone: e.detail.value
})
},
// 获取输入密码
passwordInput: function (e) {
this.setData({
password: e.detail.value
})
},
// 登录
login: function () {
var that = this;
var warn = null;
//warn为当手机号为空或格式不正确时提示用户的文字，默认为空
if (that.data.phone.length === 0) {
wx.showToast({
title: ‘用户名不能为空’,
icon: ‘loading’,
duration: 1000
})
} else if (that.data.password.length === 0) {
wx.showToast({
title: ‘密码不能为空’,
icon: ‘loading’,
duration: 1000
})
} else {
wx.request({
url: ‘http://192.168.41.40:8002/login’,
method: “POST”,
data: {
cardNo: that.data.phone,
password: that.data.password
},
header: {
‘content-type’: ‘application/x-www-form-urlencoded’
},
success: function (res) {
if (res.data.state === 1) { //判断是否能正常登录
warn = “卡号密码不匹配”;
wx.showModal({
title: ‘提示’,
content: warn
})
return;
}
that.setData({
success: true,
text: res.data.url
})
}
})
}
},
// 注册
register: function () {
wx.navigateTo({
url: ‘/pages/register/register’,
})
}
})
login.json
{
“usingComponents”: {}
}
login.wxml
<view class=”container”>
<view class=”login-icon”>
<image class=”login-img” src=”/images/key.jpg”></image>
</view>
<view class=”login-from”>
<!–账号–>
<view class=”inputView”>
<image class=”nameImage” src=”/images/home.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/my.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 class=”registerBtnView”>
<button class=”registerBtn” type=”primary” size=”{
{primarySize}}”loading=”{
{loading}}” plain=”{
{plain}}” disabled=”{
{disabled}}” bindtap=”register”>注册</button></view>
</view>
</view>
<view class = ‘success’ wx:if=”{
{success}}”><web-view src=”{
{text}}”></web-view></view>
login.wxss
/* pages/login/login.wxss */
page{
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
padding: 0;
box-sizing: border-box;
background-color: #f2f2f2
}
/*登录图片*/
.login-icon{
flex: none;
}
.login-img{
width: 750rpx;
}
/*表单内容*/
.login-from {
margin-top: 20px;
flex: auto;
height:100%;
}
.inputView {
background-color: #fff;
line-height: 44px;
}
/*输入框*/
.nameImage, .keyImage {
margin-left: 22px;
width: 14px;
height: 14px
}
.loginLab {
margin: 15px 15px 15px 10px;
color: #545454;
font-size: 14px
}
.inputText {
flex: block;
float: right;
text-align: left;
margin-right: 22px;
margin-top: 11px;
color: #cccccc;
font-size: 14px
}
.line {
width: 100%;
height: 1px;
background-color: #cccccc;
margin-top: 1px;
}
/*按钮*/
.loginBtnView {
width: 100%;
height: auto;
background-color: #f2f2f2;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
}
.loginBtn {
width: 100%;
margin-top: 35px;
}
.registerBtn {
width: 100%;
margin-top: 5px;
}
注意修改app.json
把login提前，不然会被覆盖
