環(huán)境要求
1.注冊一個小程序
2.微信開發(fā)者工具
3.idea(springboot)
目錄
項目準備
用戶登陸
前端開發(fā)，傳遞code
index.wxss
index.js
后端編寫，調(diào)用微信接口，獲取openId
現(xiàn)在用戶的所有信息都拿不到，只能用戶自己填寫
其實微信前端是可以直接請求獲取openId的，但是會暴露你的key和secret
流程：前端獲取code->后端調(diào)用微信接口->返回openid給前端
項目準備
1.打開微信開發(fā)工具，點擊添加
2.創(chuàng)建小程序
- 修改項目名稱
- 更換目錄
- 選擇從網(wǎng)頁創(chuàng)建好的小程序AppId
- 選擇不使用云服務
- 模板選擇基礎
- 使用javaScript的基礎模板
用戶登陸
前端開發(fā)，傳遞code
首先畫一個登陸按鈕
index.wxml?
<view?class="test_view">
<view?class="title">前后端請求-響應測試</view>
<view><button?bindtap="clickLogin">登陸</button></view>
</view>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) {
//發(fā)起網(wǎng)絡請求
wx.request({
url: 'http://localhost:8087/user/getWxInfoTest',
method: 'post',
data: {
code: res.code
}
})
} else {
console.log('登錄失??！' + res.errMsg)
}
}
})
}
})
后端編寫，調(diào)用微信接口，獲取openId
獲取openId需要3個參數(shù)，appid，code，secret。
登錄 微信公眾平臺 =>開發(fā)管理=>開發(fā)設置=>開發(fā)者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;// 返回結(jié)果字符串
try {
// 創(chuàng)建遠程url連接對象
URL url = new URL(httpurl);
// 通過遠程url連接對象打開一個連接，強轉(zhuǎn)成httpURLConnection類
connection = (HttpURLConnection) url.openConnection();
// 設置連接方式：get
connection.setRequestMethod("GET");
// 設置連接主機服務器的超時時間：15000毫秒
connection.setConnectTimeout(15000);
// 設置讀取遠程返回的數(shù)據(jù)時間：60000毫秒
connection.setReadTimeout(60000);
// 發(fā)送請求
connection.connect();
// 通過connection連接，獲取輸入流
if (connection.getResponseCode() == 200) {
is = connection.getInputStream();
// 封裝輸入流is，并指定字符集
br = new BufferedReader(new InputStreamReader(is, "UTF-8"));
// 存放數(shù)據(jù)
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 {
// 關(guān)閉資源
if (null != br) {
try {
br.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (null != is) {
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
connection.disconnect();// 關(guān)閉遠程連接
}
return result;
}
}springBoot請求接口，請求外部接口_springboot請求外部接口_我要用代碼向我喜歡的女孩表白的博客-CSDN博客
public static String getOpenid(String code,String appid,String secret) {
// 調(diào)用接口必要的參數(shù)
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;
}本地調(diào)試需要在微信小程序中，【詳情】，然后【選擇不校驗合法】
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之后，其實就已經(jīng)登陸了，如果用戶是首次的話，那應該注冊，獲取用戶的基本信息
現(xiàn)在獲取用戶昵稱和頭像，其他的很多東西，現(xiàn)在比較注重隱私，數(shù)據(jù)都拿不到的。
現(xiàn)在用戶的所有信息都拿不到，只能用戶自己填寫
?
?
?
關(guān)于授權(quán)，如果用戶拒絕授權(quán)，就得刪除小程序，在重新進來
?
wx.getUserInfo，然后我得到了一個，昵稱叫微信用戶的東西，頭像是這個
?
前端授權(quán)代碼
wxml
<view><button?bindtap="getScope">授權(quán)頭像和昵稱</button></view>js
getScope:function(){
wx.getSetting({
success(res) {
if (!res.authSetting['scope.record']) {
wx.authorize({
scope: 'scope.userInfo',
success () {
// 用戶已經(jīng)同意小程序使用昵稱和頭像功能
console.log(wx.getUserInfo())
}
})
}
}
})
}結(jié)果.我真的對小程序很無語
?
參考:
微信小程序登錄方法，授權(quán)登陸及獲取微信用戶手機號_微信小程序登陸_癡心阿文的博客-CSDN博客
java 后端獲取微信小程序openid-CSDN博客文章來源：http://www.zghlxwxcb.cn/news/detail-406854.html
微信小程序獲取用戶openid的方法詳解_javascript技巧_腳本之家文章來源地址http://www.zghlxwxcb.cn/news/detail-406854.html
到了這里，關(guān)于微信小程序登陸(全流程-前后端)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
