微信小程序登陆(全流程

您所在的位置：网站首页 › 小程序开发价钱高吗现在 › 微信小程序登陆(全流程

微信小程序登陆(全流程

2024-07-14 20:45| 来源: 网络整理| 查看: 265

环境要求

1.注册一个小程序

2.微信开发者工具

3.idea(springboot)

项目准备

用户登陆

前端开发，传递code

index.wxss

index.js

后端编写，调用微信接口，获取openId

现在用户的所有信息都拿不到，只能用户自己填写

其实微信前端是可以直接请求获取openId的，但是会暴露你的key和secret

流程：前端获取code->后端调用微信接口->返回openid给前端

项目准备

1.打开微信开发工具，点击添加

2.创建小程序

修改项目名称更换目录选择从网页创建好的小程序AppId选择不使用云服务模板选择基础使用javaScript的基础模板

用户登陆前端开发，传递code

首先画一个登陆按钮

index.wxml

前后端请求-响应测试登陆

index.wxss .test_view .title{ font-weight: bold; font-size: 18px; color: #5F687E; text-align: center; margin-bottom: 10px; } .test_view button{ background-color: palegoldenrod; } index.js // index.js // 获取应用实例 const app = getApp() Page({ // data: { // user_name:"小王" // }, clickLogin:function(){ wx.login({ success (res) { console.log("js_code",res.code) if (res.code) { //发起网络请求 wx.request({ url: 'http://localhost:8087/user/getWxInfoTest', method: 'post', data: { code: res.code } }) } else { console.log('登录失败！' + res.errMsg) } } }) } }) 后端编写，调用微信接口，获取openId

获取openId需要3个参数，appid，code，secret。

登录微信公众平台 =>开发管理=>开发设置=>开发者Id

appId

AppSecret

其中的HttpUtils参考我的这篇

httpUtils（怕大家还要去我的博客里找，这里给懒的同学~准备了一份直接复制就可以用的）

package com.example.tx_mini_pro.tools; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.MalformedURLException; import java.net.URL; public class HttpUtils { public static String getRequest(String httpurl) { HttpURLConnection connection = null; InputStream is = null; BufferedReader br = null; String result = null;// 返回结果字符串 try { // 创建远程url连接对象 URL url = new URL(httpurl); // 通过远程url连接对象打开一个连接，强转成httpURLConnection类 connection = (HttpURLConnection) url.openConnection(); // 设置连接方式：get connection.setRequestMethod("GET"); // 设置连接主机服务器的超时时间：15000毫秒 connection.setConnectTimeout(15000); // 设置读取远程返回的数据时间：60000毫秒 connection.setReadTimeout(60000); // 发送请求 connection.connect(); // 通过connection连接，获取输入流 if (connection.getResponseCode() == 200) { is = connection.getInputStream(); // 封装输入流is，并指定字符集 br = new BufferedReader(new InputStreamReader(is, "UTF-8")); // 存放数据 StringBuffer sbf = new StringBuffer(); String temp = null; while ((temp = br.readLine()) != null) { sbf.append(temp); sbf.append("\r\n"); } result = sbf.toString(); } } catch (MalformedURLException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } finally { // 关闭资源 if (null != br) { try { br.close(); } catch (IOException e) { e.printStackTrace(); } } if (null != is) { try { is.close(); } catch (IOException e) { e.printStackTrace(); } } connection.disconnect();// 关闭远程连接 } return result; } }

springBoot请求接口，请求外部接口_springboot请求外部接口_我要用代码向我喜欢的女孩表白的博客-CSDN博客

自己建个WechatTools工具类，里面加个方法

public static String getOpenid(String code,String appid,String secret) { // 调用接口必要的参数 StringBuilder data=new StringBuilder(); // appid、secret定义在配置文件中，注入到项目里 data.append("appid="+appid+"&"); data.append("secret="+ secret+"&"); data.append("js_code="+ code+"&"); data.append("grant_type="+ "authorization_code"); String response = HttpUtils.getRequest("https://api.weixin.qq.com/sns/jscode2session?" + data); return response; }

本地调试需要在微信小程序中，【详情】，然后【选择不校验合法】

Controller层

package com.example.tx_mini_pro.controller; import com.alibaba.fastjson.JSONObject; import com.example.tx_mini_pro.tools.AppConfigTools; import com.example.tx_mini_pro.tools.WechatTools; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping("/user") @Slf4j public class UserController { // @Autowired // UserService userService; @Autowired WechatTools wechatTools; /** * 微信小程序的登陆，如果有账号，则返回登陆成功，如果没有则返回（首次用户，需要认证) * @return */ // @PostMapping("/login") // public RsJsonBean LoginUser(@RequestBody JSONObject obj){ // // userService.LoginUser(obj.getString("code")); // // return null; //} @PostMapping("/getWxInfoTest") public String getWxInfoTest(@RequestBody JSONObject obj) { String AppId = AppConfigTools.getWxAppId(); String AppSecret = AppConfigTools.getWxAppSecret(); JSONObject wxJson = JSONObject.parseObject(WechatTools.getOpenid(obj.getString("code"), AppId, AppSecret)); log.info("微信的返回值{}", wxJson); return wxJson.toJSONString(); } }

拿到openId之后，其实就已经登陆了，如果用户是首次的话，那应该注册，获取用户的基本信息

现在获取用户昵称和头像，其他的很多东西，现在比较注重隐私，数据都拿不到的。

现在用户的所有信息都拿不到，只能用户自己填写

关于授权，如果用户拒绝授权，就得删除小程序，在重新进来

wx.getUserInfo，然后我得到了一个，昵称叫微信用户的东西，头像是这个

前端授权代码

wxml

授权头像和昵称

getScope:function(){ wx.getSetting({ success(res) { if (!res.authSetting['scope.record']) { wx.authorize({ scope: 'scope.userInfo', success () { // 用户已经同意小程序使用昵称和头像功能 console.log(wx.getUserInfo()) } }) } } }) }

结果.我真的对小程序很无语

参考:

微信小程序登录方法，授权登陆及获取微信用户手机号_微信小程序登陆_痴心阿文的博客-CSDN博客

java 后端获取微信小程序openid-CSDN博客

微信小程序获取用户openid的方法详解_javascript技巧_脚本之家

【本文地址】

公司简介

联系我们