微信小程序获取用户信息、登录流程、支付流程

1.获取用户信息

第一种：

通过 open-data 获取

  <open-data type="userAvatarUrl"></open-data>

需要注意 open-data 基础库 1.4.0 才开始支持，低版本需做兼容处理

<view wx:if="canIUseOpenData">
    <view class="avatar">
        <open-data type="userAvatarUrl"></open-data>
    </view>
    <open-data type="userNickName"></open-data>
</view>

    data: {

        canIUseOpenData: wx.canIUse('open-data.type.userAvatarurl'),

    },

在 js => data 中定义 获取 信息

2.第二种：

通过点击授权获取

<view wx:if="{{!userInfo.avatarUrl}}">
<button bindtap="getUserProfile">获取头像昵称</button>
</view>
<view wx:else="{{userInfo.avatarUrl}}">
<image src="{{userInfo.avatarUrl}}"></image>
</view>

 

    data: {
        //第一种：获取信息
        canIUseOpenData: wx.canIUse('open-data.type.userAvatarurl'),

        //第二种
        //存放用户信息
        userInfo: {},
        // 是否有，默认无
        hasUserInfo: false,
    },

定义获取方法

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

 两种方法可以同时使用。注意把  wx:if 更改为 wx:elif  即可

<view wx:if="{{!userInfo.avatarUrl}}">
 //如果同时使用把 wx:if 更改为 wx:elif  即可

如果还有更好用的方法，欢迎分享！

2. 登录流程

简单来说：

1.获取用户的头像和昵称信息(可选)   
2.通过wx.login()获取code   
3.把code+用户信息(可选)发送给后端     

4.后端通过code+appid+AppSecret向微信的服务器换取openid
5. openid就是用户的唯一标识符 (判断用户的权限信息)再返回给第3步前端

前三步前端做、后两步 后端做

3.支付流程

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