测试平台分支-小程序端-3-小程序登录（上）

怪盗LYL

发布于 2023-09-15 08:12:43

2520

发布于 2023-09-15 08:12:43

文章被收录于专栏：测试开发真货测试开发真货

一年没更新了，今天本地运行了下都快忘了写啥了。ε=(´ο｀*)))唉现在的行情还是多学习吧。

登录页面

首先我们创建一个修改下登录页面，也就是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>

登录效果

图案自己找喜欢的图放到路径下。其中font-size:

font-size-base; 和color:

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; //白

缺什么变量就补上什么变量同时在App.vue文件添加。

<style lang="scss">
</style>

刚刚是样式变量，除此之外在调用后端时候请求页用到变量：var URL = this.$config.baseUrl
这个是取得conf.js文件，再根目录下新建。

然后在main.js中引用它,这样我们在其他需要的地方都可以引用了，每次修改配置文件就好了不用每个文件都去修改。

// #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

后端项目

先将之前的wx_login改成login，wx_login作为我们微信登录的函数，网页的前端vue别忘了从wx_login改成login。

    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':"报错咯"})