微信登录的流程

需求分析：

1. 首页中, 单击登录按钮，显示微信登录弹窗，在授权后，隐藏弹窗，并把用户信息存储在Storage中
2. list页面中，初始化进入时，要判断是否登录，登录，则直接显示页面内容，没登录，则显示弹窗
3. cloud页面中，单击退出账号，清除Storage
   、

自定义组件 login

login.wxml

<view class="login">
  <view>标题：登录{{num}}次------{{newMsg}}</view>
  <button  bindtap="getInfo" type="primary" class="btn" >微信登录</button>
</view>

login.wxss

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #000;
  z-index: 9999;
}

login.js

// components/common/login/login.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    newMsg: {
      type: String,
      value: '默认值'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    num: 9,
    msg: '初始数据'

  },

  /**
   * 组件的方法列表
   */
  methods: {
    getInfo(e) {
      wx.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log(res);
          //把获取的用户昵称和头像地址存在storage
          let { nickName ,avatarUrl} = res.userInfo
          let user = {
            nickName,
            avatarUrl
          }
          wx.setStorage({
            key:"userinfo",
            data: user
          })
          this.triggerEvent("change",false)
        },
        fail(err){
          console.log('拒绝');
        }
      })
    },
  }
})

首页代码

index.json

{
  "usingComponents": {
    "com-login": "/components/common/login/login"
  }
}

index.wxml

<view><button bindtap="onLogin">登录</button></view>
  <!-- 微信登录的弹窗 -->
  <block wx:if="{{isLoginShow}}"> 
    <com-login bindchange="getChange" new-msg="新值"></com-login>
  </block>

index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    isLoginShow: false,
  },
  // 单击登录时，显示弹窗
  onLogin(){
    this.setData({
      isLoginShow: true
    })
  },
  //监听子组件发送的事件
  getChange(e){
    this.setData({
      isLoginShow: e.detail
    })
  },
})

购物车页面

cart.json

{
  "usingComponents": {
    "com-login": "/components/common/login/login"
  }
}

cart.wxml

<block wx:if="{{isLoginShow}}">
    <com-login></com-login>
</block>
<view>列表页其它内容</view>

cart.js

Page({
  data: {
    isLoginShow: true
  },
  onShow: function (options) {
    console.log('onshow');
    wx.getStorage({
      key: 'userinfo',
      success:(res)=> {
        this.setData({
          isLoginShow: false
        })
      },
      fail:()=>{
        console.log('没有数据');
        this.setData({
          isLoginShow: true
        })
      }
    })
  }
})

我的页面

my.wxml

<view><button type="primary" bindtap="logout"> 退出登录</button></view>

my.js

// 退出登录
logout(){
  wx.removeStorage({
    key: 'userinfo',
  })
},