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

  • 2018-08-02 09:44
  • 阅读数 147


上一篇：微信小程序微商城（八）：缓存实现商品购物车功能
<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(15D21)&version=11020201&lang=zh_CN&pass_ticket=/uNjC5yMFnEcflVQ1ScvBcRbVDZQnioiguTRqmas3OkOk44lNpsbMkD1upBW0tn7#wechat_redirect>

看效果

 

 

 

开发计划
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获取
<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(15D21)&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(15D21)&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect>
微信小程序微商城（二）：电商首页轮播、分类导航和新品特卖实现
<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(15D21)&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(15D21)&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect>
微信小程序微商城（四）：动态API实现商品详情页（上）
<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(15D21)&version=11020201&lang=zh_CN&pass_ticket=RiQfX7aFv1krSBkA4l9rb5O6TBfs0c0irkk7oYxMb8Kq7w/qrnJYQiMPOsoaemxD#wechat_redirect>
微信小程序微商城（五）：动态API实现商品详情页（下）
<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(15D21)&version=11020201&lang=zh_CN&pass_ticket=B/jVtPW4CBO7Y1M2PVvZJTsypbCj7Cq/R1MXoEZenwDn1b3Ke7p4ExqI%20bsdxrwD#wechat_redirect>
微信小程序微商城（六）：动态API实现新品特卖商品流式布局
<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(15D21)&version=11020201&lang=zh_CN&pass_ticket=LnFpt2WbaHWzS6SpgE0YXJmGsyZdHR1ZkrH4KDe/SbmL2QXo3agnduejh8Qi0P28#wechat_redirect>
微信小程序微商城（七）：动态API实现商品分类
<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(15D21)&version=11020201&lang=zh_CN&pass_ticket=JapGSUpZUDPhMJpIVJhZwo3ZrPThTfV/aUjt2/xyHyqNzwYvMQ4xjS3MLA51vtEu#wechat_redirect>
微信小程序微商城（八）：缓存实现商品购物车功能
<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(15D21)&version=11020201&lang=zh_CN&pass_ticket=/uNjC5yMFnEcflVQ1ScvBcRbVDZQnioiguTRqmas3OkOk44lNpsbMkD1upBW0tn7#wechat_redirect>

关注我们


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

友情链接
KaDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱：[email protected]
QQ群：637538335
关注微信
©2016-2025 Matools All rights reserved, 粤ICP备17059708号