1.只显示用户头像和名称(简化代码)
<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
使用实例
wxml
<open-data type="userAvatarUrl" class="avatar" ></open-data>
<open-data type="userNickName"></open-data>
wxss
.avatar{
border-radius: 45%;
width: 90px;
height: 90px;
display:inline-block;
overflow: hidden;
}
使用效果
2.授权登录
使用wx.getUserProfile
<button bindtap="login">授权登录<button>//绑定点击事件进行登录
// pages/index/index.js
Page({
data:{
userinfo:''
},
login(){
wx.getUserProfile({
desc: '完善资料',
success:res=>{//使用es6语法(箭头函数)避免this指向问题,简化代码
console.log(res)
this.setData({userinfo:res.userInfo})
}
})
}
})
// Page({
// data:{
// userinfo:''
// },
// login(){
// let that=this;//这的this指向page
// wx.getUserProfile({
// desc:"获取数据用途"//必填
// sucess(res){
// that.setData({//这里不可以使用this,为undefined
// userinfo:res.userinfo
// })
// },
// fail(res){
// console.log("授权失败",res)
// }
// })
// })
接着可以在wxml中进行渲染头像和昵称(优化登录进行条件渲染)
<button wx:if="{{!userinfo}}" bindtap="login">授权登录</button>
<view wx:else class="user_wrap">
<image class="user_image" src="{{userinfo.avatarUrl}}"></image>
<view class="user_message">
<view class="user_name">{{userinfo.nickName}}</view>
<view class="user_number"></view>
</view>
</view>
3.缓存
Page({
data:{
userinfo:''
},
onLoad(){
let user=wx.getStorageSync('userinfo')//调用缓存wx.getStorageSync('Key')
this.setData({
userinfo:user
})
},
login(){
wx.getUserProfile({
desc: '完善资料',
success:res=>{ //wx.setStorageSync("Key",value)
wx.setStorageSync("userinfo",res.userInfo)//登陆的时候获取缓存,
this.setData({userinfo:res.userInfo})
}
})
}
})
4.退出登录
loginout(){
this.setData({
userinfo:''//清空数据
})
wx.setStorageSync('userinfo', NULL)//清理缓存
}
5.绑定点击事件获取当前index并对所点击进行选中(选中边框为绿色)
Page({
data: {
currentindex:''
},
handletap(e){//点击事件函数
this.setData({
currentindex:e.currentTarget.dataset.index
})
},
)}
<view class="order" bindtap="handletap" data-index="{{index}}"">
<view class="order_detail {{index===currentindex?'active':''}}">
<view class="order_head">
</view>
<view class="order_body">
</view>
</view>
</view>
.active .order_body{
border:rgb(93, 219, 114) solid ;
border-top: 0px;
}
.active .order_head{
border:rgb(93, 219, 114) solid ;
border-bottom: 0px;
}
效果如图
6.横向滚动视图窗
我写了三层嵌套
<scroll-view class="scroll-view_H" scroll-x="true" >/*横向滚动必备*/
<view class="bb">
<view class="b">
</view>
</view>
</scroll-view>
样式
.scroll-view_H{
display: flex;/*一点要写这两个属性*/
white-space:nowrap;
}
.bb{
height:120px;
display: flex;//一定要写
overflow: scroll;/*溢出隐藏*/
}
.b{
margin-left: 5px;
display: inline-table;//一定要写
border-radius: 5%;
width: 110px;
height: 100%;
background-color:#f2f2f7;
}
7.文字居中竖直排列
wxss
.box{
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.text{
writing-mode: vertical-rl;
display: inline-block;
margin-top: 40px;
font-size: 30px;
letter-spacing: 20px;
color: #bdbdc0;
}
wxml
<view class="box">
<texy class="text">尚无借用设备</texy>
</view>
8.截取后端字符串并展示
<wxs module="subData">
module.exports = function (val) {
if (val == undefined || val == '' || val == null) {
return;
}
else {
return val.substring(5);//从索引5截取字符串
}
};
</wxs>
<view style="text-align: center;">{{subData(item.time)}}</view>//展示字符串
9.注册
import { request } from "../../request/index.js"
Page({
data: {
ename:'',
xuehao: '',
mima: '',
phone:'',
},
//获取姓名
getName(event) {
console.log('获取输入的姓名', event.detail.value)
this.setData({
ename: event.detail.value
})
},
//获取学号
getXueHao(event) {
console.log('获取输入的学号', event.detail.value)
this.setData({
xuehao: event.detail.value
})
},
// 获取密码
getMiMa(event) {
console.log('获取输入的密码', event.detail.value)
this.setData({
mima: event.detail.value
})
},
//获取手机号
getPhone(event) {
console.log('获取输入的密码', event.detail.value)
this.setData({
phone: event.detail.value
})
},
//注册功能的实现
zhuce(){
var that=this;
console.log("点击注册")
if(that.data.ename!=''&&that.data.xuehao!=''&&that.data.mima!=''&&that.data.phone!=''){
request({url:"/UploadUser", data:{
name:that.data.ename,
stuid:that.data.xuehao,
pwd:that.data.mima,
phone:that.data.phone
},method:'POST', header:{
'Content-Type': 'application/json'
},})
.then(result=>{
//页面跳转
console.log(result)
//注册失败
if(result.data.desc!=="注册成功")
{
wx.showToast({
title: result.data.desc,
icon: 'none',
duration: 2000//持续的时间
})
}
//注册成功
else{
wx.showToast({
title: result.data.desc,
icon: 'success',
duration: 2000,//持续的时间,
success: function () {
//延时弹窗
setTimeout(function() {
wx.redirectTo({
url: "/pages/login/login"
}, 2000);
})
}
})
}
})
}
else{
wx.showToast({
title: '请全部输入',
icon: 'none',
duration: 2000//持续的时间
})
}
},
})
11.登录
主页js
Page({
data:{
userinfo:'',
loginOK: false,
phone:'',
xuehao:''
},
let phone=wx.getStorageSync('phone')//获取缓存中的手机号
console.log(phone)
this.setData({
phone:phone,
})
let xuehao=wx.getStorageSync('xuehao')
console.log(xuehao)
this.setData({
xuehao:xuehao,
})
},
//去登陆页
denglu() {
wx.navigateTo({
url: '/pages/login/login',
})
},
//去注册页
zhuce() {
wx.navigateTo({
url: '/pages/zhuce/zhuce',
})
},
onShow() {//判断是否需要登录
let user = wx.getStorageSync('xuehao')
if (user) {
this.setData({
loginOK: true,
})
} else {
this.setData({
loginOK: false
})
}
},
})
主页wxml
<view class="me" wx:if="{{!loginOK}}" >
<button class="denglu" type="primary" bindtap="denglu" style="background-color: rgb(199, 211, 199);color: rgb(65, 62, 62);margin-bottom: 5px;">登录</button>
<button class="zhuce" type="primary" bindtap="zhuce" style="background-color: rgb(199, 211, 199);color: rgb(65, 62, 62);">注册</button>
</view>
登录页面js
登录token
首微信小程序官方文档提供了wx.login
使用wx.login
可以获取随机生成的code
然后请求登录接口,向后台发送code,返回的数据,就包含token
我们可以存到本地通过 wx.setStorageSync(),
内含token过期处理
// pages/login/login.js
import { request } from "../../request/index.js";
Page({
data: {
ename: '',
xuehao: '',
mima: '',
stuid:'',
IsAdmin:'',
},
//获取学号
getXueHao(event) {
console.log('获取输入的学号', event.detail.value)
this.setData({
xuehao: event.detail.value
})
wx.setStorageSync("xuehao", event.detail.value);
},
// 获取密码
getMiMa(event) {
console.log('获取输入的密码', event.detail.value)
this.setData({
mima: event.detail.value
})
},
login() {
var that = this;
if (that.data.mima == "") {
wx.showModal({
title: "错误",
content: "密码不能为空"
});
}
else {
wx.login({
success(res) {
if (res.code) {
request({url:"/login", data: {
code: res.code,
stuid: that.data.xuehao,
pwd: that.data.mima
},method: 'POST',
header: {
"content-type": "application/json"
}})
.then(_result=>{
console.log('登录返回',_result)
var info = _result.data.code;
if (info == "401") {
wx.showModal({
title: "错误",
content: "学号或者密码输入不正确"
});
}
else {
//登录返回,在里面可以找到后台返回的随机token
wx.setStorageSync('token', _result.data.token);
wx.setStorageSync("stuid", that.data.xuehao);
wx.setStorageSync("IsAdmin", _result.data.IsAdmin);
wx.setStorageSync("phone", _result.data.phone);
wx.setStorageSync("loginOk",true);
console.log(wx.getStorageSync('loginOk'))
// 页面跳转
wx.showToast({
title: "登陆成功",
icon: 'success',
duration: 2000,//持续的时间,
success: function () {
setTimeout(function() {
wx.switchTab({
url: "/pages/mine/index"
}, 2000);
console.log("页面跳转主页");
})
}
})
}
})
}
else {
console.log('登录失败!' + res.errMsg)
}
}
})
}
},
})
退出登录清缓存
// pages/logout/logout.js
Page({
//清除缓存
clear:function(){
wx.clearStorageSync();//清除缓存
wx.showToast({
title: '退出登录成功',
icon: 'none',
duration: 2000,
success: function () {
setTimeout(function () {
//跳转到首页,强制重启
wx.reLaunch({
url: '/pages/index/index',
})
}, 2000);
}
})
},
})
12封装代码
新建一个request.js文件,
内行token过期和空的处理
export const request=(params)=>{
// 公共url
// const baseUrl="http://10.117.10.32:8080" //lyq
// const baseUrl="https://xdsbty.cn"
const baseUrl="http:// 10.117.14.61:8080"
return new Promise((resolve,reject)=>{
wx.request({
...params,
url: baseUrl+params.url,
success:(result)=>{
if(result.data=="服务器繁忙解析失败"||result.data.desc=="无token")
{
console.log("000")
wx.showModal({
title: '提示',
content: '请先登录',
success(res) {
//弹窗后执行
if (res.confirm) {
wx.navigateTo({
url: '/pages/login/login',
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
resolve(result);
console.log(result)
},
fail:(err)=>{
reject(err);
console.log(err)
}
});
})
}
// import { request } from "../../request/index.js";在.js文件中引入
// 使用的时候 request({url:""})
// .then(result=>{
// 这里相当于wx.request里的 success: (result) =>{}
// })
// 使用post request({url:"",data: ,method:"post"})
// handlesubmit({
// const ##=this.data.
// })
// request
在页面中引入即可
import { request } from "../../request/index.js";//引入请求
Page({
data: {
usedUav:[],
stuid:''
},
onShow(){
var that=this;
let stuid=wx.getStorageSync('stuid')
console.log(stuid)
this.setData({
stuid:stuid
})
// 登录则发请求
if(wx.getStorageSync('loginOk'))
{
request({url:"/User/GetOwnHistory",header:{
'token':wx.getStorageSync("token")
},
method:'GET',
data:{stuid:that.data.stuid},})
.then(result=>{
console.log(result)
if(result.data!=null){
this.setData({
usedUav:result.data
})
}
})
}
},
})