准备工作 | 微信开放文档
 

<template>
    <wxlogin
		id="wxLoginForm"
		self_redirect="false"
		:appid="appid"
		:scope="scope"
		:state="state"
		:redirect_uri="redirect_uri">
    </wxlogin>
</template>

<script>

import wxlogin from 'vue-wxlogin';

components: {	
	wxlogin,
},

// 微信回调地址后做监听
watch: {
	$route(to, from) {
		// 如果有code 大概就是微信回调
		if (to.query.code) {
			// 拿到code后 做相应操作 向后台获取openId
			this.code = to.query.code;
			this.state = to.query.state;
			this.toCodeLogin();
		}
	},
},

setup() {
    const reactiveData = reactive({
			appid: '', // 应用唯一标识，在微信开放平台提交应用审核通过后获得
			scope: 'snsapi_login', // 应用授权作用域，网页应用目前仅填写snsapi_login即可
			state: Math.random(),
			redirect_uri: '', //重定向地址，(回调地址)
	});

    onMounted(async function () {
			let host = window.location.host;
			let protocol = document.location.protocol;
			reactiveData.domainUrl = protocol + '//' + host;
            reactiveData.appid = 'wx7481cfc0d46096011';
			reactiveData.redirect_uri = encodeURIComponent('https://www.aaaa.com/#/login');
    }
}