今天在寫項目時，用到微信小程序授權獲取openid的需求，然後在網上找了下，很快就寫出來了，也獲取到了openid（前提是要將微信開發工具--詳情裏面的不檢驗合法域名花√，這樣纔可以），然後代碼如下（代碼是在app.js裏面寫，進入項目時就執行）：
//app.js
App({
//onLaunch,onShow: options(path,query,scene,shareTicket,referrerInfo(appId,extraData))
onLaunch: function() {
// const { code } = await login();
wx.login({
success: function (res) {
var code = res.code;
if (res.code) {
//發起網絡請求
wx.request({
url: `https://api.weixin.qq.com/sns/jscode2session?appid=小程序後臺的appid&secret=小程序後臺的secret&js_code=${code}&grant_type=authorization_code`,
success:function(response){
console.log('openid:' + response.data.openid);
},
})
} else {
console.log('獲取用戶登錄態失敗！' + res.errMsg)
}
}
});
},
onShow: function(options) {
},
onHide: function() {
},
onError: function(msg) {
},
//options(path,query,isEntryPage)
onPageNotFound: function(options) {
}
});
以上是已經實現了小程序獲取openid的問題，要將api.weixin.qq.com添加到後臺的安全域名中，發現不能行，果然心急吃不了熱豆腐，是因爲這種方式，很容易讓有心之人拿到secret，不太友好，所以需要讓後端通過接口來進行訪問這個鏈接，將獲取到的openid返回給前端，下面是通過後端拿到openid的代碼，也需要在app.js中寫
request目錄下index.js文件內容：
// 同時發送異步代碼的次數
let ajaxTimes=0;
export const request=(params)=>{
// 判斷 url中是否帶有 /my/ 請求的是私有的路徑 帶上header token
let header={...params.header};
if(params.url.includes("/my/")){
// 拼接header 帶上token
header["Authorization"]=wx.getStorageSync("token");
}
ajaxTimes++;
// 顯示加載中 效果
wx.showLoading({
title: "加載中",
mask: true
});
// 定義公共的url
const baseUrl="項目基本目錄";
return new Promise((resolve,reject)=>{
wx.request({
...params,
header:header,
url:baseUrl+params.url,
success:(result)=>{
resolve(result.data);
},
fail:(err)=>{
reject(err);
},
complete:()=>{
ajaxTimes--;
if(ajaxTimes===0){
// 關閉正在等待的圖標
wx.hideLoading();
}
}
});
})
}
第一種方法：可以直接拿到openid app.js文件中
import { request } from "./request/index.js";
//app.js
App({
//onLaunch,onShow: options(path,query,scene,shareTicket,referrerInfo(appId,extraData))
onLaunch: function() {
const _this = this
wx.login({
success: function (res) {
var code = res.code;
console.log(code)
_this.getOpenid(code)
}
});
},
async getOpenid (val) {
const getOpenidParams = {code: val}
// 3 發送請求 獲取用戶的openid
const res = await request({url:"/user/getXCXOpenid",data:getOpenidParams});
const openid = JSON.parse(res.data).openid
console.log('resp', JSON.parse(res.data).openid)
wx.setStorageSync("openid", openid);
},
onShow: function(options) {
},
onHide: function() {
},
onError: function(msg) {
},
//options(path,query,isEntryPage)
onPageNotFound: function(options) {
}
});
第二種方法：
util文件夾下asyncWx.js文件內容：
/**
* promise 形式 login
*/
export const login=()=>{
return new Promise((resolve,reject)=>{
wx.login({
timeout:10000,
success: (result) => {
resolve(result);
},
fail: (err) => {
reject(err);
}
});
})
}
import { request } from "./request/index.js";
import { login } from "./utils/asyncWx.js";
//app.js
App({
//onLaunch,onShow: options(path,query,scene,shareTicket,referrerInfo(appId,extraData))
onLaunch: function() {
this.getOpenid()
},
async getOpenid () {
const { code } = await login();
console.log('code:', code)
const getOpenidParams = {code: code}
const resp = request({url:"/user/getXCXOpenid",data:getOpenidParams});
console.log('resp', resp)
},
onShow: function(options) {
},
但是這種方法，返回的resp格式是以下這樣，我還不清楚如何解析拿到openid，等我之後研究出來了，再編輯這篇文章
