微信登录小程序获取openId

软件准备：微信开发者工具HbuilderX、eclipse

使用Hbuilder创建一个uni-app项目。

建设项目后去uni-app在官方网站上，查找登录和请求部分的代码块。

onload初始化方法

onLoad() {     //uni登录     uni.login({         provider: 'weixin',         success: function (loginRes) {         console.log(loginRes);         }     }); },   

网络请求部分：

代码块的前端部分：

<template>  <view class="content">   <image class="logo" src="/static/logo.png"></image>   <view class="text-area">    <text class="title">{     
      {title}}</text>   </view>  </view> </template>  <script>  export default {   data() {    return {     title: 'Hello'    }   },   onLoad() {             //登录    uni.login({      provider: 'weixin',      success: function (loginRes) {        console.log(loginRes);     //发起请求     uni.request({         url: 'http://localhost:8080/wx/code?code='  loginRes.code,          data: {},         success: (res) => {             console.log(res);                      }     });      }    });   },   methods: {    }  } </script>  <style>  .content {   display: flex;   flex-direction: column;   align-items: center;   justify-content: center;  }   .logo {   height: 200rpx;   width: 200rpx;   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;  } </style> 

申请微信小程序测试号，申请后可获得测试APPID小程序秘钥。

将APPID配置在mainfest.json如图所示，文件夹下：

使用小程序模拟器和微信开发者工具。

可见已经拿到了code。

进入eclipse，编写后端代码

创建mavenproject并在pom依赖导入文件：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion>

<groupId>com.feicheng</groupId> <artifactId>yuyang</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging>

<name>yuyang</name> <url>http://maven.apache.org</url>

<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.1</version> <relativePath /> <!-- lookup parent from repository --> </parent>

<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <java.version>1.8</java.version> </properties>

<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>

<dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.1</version> </dependency>

<dependency> <groupId>hu.blackbelt.bundles.swagger-parser</groupId> <artifactId>io.swagger.parser</artifactId> <version>1.0.47_1</version> </dependency>

&nsp;       <dependency>             <groupId>mysql</groupId>             <artifactId>mysql-connector-java</artifactId>             <version>8.0.22</version>         </dependency>                  <dependency>             <groupId>com.alibaba</groupId>             <artifactId>fastjson</artifactId>             <version>1.2.73</version>         </dependency>              </dependencies>

    <build>         <plugins>             <plugin>                 <groupId>org.springframework.boot</groupId>                 <artifactId>spring-boot-maven-plugin</artifactId>             </plugin>         </plugins>     </build> </project>  

利用代码生成器生成一套controller、service、entity、mapper代码。 

编写启动类：

package com.feicheng.yuyang;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;


@SpringBootApplication
@MapperScan("com.feicheng.yuyang.mapper")
public class App 
{
    public static void main(String[] args )
    {
    	SpringApplication.run(App.class, args);
    }
}

创建一个config包，编写config代码

package com.feicheng.yuyang.config;

import org.springframework.context.annotation.Bean;
import org.springframework.http.client.ClientHttpRequestFactory;
import org.springframework.http.client.SimpleClientHttpRequestFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.client.RestTemplate;

@Component
public class SystemConfig {

	@Bean
	public ClientHttpRequestFactory simpleClientHttpRequestFactory() {
		SimpleClientHttpRequestFactory factory = new SimpleClientHttpRequestFactory();
		//客户端与服务器建立连接超时时间
		factory.setConnectTimeout(1000);
		//客户端与服务器读取的超时时间
		factory.setReadTimeout(2000);
		return factory;
	}
 
	@Bean
	public RestTemplate restTemplate(ClientHttpRequestFactory factory) {
		return new RestTemplate(factory);
	}
}

在控制层编写请求代码：

需要用到微信官方文档的openId的get请求

 

 写入代码中并替换值：

package com.feicheng.yuyang.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;

import com.alibaba.fastjson.JSONObject;

@RestController
@RequestMapping("/wx")
public class WxSystemController {
 
	@Autowired
	RestTemplate restTemplate;
 
	@GetMapping("/code")
	public JSONObject code(String code) {
		JSONObject result = new JSONObject();
  
		// 向微信发请求 获取onenId
		String appId = "wx（个人APPID）b82c08";
		
		String secret = "024e（小程序秘钥）33dab55b35";
		
		String url = "https://api.weixin.qq.com/sns/jscode2session?appid="+appId+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code";
		
		//发送HTTP请求
		ResponseEntity<String> wxResult = restTemplate.getForEntity(url, String.class);
		//把String转换成JSON
		JSONObject wxJsonObject = JSONObject.parseObject(wxResult.getBody());
		//获取openId
		String openId = wxJsonObject.getString("openid");
		
		return result;
 }
}

debug运行代码：

刷新微信开发者工具并在后端debug

 可以看到，成功获取到测试openID