一年没更新了,今天本地运行了下都快忘了写啥了。ε=(´ο`*)))唉现在的行情还是多学习吧。
首先我们创建一个修改下登录页面,也就是pages/mine/mine.vue文件
<template>
<!-- 登录页主体部分 -->
<view class="container">
<!-- 登录页顶部部分 -->
<view class="intro">
<!-- 登录页顶部图片 -->
<image src="/static/images/services/login_top.png"></image>
<!-- 如果用户已登录,则显示欢迎信息 -->
<view v-if="userInfo">
<view class="tips">欢迎你!<text>{{userInfo.nickName}}</text></view>
</view>
</view>
<!-- 登录页底部部分 -->
<view class="bottom">
<!-- 如果用户已登录,则显示退出登录按钮 -->
<view v-if="userInfo">
<view @tap="logout">
<button type="warn" size="default" class="logout-btn">
退出登录
</button>
</view>
</view>
<!-- 如果用户未登录,则显示微信授权登录按钮 -->
<view v-else>
<button type="primary" size="default" class="login-btn" open-type="getUserInfo" @getuserinfo="wxLogin">
微信授权登录
</button>
</view>
</view>
</view>
</template>
<script>
import { mapState } from 'vuex';
export default {
data() {
return {
userInfo: uni.getStorageSync("userInfo") // 从本地缓存中读取用户信息
};
},
computed: {
...mapState(['appProperties']) // 将全局状态中的 appProperties 映射为当前组件的计算属性
},
onLoad() {
uni.setNavigationBarTitle({
title: '登录页' // 设置导航栏标题
}),
uni.showShareMenu({"title":"测试开发真货"}); // 显示分享菜单
},
methods: {
// 退出登录
logout() {
let that = this;
if (!this.userInfo) {
this.$msg("请先登录")
return;
}
uni.showModal({
content: "是否退出登录?",
cancelText: "取消",
confirmText: "退出登录",
success: function(e) {
if (e.confirm) {
that.$store.commit("logout") // 调用全局状态中的 logout 方法,执行退出登录操作
}
}
})
},
// 微信授权登录
wxLogin(e) {
const that = this;
const {errMsg, userInfo} = e.detail;
if (errMsg !== 'getUserInfo:ok') {
uni.showModal({
title: '提示',
content: '您取消了授权登录,请重新授权',
showCancel: false
});
return;
}
var UserInfo = e.detail.userInfo; // 获取用户信息
console.log('用户:' + JSON.stringify(UserInfo));
var URL = this.$config.baseUrl
// 调用 uni.login 方法获取微信登录凭证 code,并发送至服务器进行登录验证
uni.login({
provider: 'weixin', // 使用微信登录
success: loginRes => {
console.log('获取到的code=', loginRes.code);
uni.request({
url: URL + '/api/wx_login/',
method: 'POST',
data: {
code: loginRes.code,
userInfo: UserInfo
},
success: result => {
if (result.data.status == "True") {
// 登录成功,将用户信息和 token 存储在全局状态中,并跳转到指定页面
uni.showModal({
title: '提示',
content: '登录成功啦',
showCancel: false
});
var token = result.header.token
var userInfo = result.data.userInfo
that.$store.commit('login', {
userInfo,
token
});
uni.reLaunch({
url: '/pages/votes/index'
});
} else {
// 登录失败,弹出提示并执行退出登录操作
uni.showModal({
title: '提示',
content: '登录失败了呢',
showCancel: false
});
that.$store.commit("logout")
}
},
fail: () => {
// 登录失败,弹出提示并执行退出登录操作
uni.showModal({
title: '提示',
content: '登录失败了呢',
showCancel: false
});
that.$store.commit("logout")
},
complete: () => {}
});
}
});
},
}
};
</script>
<style lang="scss" scoped>
.intro {
width: 100%;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
font-size: $font-size-base;
color: $text-color-assist;
image {
width: 200rpx;
height: 200rpx;
}
.tips {
line-height: 72rpx;
text-align: center;
}
}
.bottom {
height: 20vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 40rpx;
.logout-btn {
width: 100%;
border-radius: 50rem !important;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 0;
image {
width: 36rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
.login-btn {
width: 100%;
border-radius: 50rem !important;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 0;
image {
width: 36rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
.row {
.grid {
width: 20%;
image {
width: 60rpx;
height: 60rpx;
margin-bottom: 10rpx;
}
}
}
.tips {
line-height: 72rpx;
text-align: center;
}
}
</style>
登录效果
text-color-assist;变量是取得lyl_xcx/uni.scss根目录下的scss文件。
/* 文字尺寸 */
$font-size-sm:24rpx;
$font-size-base:28rpx;
$font-size-lg:32rpx;
/* 文字基本颜色 */
$text-color-base: #5A5B5C; //基本色
$text-color-assist: #919293; //辅助色
$text-color-black: #3B3C3E; //黑
$text-color-grey: #878889; //灰
$text-color-white: #ffffff; //白
<style lang="scss">
</style>
// #ifndef VUE3
// Vue.js 2.x 版本的应用程序入口文件
import App from './App'
import Vue from 'vue'
// 配置 Vue.js 应用程序
Vue.config.productionTip = false
Vue.config.productionTip = false
Vue.prototype.$config = config
// 设置小程序 app 类型
App.mpType = 'app'
// 创建 Vue.js 实例并挂载到 DOM 根元素上
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
// Vue.js 3.x 版本的应用程序入口文件
import { createSSRApp } from 'vue'
import App from './App.vue'
import config from './config.js'
// 导出 createApp 函数,用于创建 Vue.js 应用程序实例
export function createApp() {
// 使用 createSSRApp 函数创建应用程序实例
const app = createSSRApp(App)
// 将 config 对象挂载到全局属性中
app.config.globalProperties.$config=config;
// 返回应用程序实例
return {
app
}
}
// #endif
re_path(r'^login/$', login.as_view(), name="api"),
re_path(r'^wx_login/$', wx_login.as_view(), name="api"),
class wx_login(APIView):
def post(self, request, *args, **kwargs):
""" 用户登录 """
# params用于获取字符串,
# data:用于获取正文,
# post方法两个参数都可以使用,get方法只能使用params
# request.data{'code':'0042e209909bdc1de90a985721788fba','userInfo': {'avatarUrl': 'https://thirdqq.qlogo.cn/qqapp/1111606452/8ABBB9AD27105F660A44709478527506/100','nickName': 'test'}}
code = request.data.get('code')
print(code)
# 检测用户和密码是否正确,此处可以在数据进行校验。
payload = {}
token = {}
if code:
return Response({'status': "True", 'userInfo': payload}, headers={'token': token})
else:
return Response({'status': "False", 'error':"报错咯"})