微信小程序微商城（九）：微信授权并实现个人中心页面页面

左手的ㄟ右手 2022-05-18 09:44 559阅读 0赞

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

上一篇：[微信小程序微商城（八）：缓存实现商品购物车功能][Link 1]

看效果

![70][]

开发计划

1、实现微信授权并获取用户信息
    2、个人中心页面布局

一、实现微信授权并获取用户信息

mine.js

onLoad: function () {    
        if (app.globalData.userInfo) {      
            this.setData({        
            userInfo: app.globalData.userInfo,        
            hasUserInfo: true
          })
        } else if (this.data.canIUse) {      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => {        this.setData({          userInfo: res.userInfo,          hasUserInfo: true
            })
          }
        } else {      // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({        success: res => {
              app.globalData.userInfo = res.userInfo          this.setData({            userInfo: res.userInfo,            hasUserInfo: true
              })
            }
          })
        }
      },  
    getUserInfo: function (e) {    
        console.log(e)
        app.globalData.userInfo = e.detail.userInfo    
        this.setData({      
            userInfo: e.detail.userInfo,      
            hasUserInfo: true
        })
      }

二、实现微信授权并获取用户信息

mine.wxml

<view class="userinfo">
      <button wx:if="{
       {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-btn"> 点击微信授权 </button>
      <block wx:else>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{
       {userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{
       {userInfo.nickName}}</text>
      </block></view><view class="separate"></view><view class="order" catchtap="toOrder">
      <text class="myorder-text">我的订单</text>
      <text class="myorderlook-text">查看全部订单</text></view><view class="line"></view><view class="navs">
      <block wx:for-items="{
       {orderItems}}" wx:key="name">
        <view class="nav-item" catchtap="toOrder" data-type="{
       {item.name}}" data-typeid="{
       {item.typeId}}">
          <image src="{
       {item.imageurl}}" class="nav-image" />
          <text>{
       {item.name}}</text>
        </view>
      </block></view><view class="separate"></view><view class="person-list">
    
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_card.png"></image>
        <text class="item-text">优惠券</text>
      </view>
      <view class="person-line"></view>
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_favorite.png"></image>
        <text class="item-text">我的收藏</text>
      </view>
      <view class="person-line"></view>
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_site.png"></image>
        <text class="item-text">收货地址</text>
      </view>
      <view class="person-line"></view>
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_sale_record.png"></image>
        <text class="item-text">售后记录</text>
      </view>
      <view class="person-line"></view>
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_evaluated.png"></image>
        <text class="item-text">我的评价</text>
      </view>
      <view class="person-line"></view>
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_customer.png"></image>
        <text class="item-text">在线客服</text>
      </view></view><view class="separate"></view>

mine.wxss

.userinfo {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        background: #f0145a;   
        width: 100%; 
        height: 300rpx;
    }
    .userinfo-btn{  
        margin-top: 50rpx;  
        background: none !important;  
        color: #fff !important;  
        font-size: 40rpx;
    }
    .account-bg {  
        width: 100%;  
        height: 150rpx;
    }
    .userinfo-avatar {  
        width: 108rpx;  
        height: 108rpx;  
        margin: 40rpx;  
        border-radius: 50%;
    }
    .userinfo-nickname {  
        color: #fff;
    }
    /* 订单 */
    .order {  
        display: flex;  
        flex-direction: row;  
        align-items: center;  
        width: 100%;  
        height: 90rpx;
    }
    .myorder-text {  
        font-size: 34rpx;  
        color: gray;  
        margin: 20rpx;  
        width: 40%;
    }
    .myorderlook-text {  
        font-size: 32rpx;  
        color: gray;  
        position: relative;  
        right: 20rpx;  
        width: 60%;  
        text-align: right;
    }
    .next-image {  
        width: 20rpx;  
        height: 25rpx;  
        position: relative;  
        right: 10rpx;
    }
    .navs {  
        display: flex;
    }
    .nav-item {  
        width: 25%;  
        display: flex;  
        align-items: center;  
        flex-direction: column;  
        padding: 20rpx;
    }
    .nav-item .nav-image {  
        width: 55rpx;  
        height: 55rpx;  
        margin: 5rpx;
    }
    .nav-item text {  
        margin-top: 20rpx;  
        font-size: 28rpx;  
        color: gray;
    }
    /* 列表 */
    .person-list {  
        display: flex;  
        flex-direction: column;  
        align-items: left;
    }
    .list-item {      
        display: flex;  
        flex-direction: row;  
        align-items: center;  
        height: 80rpx;
    }
    .item-image {  
        width: 40rpx;  
        height: 40rpx;  
        margin: 20rpx;
    }
    .item-text {  
        color: gray;  
        font-size: 30rpx;  
        margin-left: 20rpx;
    }
    .person-line {  
        width: 80%;  
        height: 2rpx;  
        background: lightgray;  
        margin-left: 90rpx;
    }

