修改全局文件

全局属性值配置：App.js

//app.js
App({
serverUrl: "http://192.168.100.5:8081",
userInfo: null,

setGlobalUserInfo: function (user) {
wx.setStorageSync("userInfo", user);
},

getGlobalUserInfo: function () {
return wx.getStorageSync("userInfo");
},

reportReasonArray: [
"色情低俗",
"政治敏感",
"涉嫌诈骗",
"辱骂谩骂",
"广告垃圾",
"诱导分享",
"引人不适",
"过于暴力",
"违法违纪",
"其它原因"
]
})

全局样式路由配置app.json

{
"pages": [
"pages/index/index",
"pages/videoinfo/videoinfo",
"pages/videotest/videotest",
"pages/userLogin/login",
"pages/report/report",
"pages/mine/mine",
"pages/userRegist/regist",
"pages/chooseBgm/chooseBgm",
"pages/searchVideo/searchVideo"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "晓码阁 . 短视频",
"navigationBarTextStyle": "black"
},
"debug": true,
"sitemapLocation": "sitemap.json"
}

我们先做登录注册那么将"pages/userLogin/login",提到第一行

先来个微信登录界面布局

Login.wxss

page {
background-color: whitesmoke;
}

.login-img {
width: 750rpx;
}

/*表单内容*/
.inputView {
background-color: white;
line-height: 45px;
}

/*输入框*/
.nameImage, .keyImage {
margin-left: 22px;
width: 20px;
height: 20px;
}

.loginLabel {
margin: 15px 15px 15px 10px;
color: gray;
font-size: 15px;
}

.inputText {
float: right;
text-align: right;
margin-right: 22px;
margin-top: 11px;
font-size: 15px;
}

.line {
width: 100%;
height: 1px;
background-color: gainsboro;
margin-top: 1px;
}

/*按钮*/
.loginBtn {
width: 80%;
margin-top: 35px;
}

.goRegistBtn {
width: 80%;
margin-top: 15px;
}

Login.wxml

<view>
<view class="login-icon">
<image class="login-img" src="../resource/images/dsp.jpg"></image>
</view>
<view class="login-from">
<form bindsubmit='doLogin'>
<!--账号-->
<view class="inputView">
<image class="nameImage" src="../resource/images/username.png"></image>
<label class="loginLabel">账号</label>
<input name="username" value='javaxl' class="inputText" placeholder="请输入账号" />
</view>
<view class="line"></view>

<!--密码-->
<view class="inputView">
<image class="keyImage" src="../resource/images/password.png"></image>
<label class="loginLabel">密码</label>
<input name="password" value='javaxl' class="inputText" password="true" placeholder="请输入密码" />
</view>

<!--按钮-->
<view>
<button class="loginBtn" type="primary" form-type='submit'>登录</button>
</view>

<view>
<button class="goRegistBtn" type="warn" bindtap="goRegistPage">没有账号？点击注册</button>
</view>
</form>
</view>
</view>

然后是js代码了（wx.request实战）

Login.js

const app = getApp()

Page({

/**
* 页面的初始数据
*/
data: {

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var me = this;
var redirectUrl = params.redirectUrl;
// debugger;
if (redirectUrl != null && redirectUrl != undefined && redirectUrl != '') {
redirectUrl = redirectUrl.replace(/#/g, "?");
redirectUrl = redirectUrl.replace(/@/g, "=");

me.redirectUrl = redirectUrl;
}
},
// 登录 
doLogin: function (e) {
var me = this;
var formObject = e.detail.value;
var username = formObject.username;
var password = formObject.password;
// 简单验证
if (username.length == 0 || password.length == 0) {
wx.showToast({
title: '用户名或密码不能为空',
icon: 'none',
duration: 3000
})
} else {
var serverUrl = app.serverUrl;
wx.showLoading({
title: '请等待...',
});
// debugger;
// 调用后端
wx.request({
url: serverUrl + '/login',
method: "POST",
data: {
username: username,
password: password
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
// 登录成功跳转 
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
});
// app.userInfo = res.data.data;
// fixme 修改原有的全局对象为本地缓存
app.setGlobalUserInfo(res.data.data);
// 页面跳转

var redirectUrl = me.redirectUrl;
if (redirectUrl != null && redirectUrl != undefined && redirectUrl != '') {
wx.redirectTo({
url: redirectUrl,
})
} else {
wx.redirectTo({
url: '../mine/mine',
})
}

} else if (res.data.status == 500) {
// 失败弹出框
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 3000
})
}
}
})
}
},

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

},

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

},

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

},

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

},

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

},

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

},

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

}
})

然后登录界面就是这样了

点击登录前，先用swagger2进行测试，看对应功能是否ok；

注意：

此时点击登录是不会成功的，这也是微信为了网络安全问题考虑的，详情请参考微信公众开发平台文档，想要成功我们需要按照下图进行操作就ok啦！！！

over......