微信小程序 - 实现简单登录和支付的流程

本文基于小程序的wxml实现简单登录和个人信息展示。介绍了pandas相关的用户信息获取流程，包括获取头像昵称、code，后端换openid等；还阐述了支付流程，如用户下单、发送信息、请求支付等；最后给出了个人信息获取的代码。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

接上节简单介绍完小程序组件，这节实际运用小程序的wxml来实现一套简单登录和个人信息展示。

提示：以下是本篇文章正文内容，下面案例可供参考

一、pandas是什么？

1.获取用户的头像和昵称的信息(可选)
   2.通过wx.login ()获取code
   3.把code+用户信息（可选）发送给后端
   4.后端通过code+appid+Secret 向微信的服务器换取openid
   5.openid就是用户的唯一标识符(判断用户的权限信息)

二、支付流程

1.用户下单
2.订单信息，+code发送给服务端
3.wx.requestPayment(后端返回的5个参数和一个支付)
4.打开支付界面，返回支付结果

三、个人信息的获取

代码如下:

<!-- 如果没有用户的头像信息 -->
<view wx:if="{{!userInfo.avatarUrl}}">
  <!-- 是否可以获取用户信息 -->
  <button bindtap="getUserProfile"> 获取头像昵称 </button>
</view>
<view wx:else="{{userInfo.avatarUrl}}">
  <!-- 是否可以获取用户信息 -->
  <view class="avatar">    
  <image src="{{userInfo.avatarUrl}}" ></image>
   </view>
</view>

 getUserProfile(e) {
        // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
        wx.getUserProfile({
            desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            success: (res) => {

                this.setData({
                    userInfo: res.userInfo,

                })
            }
        })
    },