mine.js

var app = getApp()
    Page({  
        data: {    
            userInfo: {},    
            hasUserInfo: false,        
            canIUse: wx.canIUse('button.open-type.getUserInfo'),    
            orderItems: [
          {        
            typeId: 0,        
            name: '待付款',        
            url: 'bill',        
            imageurl: '../../images/person/personal_pay.png',
          },
          {        
            typeId: 1,        
            name: '待收货',        
            url: 'bill',        
            imageurl: '../../images/person/personal_receipt.png',
          },
          {        
            typeId: 2,        
            name: '待评价',        
            url: 'bill',        
            imageurl: '../../images/person/personal_comment.png'
          },
          {        
            typeId: 3,        
            name: '退换/售后',        
            url: 'bill',        
            imageurl: '../../images/person/personal_service.png'
          }
        ],
      },  
        //事件处理函数
      toOrder: function () {
        wx.navigateTo({      url: '../order/order'
        })
      }
    }

mine.json

{  "navigationBarTitleText": "个人中心"}

备注

微信小程序微商城系列 都是通过https 动态获取数据并展示的，建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去，谢谢各位！大家在使用过程中有哪些建议可以提出来，我们一起学习哈~~~

微信小程序微商城系列

[微信小程序微商城：开发者key获取][key]  
[微信小程序微商城（一）：https框架搭建并实现导航功能][https]  
[微信小程序微商城（二）：电商首页轮播、分类导航和新品特卖实现][Link 2]  
[微信小程序微商城（三）：电商首页福利专场无限下拉刷新动态API数据实现][API]  
[微信小程序微商城（四）：动态API实现商品详情页（上）][API 1]  
[微信小程序微商城（五）：动态API实现商品详情页（下）][API 2]  
[微信小程序微商城（六）：动态API实现新品特卖商品流式布局][API 3]  
[微信小程序微商城（七）：动态API实现商品分类][API 4]  
[微信小程序微商城（八）：缓存实现商品购物车功能][Link 1]

关注我们

如果需要源码和素材可以关注“IT实战联盟”公\*众\*号并留言（微商城源码，5个字会收到源码下载地址，一定要看源码里面的操作手册会少走很多弯路），也可以加入交流群和作者互撩哦~~~

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

[http_blog.100boot.cn]: http://blog.100boot.cn/
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484665&idx=1&sn=d93e7e797a8114ea72b902070c5f4af0&chksm=fc4df6b8cb3a7faef73ceff73d9831eb7cd8b69319290986a7dd8c4414ffe05dce01f778a293&mpshare=1&scene=21&srcid=0802XRoek3nLAkKLH7KOj4cC&key=7124b505fbe8e194ee26d1a328f0f804326f12588e901486e2f3499b8011409cc51c0cbeec2bc3f90b8d873bac076f7b95a8cf0bf9816db838dfe758bb4beda7c65f5a36d360c4945afeceb449c1ff0b&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=/uNjC5yMFnEcflVQ1ScvBcRbVDZQnioiguTRqmas3OkOk44lNpsbMkD1upBW0tn7#wechat_redirect
[70]: /images/20220518/175d05b1574d43f295292e19d3482fa4.png
[key]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484489&idx=2&sn=fc4d45faecbd7d702298aeee26cb389a&chksm=fc4df608cb3a7f1eda90f46b2119f3f57552f69c0aeac475d3320f6a3e252b1ea664fa7be2e3&mpshare=1&scene=21&srcid=0613CgkG8U8GmYCgMLNwf0SQ&key=0ca581e96f9f14296135cd5c62f3396e5b142b077a4b28dc59f9d2660b1615e4c29e32f353744b14703530eb2c1401ed93b62db580cf8d37021539c994c20528da24c59e7513c166bc48b341bb2f6165&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[https]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484489&idx=1&sn=b30937e849bece0968ea07ac72b83d11&chksm=fc4df608cb3a7f1ea60ab5b51108c080baa1a79c75c8a7231421d85ec07c7c0ef713cc772b84&mpshare=1&scene=21&srcid=0613hky4NypPiIvTYp7yPXEK&key=cb58026704e90da05c9bb8c1e0058f00378cf7005c217c2f2b9fec70ac71b74a51e2000b118aa9b882a0e5a35ca7b536920fa63b700d4c624a71e31c5ddc4925cb70cfe3e5ec46ca9841ffa357610357&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[Link 2]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484498&idx=1&sn=03bd2b638203a9fd3bc5314cf96a0f5a&chksm=fc4df613cb3a7f0557f113ef814d06ca28c395fd5053756eda4811c7df6fa95604f9171fe383&mpshare=1&scene=21&srcid=06136trF43RMxRkzdSpLrSm1&key=28a021edb6a1ada0e2e6b8a9e3d4ed36e9a02977c3ac3d4414ed747e08e5ab6952338ea87fed34f2a5064003302a2773b0652665c21743b43b9943cf819bd90eb830887b0919c2fa5453c04b72910225&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[API]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484532&idx=1&sn=2fddf4e443288e3fec41393fa751a0df&chksm=fc4df635cb3a7f23c8c846c57a543b15f9aff5f3cbd66a2d0cb40bec236c233f3385cfbc54da&mpshare=1&scene=21&srcid=0613oKpIiyVZLjDtjc9k33BD&key=abba1b7731e3ee594e57918b9830a98c76a76dc40fdb0b7cbc313afa8e9a71043f6b58c675129778ac8f55a62526dc735b90ef574155ada0253b36c0ac82f89400626cf41e3ed5a6069d75d71447c811&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[API 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484573&idx=1&sn=532c79a23a34124f12fe18742862a065&chksm=fc4df6dccb3a7fcaf8bfa9e01677ba9e039df1626a4860b6babc2eaed0b441e1bfa6c78b8cac&mpshare=1&scene=21&srcid=06253QOBZClvSa6AWZCUiPHs&key=a4e2496d259028b023ae234f79eb7f7236f147c293aac7232090dbbe47380e30ae9c324096a5118986094382b61eed4321f0390a7def09f11c60edbd8f7f7af6c2207379e9d2ac8a75935bc7a4fd7b62&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=RiQfX7aFv1krSBkA4l9rb5O6TBfs0c0irkk7oYxMb8Kq7w/qrnJYQiMPOsoaemxD#wechat_redirect
[API 2]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484602&idx=1&sn=266f52c93555991342a53c54023e1cd6&chksm=fc4df6fbcb3a7fedf6955106d6a334ff261c9eccc4ef21d018e779a05e55a7a385c2dc3e198a&mpshare=1&scene=21&srcid=0629lHl8WErLVb5wLrGgxbzk&key=0858e38169824f6534380e37725cf31f96d30d43b0b9cf1b2e5fe21023cca8d2a17d8cc11c3b719f0995b1f9b6d94a92647ba1120a29b51dfdc6dd9627d38b8de1172ebb7ab60adf3165dfde4fdb9575&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=B/jVtPW4CBO7Y1M2PVvZJTsypbCj7Cq/R1MXoEZenwDn1b3Ke7p4ExqI%20bsdxrwD#wechat_redirect
[API 3]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484618&idx=1&sn=19d13006f5c2de9bca116f9a07eabffc&chksm=fc4df68bcb3a7f9daef274aa660c003d4a3f779ef7e88b6e5bc1a1549a39e419283c7d059d1f&mpshare=1&scene=21&srcid=0710OAyxIUC7gaqbp2Fu1naO&key=e4a49b375d6ee2523ba149218dc5f7058754dc6bafe7e2fb77270fab49eb9a3cc1a5a450940da2f5a70694f4b3236a3721493da752537062e67b54f68c9a7e5e35ee4cf01a92ec6efc692bb2f34f9514&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=LnFpt2WbaHWzS6SpgE0YXJmGsyZdHR1ZkrH4KDe/SbmL2QXo3agnduejh8Qi0P28#wechat_redirect
[API 4]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484642&idx=1&sn=3f7f2f92d2d087838d5ececcd29bbedd&chksm=fc4df6a3cb3a7fb571795c3825670d53314dac44cfd756ec71a6d2c43e936cecb5fdd5368b3c&mpshare=1&scene=21&srcid=0716zjdqO1q9zi5GUCAusN35&key=a4e2496d259028b0116de61c041ad35cc5cabb78cebaaf6cf1aa9138cf04ab90e878b3e8ab6b87bc5c013e1fa175c4691215e59cedc2d7889e9dfe0332bd0dac41e19b7925046f1895563a2e07b73e16&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=JapGSUpZUDPhMJpIVJhZwo3ZrPThTfV/aUjt2/xyHyqNzwYvMQ4xjS3MLA51vtEu#wechat_redirect