上传文件至 '新闻小程序/pages/me'

个人主页

新闻小程序/pages/me/me.js

@@ -0,0 +1,44 @@
+Page({
+  data: {
+    userInfo: '',
+  },
+  onLoad() {
+    // 获取缓存中的用户信息
+    let user = wx.getStorageSync('user')
+    this.setData({
+      userInfo: user
+    })
+  },
+  // 点击事件-登录
+  login() {
+    console.log('点击了登录按钮')
+    wx.getUserProfile({
+      desc: '登录后才能使用',
+      success: res => {
+        let user = res.userInfo
+        console.log('授权成功', res.userInfo)
+        // 缓存用户信息到本地
+        wx.setStorageSync('user', user)
+        this.setData({
+          userInfo: user
+        })
+      },
+      fail: res => {
+        console.log('授权失败', res)
+      }
+    })
+  },
+  // 点击事件-退出登录
+  loginOut() {
+    this.setData({
+      userInfo: ''
+    })
+    // 将用户信息清空
+    wx.setStorageSync('user', null)
+  },
+  gotoCollect() {
+    wx.navigateTo({
+      url: '/pages/collect/collect',
+    })
+  },
+})

新闻小程序/pages/me/me.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

新闻小程序/pages/me/me.wxml

@@ -0,0 +1,25 @@
+<view class="header">
+  <button class="login_btn" wx:if="{{!userInfo}}" bindtap="login" type="primary">授权登录</button>
+  <view class="root" wx:else>
+    <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
+    <text class="nickName">{{userInfo.nickName}}</text>
+    <text class="login_out" bindtap="loginOut">退出登录</text>
+  </view>
+</view>
+
+<view wx:if="{{userInfo}}">
+  <view class="item">
+    <button class="button" bindtap="gotoCollect">我的收藏</button>
+    <view class="right_arrow"></view>
+  </view>
+</view>
+
+<view class="item">
+  <button class="button" open-type="feedback">意见反馈</button>
+  <view class="right_arrow"></view>
+</view>
+
+<view class="item">
+  <button class="button" open-type="contact">在线客服</button>
+  <view class="right_arrow"></view>
+</view>

新闻小程序/pages/me/me.wxss

@@ -0,0 +1,64 @@
+.header {
+  height: 400rpx;
+  background: #2b4b6b;
+  padding-top: 1px;
+}
+.login_btn {
+  margin-top: 100rpx;
+  width: 400rpx;
+}
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.touxiang {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  margin-top: 30rpx;
+  margin-bottom: 10rpx;
+}
+.nickName {
+  font-size: large;
+  color: snow;
+  margin-bottom: 30rpx;
+}
+.login_out {
+  font-size: 33rpx;
+  color: rgb(160, 155, 155);
+}
+
+/* 用css画一个箭头 */
+.right_arrow {
+  border: solid black;
+  border-width: 0 3px 3px 0;
+  padding: 3px;
+  position: absolute;
+  right: 15px;
+  /* margin-left: 66% */
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+.item {
+  display: flex;
+  padding: 25rpx;
+  background: rgb(219, 211, 211);
+  align-items: center;
+  border-bottom: 1px solid snow;
+}
+
+.button {
+  width: 100%;
+  background: rgb(219, 211, 211);
+  border: none;
+  text-align: left;
+  padding: 0px;
+  margin: 0px;
+  line-height: 1.3;
+  font-size: 16px;
+}
+.button::after {
+  border: none;
+  border-radius: 0;
+}