微信小程序商城开发之用微信授权并实现个人中心的页面代码

1. 前言

随着电商行业的不断发展，越来越多的企业选择在微信平台开设自己的小程序商城。小程序具有轻便快捷、操作简单等特点，为消费者提供了更加便利的购物体验。在小程序商城的开发过程中，授权是一个比较重要的环节，授权之后才能进入个人中心进行相关操作。

2. 微信授权

2.1 微信授权流程

微信授权是指在用户同意的情况下，获取用户基本信息的过程。小程序商城中需要授权的地方有登录、个人中心。接下来我们就来介绍一下微信授权的流程。

首先，用户需要进入小程序商城中的登录或者个人中心页面。页面中会出现微信登录的按钮，用户点击登录按钮后会触发wx.login()函数，这个函数的返回值是一个code。接下来，我们需要通过这个code和appid、appsecret向微信服务器发送请求获取session_key和openid。

获取到session_key和openid后，就可以通过wx.getUserInfo()函数获取用户的基本信息了。获取到的用户信息包括：昵称、头像、性别、所在城市和所在国家等。在小程序商城中，我们一般只需要获取用户的昵称和头像信息即可，下面是获取用户信息的代码：

wx.getUserInfo({
  success: function(res) {
    var userInfo = res.userInfo;
    var nickName = userInfo.nickName;
    var avatarUrl = userInfo.avatarUrl;
    var gender = userInfo.gender; //性别 0：未知、1：男、2：女
    var province = userInfo.province;
    var city = userInfo.city;
    var country = userInfo.country;
  }
})

上面的代码中，我们首先调用wx.getUserInfo()函数，接着在success回调函数中获取用户信息，并将获取到的信息存储在userInfo对象中。

2.2 获取用户信息的授权

获取用户信息需要经过用户授权，在小程序中需要先通过button组件的open-type属性设置为“getUserInfo”，再绑定一个事件来获取用户信息。

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权登录</button>
Page({
  data: {
    userInfo: {}
  },
  getUserInfo: function(e) {
    console.log(e)
    var userInfo = e.detail.userInfo
    //将用户信息保存在本地缓存中
    wx.setStorageSync('userInfo', userInfo)
    this.setData({
      userInfo: userInfo
    })
  }
})

在上面的代码中，我们首先在button组件中设置open-type属性为getUserInfo，并绑定了一个事件getUserInfo。在事件中，我们通过e.detail.userInfo获取到了用户的基本信息，并将获取到的信息存储在本地缓存中。

3. 实现个人中心的页面代码

完成微信授权之后，我们就可以开始实现小程序商城的个人中心页面了。个人中心页面包括用户的基本信息、订单信息、收货地址等模块。下面的代码是个人中心页面的框架代码：

<view class="container">
  <view class="header">
    <view class="avatar">
      <image src="{{userInfo.avatarUrl}}" mode="aspectFit">
    </view>
    <view class="name">{{userInfo.nickName}}</view>
  </view>
  <view class="menu">
    <view class="menu-item" bindtap="goToOrderList">
      <image src="../../images/order.png" class="icon">
      <view class="text">我的订单</view>
      <image src="../../images/arrow-right.png">
    </view>
    <view class="menu-item" bindtap="goToAddressList">
      <image src="../../images/address.png" class="icon">
      <view class="text">收货地址</view>
      <image src="../../images/arrow-right.png">
    </view>
  </view>
</view>

上面的代码中，我们使用了view组件来布局个人中心页面，其中包括了header、menu两个区域。

header区域主要展示用户的头像和昵称信息。

menu区域包括了我的订单和收货地址两个模块，用户可以点击这两个模块来查看自己的订单和收货地址信息。

接下来，我们需要实现goToOrderList和goToAddressList这两个函数，来处理用户点击我的订单和收货地址模块的事件。

goToOrderList: function(){
  wx.navigateTo({
    url: '../order-list/order-list'
  })
},
goToAddressList: function(){
  wx.navigateTo({
    url: '../address-list/address-list'
  })
}

在上面的代码中，我们使用wx.navigateTo()函数来跳转到订单列表页面和收货地址列表页面。

4. 总结

微信授权和个人中心页面是小程序商城开发中比较重要的一个环节。授权可以获取用户的基本信息，而个人中心页面可以让用户查看自己的订单信息和收货地址等内容。在授权和个人中心页面的开发中，我们可以学习到小程序中组件的使用、事件的绑定、页面的跳转等知识点。

在小程序开发中，我们还需要不断学习和实践，熟悉小程序的开发流程和基本语法规则，不断提升自己的开发技能和水平。