由于本人经常写微信公众号后端,每次项目经常需要登录需要拿取微信的登录code 换取服务端返回的openid,比较麻烦,因此书写了一个,将文件放服务器,进行访问就可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>Title</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
@media screen and (max-width: 600px) {
.form {
max-width: 100vw;
}
.divider {
margin: 32px 0 16px;
}
.code-input {
width: 40vw;
}
}
@media screen and (min-width: 600px) {
.form {
max-width: 600px;
}
.divider {
margin: 120px 0 60px;
}
.code-input {
width: 300px;
}
}
</style>
</head>
<body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-form ref="form" :model="form" label-width="8em" class="form">
<!--提示常亮-->
<el-form-item label="提示常亮">
<el-switch
v-model="light"
active-color="#13ce66">
</el-switch>
</el-form-item>
<!--微信授权地址-->
<el-form-item label="微信授权地址">
<el-input :value="connect" disabled></el-input>
</el-form-item>
<!--appid-->
<el-form-item label="appid">
<el-tooltip v-model="tip.appid" effect="dark" content="公众号的唯一标识" placement="right">
<el-input v-model="form.appid"></el-input>
</el-tooltip>
</el-form-item>
<!--授权回调地址-->
<el-form-item label="redirect_uri">
<el-tooltip v-model="tip.redirect_uri" effect="dark" placement="right">
<div slot="content">
授权后重定向的回调链接地址,
<br /> 请使用 urlEncode 对链接进行处理
</div>
<el-input v-model="form.redirect_uri" disabled></el-input>
</el-tooltip>
</el-form-item>
<!--返回类型-->
<el-form-item label="response_type">
<el-tooltip v-model="tip.response_type" effect="dark" content="返回类型,请填写code" placement="right">
<el-select v-model="form.response_type">
<el-option label="code" value="code"></el-option>
</el-select>
</el-tooltip>
</el-form-item>
<!--授权作用域-->
<el-form-item label="scope">
<el-tooltip v-model="tip.scope" effect="dark" content="应用授权作用域" placement="right">
<el-select v-model="form.scope">
<el-tooltip effect="dark" placement="right">
<div slot="content">
弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,<br /> 即使在未关注的情况下,只要用户授权,也能获取其信息
</div>
<el-option label="snsapi_userinfo" value="snsapi_userinfo"></el-option>
</el-tooltip>
<el-tooltip effect="dark" content="不弹出授权页面,直接跳转,只能获取用户openid" placement="right">
<el-option label="snsapi_base" value="snsapi_base"></el-option>
</el-tooltip>
</el-select>
</el-tooltip>
</el-form-item>
<!--state-->
<el-form-item label="state">
<el-tooltip v-model="tip.state" effect="dark" placement="right">
<div slot="content">
重定向后会带上state参数<br /> 开发者可以填写a-zA-Z0-9的参数值,最多128字节
</div>
<el-input maxlength="128" v-model="form.state"></el-input>
</el-tooltip>
</el-form-item>
<!--提交-->
<el-form-item>
<el-button type="primary" @click="onSubmit">获取Code</el-button>
</el-form-item>
</el-form>
<div class="divider">
<el-divider content-position="left">以下是回调参数信息:</el-divider>
</div>
<el-form label-width="5em" class="form">
<!--code-->
<el-form-item label="code">
<el-input v-model="code" class="code-input"></el-input>
<el-button type="primary" @click="copy">点我复制</el-button>
</el-form-item>
<!--url 参数-->
<el-form-item label="回调信息">
<pre v-html="data"></pre>
</el-form-item>
</el-form>
</div>
<script>
/**
* 转换地址栏参数
*/
function parseQueryString(url) {
var str = url.split("?")[1] || '', //通过?得到一个数组,取?后面的参数
items = str.split("&"); //分割成数组
var arr, name, value;
var obj = {};
for (var i = 0; i < items.length; i++) {
arr = items[i].split("="); //["key0", "0"]
name = arr[0];
value = arr[1];
obj[name] = value;
}
return obj;
}
/**
* 转换参数为get类型
*/
function parseDataToUrl(url, obj) {
if (typeof url !== "string" || typeof obj !== "object")
return url;
let reurl = url + "?";
let keys = Object.keys(obj);
keys.forEach(key => reurl += key + "=" + obj[key]/*encodeURIComponent(obj[key])*/ + "&");
reurl = reurl.substring(0, reurl.length - 1);
return reurl;
}
/**
* 将当前地址栏转换为回调地址uri
*/
function getRedirectUri() {
let {
origin,
pathname,
search,
hash,
} = location;
search = '?' + search.slice(1).split('&').filter(query => !query.includes('code=') && !query.includes('state=')).join('&');
return encodeURIComponent(origin + pathname + search + hash);
}
</script>
<!--复制能力-->
<script>
const copy = (() => {
const Document = window.document;
// 如果document不存在,无法复制
if (!Document)
throw new Error('document is undefined!');
const getCopyElem = (() => {
let copyElem = null;
return () => copyElem || (copyElem = createCopyTextarea())
})();
function createCopyTextarea() {
let textarea = Document.createElement('textarea');
let style = textarea.style;
// 确保元素存在于dom树上而又不被用户看到,且尽量不影响其他元素;
style.position = 'fixed';
style.left = '100%';
style.top = '100%';
style.opacity = '0';
style.width = '1px'; // 若元素大小为0, 会无法选中导致复制失败
style.height = '1px';
style.border = 'none';
style.padding = '0';
style.margin = '0';
style.overflow = 'hidden';
Document.body.appendChild(textarea);
return textarea;
}
/**
* @function copy -- 复制内容到粘贴板
*
* @param {String} text - 要复制的文本内容
* @return {Boolean} - 复制结果
*/
return function copy(text, inputElement = null) {
let copyElem = inputElement || getCopyElem();
if (!copyElem)
return false;
copyElem.value = text; // 改变输入框的值
copyElem.select(); // 选中值
let res = Document.execCommand("Copy"); // 执行浏览器复制命令
copyElem.blur();
return res;
}
})();
</script>
<script>
new Vue({
el: '#app',
data() {
return {
code: '',
data: {},
connect: 'https://open.weixin.qq.com/connect/oauth2/authorize',
light: false,
tip: {
appid: false,
redirect_uri: false,
response_type: false,
scope: false,
state: false,
},
form: {
appid: 'wx3722f11cac44b3d7',
redirect_uri: getRedirectUri(),//encodeURIComponent与encodeURI不一样
response_type: 'code',
// scope: 'snsapi_base',
scope: 'snsapi_userinfo',
state: '',
}
}
},
watch: {
light(light) {
Object.keys(this.tip).forEach(key => this.tip[key] = !!light)
}
},
methods: {
onSubmit() {
let {connect, form} = this;
location.href = parseDataToUrl(connect, form);
},
copy() {
let res = copy(this.code);
this.$message({
message: `复制${res ? '成功' : '失败'}`,
type: res ? 'success' : 'warning'
});
}
},
mounted() {
let data = parseQueryString(location.href);
console.log(data);
this.data = JSON.stringify(data, null, " ");
this.code = data.code;
}
})
</script>
</body>
</html>
使用方法
你的域名/上边代码文件.html
微信手机端展示界面