init master

miniprogram/app.json

@@ -1,5 +1,6 @@
 {
     "pages": [
+        "pages/personal/personal",
         "pages/index/index",
         "pages/logs/logs"
     ],
@@ -9,6 +10,17 @@
         "navigationBarTitleText": "Weixin",
         "navigationBarTextStyle": "black"
     },
+    "tabBar": {
+        "list": [{
+            "pagePath": "pages/index/index",
+            "text": "首页"
+        },
+        {
+            "pagePath": "pages/personal/personal",
+            "text": "个人中心"
+        }
+    ]
+    },
     "style": "v2",
     "sitemapLocation": "sitemap.json"
 }

miniprogram/app.ts

@@ -8,11 +8,11 @@ App<IAppOption>({
     wx.setStorageSync('logs', logs)
 
     // 登录
-    wx.login({
+    // wx.login({
-      success: res => {
+    //   success: res => {
-        console.log(res.code)
+    //     console.log(res.code)
-        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+    //     // 发送 res.code 到后台换取 openId, sessionKey, unionId
-      },
+    //   },
-    })
+    // })
   },
 })

miniprogram/pages/index/index.ts

@@ -6,6 +6,7 @@ Page({
     data: {
         motto: 'Hello World',
         userInfo: {},
+        open_id: '',
         hasUserInfo: false,
         canIUse: wx.canIUse('button.open-type.getUserInfo'),
         canIUseGetUserProfile: false,
@@ -39,11 +40,46 @@ Page({
         })
     },
     getUserInfo(e: any) {
-    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
+        // 用户授权操作后的回调
+        // 并直接返回匿名的用户个人信息
         console.log(e)
         this.setData({
             userInfo: e.detail.userInfo,
             hasUserInfo: true
         })
+    },
+    user_login() {
+        wx.login({
+            success: ({ code }) => {
+                if (!code) {
+                    wx.showToast({
+                        title: '获取授权数据失败'
+                    })
+                    return;
+                }
+                // 发起请求
+                wx.request({
+                    url: 'http://localhost:8080/wechat/login',
+                    data: { code },
+                    method: 'GET',
+                    success: (result) => {
+                        if (result.statusCode != 200) {
+                            wx.showToast({
+                                title: '登录失败'
+                            })
+                            return;
+                        }
+                        this.setData({
+                            open_id: result.data.toString()
+                        })
+                    }
+                })
+            },
+            fail: () => {
+                wx.showToast({
+                    title: '授权失败'
+                })
+            }
+        })
     }
 })

miniprogram/pages/index/index.wxml

@@ -1,21 +1,27 @@
 <!--index.wxml-->
 <view class="container">
   <view class="userinfo">
-    <block wx:if="{{canIUseOpenData}}">
+    <!-- <block wx:if="{{canIUseOpenData}}">
       <view class="userinfo-avatar" bindtap="bindViewTap">
         <open-data type="userAvatarUrl"></open-data>
       </view>
       <open-data type="userNickName"></open-data>
-    </block>
+    </block> -->
-    <block wx:elif="{{!hasUserInfo}}">
+    <!-- <block wx:if="{{!hasUserInfo}}">
       <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
-      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
+      <button wx:elif="{{canIUse}}" 
+      open-type="getUserInfo" 
+      bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
       <view wx:else> 请使用1.4.4及以上版本基础库 </view>
     </block>
     <block wx:else>
       <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+      <text class="userinfo-nickname">昵称：{{userInfo.nickName}}</text>
-    </block>
+    </block> -->
+    <button bindtap="user_login">登录</button>
+    <view>
+        {{open_id}}
+    </view>
   </view>
   <view class="usermotto">
     <text class="user-motto">{{motto}}</text>

miniprogram/pages/personal/personal.json

@@ -0,0 +1,7 @@
+{
+    "usingComponents": { },
+    "document-url":"https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html",
+    "navigationBarTitleText": "个人中心",
+    "navigationBarBackgroundColor": "#ceb17f",
+    "navigationBarTextStyle": "white"
+}

miniprogram/pages/personal/personal.less

@@ -0,0 +1,37 @@
+/* pages/personal.wxss */
+@content-widht:90%;
+.content-container{
+    width: @content-widht;
+    margin: auto;
+}
+.header{
+    background-color: #ceb17f;
+    color:white;
+    width: 100%;
+    padding: 30px 0;
+    .content-container{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .user-info{
+        display: flex;
+        align-items: center;
+    }
+    .user-avatar-wrapper{
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        display: inline-block;
+        overflow: hidden;
+    }
+    .nickname{
+        margin-left: 10px;
+        font-size: 20px;
+    }
+    .user-avatar{
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+}

miniprogram/pages/personal/personal.ts

@@ -0,0 +1,66 @@
+// pages/personal.ts
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

miniprogram/pages/personal/personal.wxml

@@ -0,0 +1,48 @@
+<!--pages/personal.wxml-->
+<view class="page-person">
+    <view class="header">
+        <div class="content-container">
+            <view class="user-info">
+                <view class="user-avatar-wrapper">
+                    <open-data class="user-avatar" type="userAvatarUrl"></open-data>
+                </view>
+                <text class="nickname">张三</text>
+            </view>
+            <view class="user-score">
+                <text>1,121</text>
+            </view>
+        </div>
+    </view>
+    <view>
+        <view class="grid">
+            <view class="grid-item">
+                <view class="icon">
+                </view>
+                <view class="text">
+                    <text>每次签到</text>
+                </view>
+            </view>
+            <view class="grid-item">
+                <view class="icon">
+                </view>
+                <view class="text">
+                    <text>兑换记录</text>
+                </view>
+            </view>
+            <view class="grid-item">
+                <view class="icon">
+                </view>
+                <view class="text">
+                    <text>积分游戏</text>
+                </view>
+            </view>
+            <view class="grid-item">
+                <view class="icon">
+                </view>
+                <view class="text">
+                    <text>我的收藏</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</view>

project.private.config.json

@@ -2,6 +2,8 @@
     "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
     "projectname": "PointApp",
     "setting": {
-        "compileHotReLoad": true
+        "compileHotReLoad": true,
-    }
+        "urlCheck": false
+    },
+    "libVersion": "2.23.0"
 }