view 判断显示 微信_ThinkPHP6.0 + UniApp 实现小程序的 微信登录

微信登录思路：

在main.js 中封装公共函数，用于判断用户是否登录

在main.js 中定义全局变量，用于存储接口地址

如果没有登录、则跳转至登录页面

进入登录页面

通过 wx.login 获取用户的 code

通过 code 获取用户的 SessionKey、OpenId 等信息【本应后台接口、但是此处使用js发送请求】

通过 openId 调用后台 Api 获取用户的信息

获取成功，则说明已经授权过了,直接登录成功

获取失败，则说明没有授权过，需要授权之后才能进行登录

用户点击页面微信登录按钮【 】

获取用户数据，然后调用后台接口写入数据库

2.在 applets/main.js 中添加如下

// 封装全局登录函数// backpage, backtype 2个参数分别代表：// backpage : 登录后返回的页面// backtype : 打开页面的类型[1 : redirectTo 2 : switchTab]Vue.prototype.checkLogin = function( backpage, backtype ){
      // 同步获取本地数据(uid、随机码、用户名、头像)  var user_id = uni.getStorageSync('user_id');  var user_nu = uni.getStorageSync('user_nu');  var user_nm = uni.getStorageSync('user_nm');  var user_fa = uni.getStorageSync('user_fa');  if( user_id == '' || user_nu == '' || user_fa == ''){
        // 使用重定向的方式跳转至登录页面    uni.redirectTo({
    url:'../login/login?backpage='+backpage+'&backtype='+backtype});    return false;  }  // 登录成功、已经登录返回数组 [用户 id, 用户随机码, 用户昵称, 用户表情]  return [user_id, user_nu, user_nm, user_fa];}// 定义一个全局的请求地址Vue.prototype.apiServer = 'http://0608.cc/'

3.在 pages/login/login.vue 中添加如下

<template>  <view>        <view>      <view>        <view class="header"><image src="/static/img/public/login-wx.png">image>view>        <view class="content">          <view>申请获取以下权限view>          <text>获得你的公开信息(昵称，头像、地区等)text>        view>        <button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">授权登录button>      view>    view>      view>template><script>export default {
      data() {
        return {
          appid: '*************',      secret: '*************************',      code: '',      sessionKey: '',      openId: &#