微信小程序獲取用戶openid的圖文教程(含源碼)
更新時間：2023年01月31日 09:46:38 作者：Linaaa~
微信小程序的開發(fā)過程中,有時前端需要獲取到openId來使用,下面這篇文章主要給大家介紹了關于微信小程序獲取用戶openid的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
小程序端直接獲取：
實現(xiàn)代碼：直接簡單
wx.login({
success(res) {
if (res.code) {
//發(fā)起網(wǎng)絡請求
wx.request({
//這里填你自己的appid 和 wxspSecret
url: "https://api.weixin.qq.com/sns/jscode2session?appid=" + wxspAppid+"&secret=" + wxspSecret + "&js_code=" + res.code + "&grant_type=authorization_code" ,
method: "POST",
success(res){//獲取成功要執(zhí)行的動作},
fail(data){//失敗要執(zhí)行的動作 }
})
} else {console.log('登錄失??！' + res.errMsg)}
}
})
問題： 前端直接暴露appid和appsecret
最開始使用這種方式，到了小程序發(fā)布的階段，因為直接暴露自己的appid和appsecret在前端，經(jīng)過反編譯小程序會直接獲取到你的這些信息，并且不改的話也發(fā)布不了。。。之后就改成云函數(shù)獲取了
云函數(shù)獲取oppenid
方便并且沒有暴露信息的風險：
步驟1：創(chuàng)建云函數(shù)
打開云開發(fā)控制臺：
選擇云函數(shù)，創(chuàng)建一個函數(shù)，函數(shù)名為get
步驟2：建立一個云函數(shù)，命名為剛剛的get
步驟3：
index.js
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
console.log("OPENID",wxContext.OPENID);
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
config.json
{
"permissions": {
"openapi": [
]
}
}
在你需要獲取的地方直接調(diào)用即可，比如在app.js中
getOpenid() {
let that = this;
wx.cloud.callFunction({
name: 'get',
complete: res => {
//你想要完成的功能，比如存儲openid到全局
that.globalData.openid = res.result.openid;
}
})
},
上線兩個星期左右，云函數(shù)收費了。。。
后面還是使用后端完成openid的獲取
后端獲取openid
小程序端
wx.login({
success(res) {
if (res.code) {
//發(fā)起網(wǎng)絡請求
wx.request({
url: "你的接口"+res.code,
method: "POST",
success(res){//成功后的邏輯處理 }
})
} else {
wx.showToast({
title: '出現(xiàn)錯誤',
icon: 'fail',
duration: 5000
})
console.log('出現(xiàn)錯誤！' + res.errMsg)
}
}
})
后端（springboot）
@PostMapping("你的接口")
public Response decodeOpenid(HttpServletResponse response, @RequestParam String code){
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("utf-8");
String wxspAppid = "你的appid";
String wxspSecret = "你的密鑰";
try {
Map<String, String> map = new HashMap<>();
// 授權（必填）固定
String grant_type = "authorization_code";
// 發(fā)送請求
String res = HttpRequest.post("https://api.weixin.qq.com/sns/jscode2session")
.form("appid",wxspAppid)
.form("secret",wxspSecret)
.form("js_code",code)
.form("grant_type",grant_type)
.execute().body();
// 解析相應內(nèi)容（轉(zhuǎn)換成json對象）
JSONObject json = JSONObject.parseObject(res);
log.info("解析code請求結(jié)果:"+json.toString());
//獲取openid
String openid = json.getString("openid");
log.info("openid:"+openid);
return Response.success(openid);
} catch (Exception e) {
e.printStackTrace();
return Response.fail("openId生成失敗");
}
}
需要導入hutools工具包和slf4j的依賴
ps: 微信小程序如果要發(fā)布的話是需要進行域名購買和備案的，以及后端https的配置。
總結(jié)
到此這篇關于微信小程序獲取用戶openid的文章就介紹到這了,更多相關微信小程序獲取用戶openid內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
textarea不能通過maxlength屬性來限制字數(shù)的解決方法
textarea稱文本域，又稱文本區(qū)，其不能通過maxlength屬性來限制字數(shù)，為此必須尋求其他方法來加以限制以達到預設的需求2014-09-09
這篇文章主要介紹了JS使用正則實現(xiàn)去掉字符串左右空格的方法,結(jié)合實例形式分析了JS針對首尾匹配及空格匹配的簡單實現(xiàn)技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了Typescript模塊的導入導出與繼承方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在JavaScript中call()與apply()區(qū)別
這篇文章主要介紹了在JavaScript中call()與apply()區(qū)別 的相關資料,需要的朋友可以參考下2016-01-01
與java等基于類的面向?qū)ο笳Z言的private、protected、public等關鍵字的用途類似，基于對象的JavaScript語言，在對象構(gòu)造上也存在類似的成員可見性問題。2009-10-10
JavaScript獲取網(wǎng)頁的寬高及如何兼容詳解
這篇文章主要給大家介紹了關于JavaScript獲取網(wǎng)頁的寬高及如何兼容的相關資料，主要介紹了三個方式，分別是window.innerWidth / window.innerHeight、document.documentElement.clientWidth以及混雜模式/怪異模式 下的寬高的獲取，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了JS實現(xiàn)iframe自適應高度的方法,結(jié)合實例形式分析了JS實現(xiàn)iframe高度自適應的實現(xiàn)技巧,并給出了項目示例供大家參考,需要的朋友可以參考下2017-01-01
ES6引入了一個新的函數(shù)類型，發(fā)現(xiàn)它并不符合這種運行到結(jié)束的特性。這類新的函數(shù)被稱為生成器。生成器的出現(xiàn)是我們知道原來有時代碼并不會順利的運行，可以通過暫停的方式進行異步回調(diào)，讓我們摒棄了此前的認知。本文就來聊聊JavaScript中生成器的相關知識2022-11-11
這篇文章主要為大家介紹了stats.js使用性能監(jiān)控源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
在javascript中有兩種注釋方式,單行注釋與多行注釋。2011-09-09