声明:本站文章均为作者个人原创,图片均为实际截图。如有需要请收藏网站,禁止转载,谢谢配合!!!

本篇博客已配套视频讲解教程, 点击查看 Bilibili 视频教程



开发准备: 小程序 appid,secret, easywechat

获取session_key

用户端自登录(获取code) -> 请求后端接口获取session_key -> 用户端保存session_key

1.用户端获取code

        getSessionKey(){
                uni.login({
                    success: (info) => {
                        console.log('Login信息', info)
                        uni.request({
                            url: this.domain + '/api/wechat/getSessionKey',
                            method:'POST',
                            data: {
                                code: info.code
                            },
                            success: (res) => {
                                this.session_key = res.data.data.session_key
                            }
                        })
                    }
                })
            },

下载附件

2.接口

function getSessionKey(){
    $data = $this->app->auth->session($this->post['code']);
    $this->success('获取session_key成功', $data);
}

3.请求接口获取session_key

下载附件

下载附件

获取用户信息

用户端自获取用户信息(获取 iv + encryptedData + signature + session_key) -> 请求后端接口获取token -> 用户端保存token

1.放置请求授权用户信息按钮

<button open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</button>

2.打印授权信息

下载附件

3.后端接口

function getUserInfo(){
    $data = $this->app->auth->session($this->post['code']);
    $this->success('获取session_key成功', $data);
}

接口返回信息

下载附件

获取用户手机号

注: 只有300元微信认证的小程序才有权限获取用户手机号

用户端弹窗请求授权获取手机号( 获取 iv + encryptedData + session_key ) -> 请求后端接口获取手机号

1.放置请求授权手机号弹窗按钮

<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>

2.弹出请求授权手机号弹窗

下载附件

3.打印授权信息

下载附件

4.请求接口获取手机号

下载附件

注: session_key 是第一步获得的 session_key

前端完整代码

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>

        <button @click="getSessionKey">获取session_key</button>
        <button open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</button>
        <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: '八点博客',
                domain: 'http://example-fastadmin.badianboke.com',
                session_key: ''
            }
        },
        created() {
            this.getSessionKey()
        },
        methods: {
            getSessionKey(){
                uni.login({
                    success: (info) => {
                        console.log('Login信息', info)
                        uni.request({
                            url: this.domain + '/api/wechat/getSessionKey',
                            method:'POST',
                            data: {
                                code: info.code
                            },
                            success: (res) => {
                                this.session_key = res.data.data.session_key
                            }
                        })
                    }
                })
            },
            getUserInfo(e){
                console.log('getUserInfo信息:', e)
                uni.request({
                    url: this.domain + '/api/wechat/getUserInfo',
                    method:'POST',
                    data: {
                        session_key: this.session_key,
                        iv: e.detail.iv,
                        encryptedData: e.detail.encryptedData,
                    },
                    success: (res) => {

                    }
                })
            },
            getPhoneNumber(e){
                console.log('getPhoneNumer信息:', e)
                uni.request({
                    url: this.domain + '/api/wechat/getPhoneNumer',
                    method:'POST',
                    data: {
                        session_key: this.session_key,
                        iv: e.detail.iv,
                        encryptedData: e.detail.encryptedData,
                    },
                    success: (res) => {
                    }
                })
            }
        }
    }
</script>

<style>
.content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 300rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
    button{
        margin-top: 30rpx;
    }
</style>

后端完整代码

<?php

namespace app\api\controller;

use app\common\controller\Api;
use app\common\job\Test;
use think\Queue;
use EasyWeChat\Factory;


/**
 * 微信接口
 */
class Wechat extends Api
{
    protected $noNeedLogin = ['*'];
    protected $noNeedRight = ['*'];

    protected $config = [
        'app_id' => 'wxxx',
        'secret' => 'xxx',
        'response_type' => 'array',
        'log' => [
            'level' => 'debug',
            'file' => __DIR__.'/wechat.log',
        ],
    ];

    protected $post = [];



    public function _initialize()
    {
        parent::_initialize();
        $this->app = Factory::miniProgram($this->config);
        $this->post = $this->request->post();
    }


    /**
     * 获取session_key
     */
    function getSessionKey(){
        $data = $this->app->auth->session($this->post['code']);
        $this->success('获取session_key成功', $data);
    }

     /**
     * 获取用户信息
     */
    function getUserInfo(){
        $data = $this->app->encryptor->decryptData($this->post['session_key'], $this->post['iv'], $this->post['encryptedData']);
        $this->success('获取用户信息成功', $data);
    }


     /**
     * 获取手机号
     */
    function getPhoneNumer(){
        $data = $this->app->encryptor->decryptData($this->post['session_key'], $this->post['iv'], $this->post['encryptedData']);
        $this->success('获取用户手机号成功', $data);
    }

}