写了一点点收藏页面的功能

app.json

@@ -31,7 +31,7 @@
       "pagePath": "pages/collection/collection",
       "text": "收藏",
       "iconPath": "image/icon/collection-icon.png",
-      "selectedIconPath": "image/icon/collection-selectIcon.png"
+      "selectedIconPath": "image/icon/collection-selecticon.png"
     },
     {
       "pagePath": "pages/user/user",

pages/collection/collection.js

@@ -5,21 +5,41 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    content: [
+      {
+        text: "我的收藏"
+      },
+      {
+        text: "我的已购"
+      },
+      {
+        text: "收听历史"
+      },
+      {
+        text: "我的礼包"
+      }
+    ]
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
+    var that = this;
+    wx.getSetting({
+      success(res) {
+        if (res.authSetting['scope.userInfo']) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
+          that.setData({
+            login: false
+          })
+        } else {
+          that.setData({
+            login: true
+          })
+        }
+      }
+    })
   },
 
   /**
@@ -29,38 +49,37 @@ Page({
 
   },
 
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
   /**
    * 用户点击右上角分享
    */
   onShareAppMessage: function () {
 
-  }
+  },
+  bindGetUserInfo(e) {
+    var that = this;
+    wx.getUserInfo({
+      success: function (res) {
+        console.log(e.detail.userInfo);
+        that.setData({
+          login: false,
+        })
+        // 存缓存
+        wx.setStorage({
+          key: 'avatarUrl',
+          data: e.detail.userInfo.avatarUrl,
+          success: (result) => {
+            console.log('缓存成功');
+          },
+
+        });
+        wx.setStorage({
+          key: 'nickName',
+          data: e.detail.userInfo.nickName,
+          success: (result) => {
+            console.log('缓存成功');
+          },
+        });
+      }
+    })
+  },
 })

pages/collection/collection.wxml

@@ -1,12 +1,33 @@
-
-<!-- logo -->
-<view class="logo" hover-class="none" hover-stop-propagation="false">
-    <image class="logoImg" src="/image/logo.png" mode="widthFix" lazy-load="false" binderror="" bindload=""></image>
-</view>
-
-<!-- 登录按钮 -->
-
-<view class="loginButton" hover-class="none" hover-stop-propagation="false">
-    <view class="wechatLogin"><button><text class="icon-github"></text>微信登录</button></view>
-    <view class="phoneLogin"><button>手机号登录</button></view>
-</view>
+<!-- 若是没有登录就显示登录界面 -->
+<block wx:if="{{login}}">
+    <!-- logo -->
+    <view class="logo" hover-class="none" hover-stop-propagation="false">
+        <image class="logoImg" src="/image/logo.png" mode="widthFix" lazy-load="false" binderror="" bindload=""></image>
+    </view>
+    <!-- 登录按钮 -->
+    <view class="loginButton" hover-class="none" hover-stop-propagation="false">
+        <view class="wechatLogin">
+            <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
+                <text class="icon-github"></text>
+                微信登录
+            </button>
+        </view>
+        <view class="phoneLogin">
+            <button>手机号登录</button>
+        </view>
+    </view>
+</block>
+<block wx:else>
+    <!-- 搜索框 -->
+    <view class="search marginTopBottom">
+        <view class="icon-search"></view>
+        <input placeholder="搜索你想听的节目"></input>
+    </view>
+    <view class="titleBar">
+      <view class="itemTitle" wx:for="{{content}}">
+          {{item.text}}
+          
+      </view>
+      
+    </view>
+</block>

pages/collection/collection.wxss

@@ -1 +1,26 @@
 /* pages/collection/collection.wxss */
+.titleBar{
+    width: 100%;
+    height: 80rpx;
+    /* 这个配色不对 */
+    border-bottom: 1rpx solid #aaaaaa;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 28rpx;
+    overflow: hidden;
+}
+.itemTitle{
+    width: auto;
+   
+}
+.currtline {
+    margin: -8rpx auto 0 auto;
+    width: 100rpx;
+    height: 1rpx;
+    border-radius: 4rpx;
+  }
+  .currtline.active {
+    background: #ff520f;
+    transition: all .3s;
+  }

pages/user/user.js

@@ -44,15 +44,20 @@ Page({
   // 获取用户的头像和昵称信息
   bindGetUserInfo(e) {
     var that = this;
-    console.log(e.detail.userInfo)
-    that.setData({
-      login:true,
-      avatarUrl:e.detail.userInfo.avatarUrl,
-      nickName:e.detail.userInfo.nickName
+    
+    wx.getUserInfo({
+      success: function(res) {
+        console.log(e.detail.userInfo);
+        that.setData({
+          login:true,
+          avatarUrl:e.detail.userInfo.avatarUrl,
+          nickName:e.detail.userInfo.nickName
+        })
+      }
     })
     
   },
-
+  
   /**
    * 用户点击右上角分享
    */