本篇博客已配套视频讲解教程, 点击查看 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);
}
}