小程序用户和登录页面展示，wx.request
用户页面wxml
<!--pages/home/home.wxml-->
<view class="container">
<view class="top-view">
<view class="user">
<view class="row">
<image class="avatar" wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image>
<image class="avatar" wx:else="{{userInfo}}" src="/static/2.png"></image>
<!-- 点击跳转到登录注册页面 -->
<view class="name" wx:if="{{userInfo}}">
<view bindtap="onClickLogout">
{{userInfo.nickName}}
</view>
</view>
<view class="name" wx:else="{{userInfo}}">
<navigator url="/pages/auth/auth">登录</navigator>
|
<navigator url="/pages/auth/auth">注册 </navigator>
</view>
</view>
<view class="site">查看个人主页</view>
</view>
<view class="numbers">
<view class="row">
<text>0</text>
<text>关注</text>
</view>
<view class="row">
<text>0</text>
<text>粉丝</text>
</view>
<view class="row">
<text>0</text>
<text>赞与收藏</text>
</view>
<view class="row">
<text>0</text>
<text>好友动态</text>
</view>
</view>
</view>
<view class="middle-view">
<view class="item">
<image src="/static/images/icon/transaction_order1_icon_show.png"></image>
<text>待支付</text>
</view>
<view class="item">
<image src="/static/images/icon/transaction_order2_icon_show.png"></image>
<text>待支付</text>
</view>
<view class="item">
<image src="/static/images/icon/transaction_order3_icon_show.png"></image>
<text>待支付</text>
</view>
<view class="item">
<image src="/static/images/icon/transaction_order4_icon_show.png"></image>
<text>待支付</text>
</view>
<view class="item">
<image src="/static/images/icon/transaction_order5_icon_show.png"></image>
<text>待支付</text>
</view>
</view>
<view class="function-view">
<view class="row">
<view class="left">我的钱包</view>
<view class="right">
<text>¥20</text>
<image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
</view>
</view>
<view class="row">
<view class="left">我的优惠券</view>
<view class="right">
<text>暂无课用</text>
<image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
</view>
</view>
<view class="row">
<view class="left">领劵中心</view>
<view class="right">
<text>你的福利都在这里</text>
<image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
</view>
</view>
</view>
<view class="contact-view">
<button open-type="contact">
<image src="/static/images/icon/wechat_contact_icon_show.png"></image>
</button>
<button bindtap="onClickCall">
<image src="/static/images/icon/phone_contact_icon_show.png"></image>
</button>
</view>
</view>
用户页面js
// pages/home/home.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: null,
},
/**
* 生命周期函数--监听页面加载(第一次打开时会执行)
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成（第一次打开时会执行）
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
//本地storage中获取值
// var phone = wx.getStorageSync('phone')
// this.setData({
// phone:phone
// })
//从全局变量中获取值
this.setData({
// phone:app.globalData.phone
userInfo: app.globalData.userInfo
})
},
/**
* 用户注销
*/
onClickLogout:function(){
app.delUserInfo();
this.setData({
userInfo: null
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
用户页面css
/* pages/home/home.wxss */
.top-view{
background-color: #01ccb6;
color: white;
padding: 40rpx;
}
.top-view .user{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.top-view .user .row{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.top-view .user .avatar{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.top-view .user .name{
display: flex;
flex-direction: row;
justify-content: space-around;
width: 200rpx;
}
.top-view .site{
background-color: rgba(0, 0, 0, 0.16);
padding: 20rpx;
border-top-left-radius: 32rpx;
border-bottom-left-radius: 32rpx;
}
.top-view .numbers{
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 28rpx;
padding: 40rpx;
padding-bottom: 0rpx;
}
.top-view .numbers .row{
display: flex;
flex-direction: column;
align-items: center;
}
.middle-view{
padding: 40rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 25rpx;
border-bottom: 18rpx solid #f5f5f5;
}
.middle-view .item{
display: flex;
flex-direction: column;
align-items: center;
}
.middle-view .item image{
width: 50rpx;
height: 50rpx;
margin-bottom: 20rpx;
}
.function-view{
padding: 40rpx;
font-size: 28rpx;
}
.function-view .row{
padding: 30rpx 0;
border-bottom: 1px solid #efefef;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.function-view .row .right{
color: #8c8c8c;
}
.function-view .row .go-icon{
margin: 0 20rpx;
width: 16rpx;
height: 16rpx;
}
.contact-view{
padding: 40rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.contact-view button {
background-color: transparent;
border: 0;
padding: 0;
}
.contact-view button::after{
border: 0;
}
.contact-view image{
width: 204rpx;
height: 66rpx;
}
登录注册页wxml
<!--pages/auth/auth.wxml-->
<view class="logo">
<image src='/static/2.png'></image>
<text>交流交易社区</text>
</view>
<view class="form">
<view class="row-group">
<text>手机</text>
<!-- value属性是后端对于前端的绑定，bindinput的前端变化时后端数据也会相应变化 -->
<input placeholder="请填写手机号码" placeholder-class='txt' maxlength='11' value="{{phone}}" bindinput="bindPhoneInput" />
</view>
<view class="row-group">
<text>验证码</text>
<input placeholder="请填写验证码" placeholder-class='txt' maxlength='4' value="{{code}}" bindinput="bindCodeInput" />
<view class="code" bindtap="onClickCheckCode">获取验证码</view>
</view>
<view>
<button class="submit" open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登录 | 注册</button>
</view>
</view>
登录注册页js
// pages/auth/auth.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
phone: "15822539779",
code: "",
},
bindPhoneInput: function (e) {
this.setData({
phone: e.detail.value
});
},
bindCodeInput: function (e) {
this.setData({
code: e.detail.value
});
},
/**
* 点击获取短信验证码
*/
onClickCheckCode: function (e) {
// 判断手机号格式是否正确
if (this.data.phone.length == 0) {
wx.showToast({
title: '请填写手机号码',
icon: 'none'
})
return
}
var reg = /^(1[3|4|5|6|7|8|9])\d{9}$/;
if (!reg.test(this.data.phone)) {
wx.showToast({
title: '手机格式错误',
icon: 'none'
})
return
}
// 发送短信验证码，登录成功之后获取jwt和微信用户信息，保存到globalData和本地存储中。
wx.request({
url: "http://127.0.0.1:8000/api/message/",
data: {
phone: this.data.phone
},
method: 'GET',
dataType: 'json',
success: function (res) {
// 根据后端发送的status判断是否发送成功
if (res.data.status) {
// 提示验证码倒计时或者提示发送成功
wx.showToast({
title: res.data.message,
icon: 'none'
});
} else {
// 短信发送失败
wx.showToast({
title: res.data.message,
icon: 'none'
});
}
}
})
},
onClickSubmit(e) {
console.log(e)
wx.request({
url: "http://127.0.0.1:8000/api/login/",
data: {
phone: this.data.phone,
code: this.data.code
},
method: 'POST',
dataType: 'json',
success: function (res) {
// 根据status状态判断是否成功
if (res.data.status) {
// 1.可以将手机号放到公共的位置，比如app.js里，方便别的页面进行获取
// app.globalData.phone = res.data.data.phone
// 2.上述方法是将值存在变量里的，一重启就没有了，我们也可以将值保存在cookie中
// wx.setStorageSync('phone', res.data.data.phone)
// 3.将上述两种存储优化一下，在全局的app中定义一个initUserInfo方法，将用户初始化的信息（电话和token）传入该函数，然后上面1和2两部就可以放到该函数内执行了
// 4.优化，我们还可以将wx的用户信息也初始化到initUserInfo函数内
app.initUserInfo(res.data.data, e.detail.userInfo)
// 登录成功之后，自动跳转到上一级页面
//getCurrentPages方法是记录程序的页面，包括上一页信息，下一页信息等，pages是一个列表，最后一个是元素是当前页面，前一个元素是上一页
// var pages = getCurrentPages()
// console.log(pages)
// 得到上一页
// prepage = pages[pages.length-2]
// 使用该方法就可以之前跳转到登录之前的上一页
wx.navigateBack({})
} else {
wx.showToast({
title: "登录失败",
icon: 'none'
});
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
登录注册页css
/* pages/auth/auth.wxss */
.logo{
display: flex;
flex-direction: column;
align-items: center;
}
.logo image {
margin-top: 140rpx;
width: 216rpx;
height: 100rpx;
}
.logo text {
margin-top: 26rpx;
margin-bottom: 50rpx;
font-size: 24rpx;
line-height: 24rpx;
font-weight: 400;
color: #8c8c8c;
text-align: center;
}
.form{
padding: 40rpx;
}
.form .row-group{
padding: 20rpx 0;
border-bottom: 1rpx solid #ddd;
position: relative;
}
.form .row-group text{
font-size: 28rpx;
padding:10rpx 0;
}
.form .row-group input{
padding: 10rpx 0;
}
.form .row-group .txt{
color: #ccc;
}
.form .row-group .code{
position: absolute;
right: 0;
bottom: 26rpx;
z-index: 2;
width: 206rpx;
height: 60rpx;
border: 2rpx solid #00c8b6;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 400;
color: #00c8b6;
display: flex;
align-items: center;
justify-content: center;
}
.form .submit{
margin-top: 80rpx;
color: #fff;
border: 2rpx solid #00c8b6;
background-color: #00c8b6;
font-size: 32rpx;
font-weight: bold;
}
评论关闭