vue3使用wxlogin做登陆二维码

最新推荐文章于 2024-05-24 15:48:56 发布

刘海583

最新推荐文章于 2024-05-24 15:48:56 发布

阅读量1.8k

点赞数 1

分类专栏： uniapp 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_72271537/article/details/130117057

版权

uniapp 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文的appi和redirect_uri都是虚假的

在做登陆二维码的时候，使用了wxlogin组件

但在打包过程中遇到错误

‘openBlock‘ is not exported by node_modules/vue-wxlogin

最终找寻多个方法但都不成功，最后决定绕开这个错误

通过将js文件下载下来放在本地文件中--在js文件最后加上

wxLogin.js

export default WxLogin

在login页面引入并使用

<script setup>
import WxLogin from '../assets/js/wxLogin.js';//引用


//使用
onMounted(() => {
	new WxLogin({
		self_redirect: true,//重定向
		id: "login_container",//id
		appid: "wx015f3d5f5d78f1",
		scope: "snsapi_login",
		redirect_uri: "http://www.vosd.com",
		state: "STATE",
		style: "white",
		href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDEzNXB4OyBtYXJnaW46IDBweDtib3JkZXI6IG5vbmV9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMTM1cHg7fQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9Ci5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9Ci5pbXBvd2VyQm94IHtyaWdodDogMjUlO30="
	});
})

</script>
<template>
    <div id="login_container"></div>
</template>

<style lang="scss" scoped>
    #login_container {
				width: 150px;
				height: 150px;
				padding: 0;
				margin: 0;

				// .impowerBox .qrcode {
				// 	width: 135px;
				// 	position: relative;
				// 	right: 25%;
				// 	bottom: 30px;
				// }
			}
</style>

示例展示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>标题</title>
  <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>

<body>

  <div id="login_container"></div>
</body>

</html>
<script>
  new WxLogin({
    self_redirect: false,//重定向
    id: "login_container",//id
    appid: "wx015f3d5f5d78f1",
    scope: "snsapi_login",//pc端暂只支持这一个
    redirect_uri: "http://www.vosd.com",//返回的网址
    state: "STATE",
    style: "white",
    href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDEzNXB4OyBtYXJnaW46IDBweDtib3JkZXI6IG5vbmV9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMTM1cHg7fQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9Ci5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9Ci5pbXBvd2VyQm94IHtyaWdodDogMjUlO30="//样式
  });
</script>

3.解码加密-举例--修改微信登陆二维码样式--注意要加前缀data:text/css;base64，

在线加密网址在线加密解密OSCHINA.NET在线工具,ostools为开发设计人员提供在线工具，提供jsbin在线 CSS、JS 调试，在线 Java API文档,在线 PHP API文档,在线 Node.js API文档,Less CSS编译器，MarkDown编译器等其他在线工具https://tool.oschina.net/encrypt?type=3

.impowerBox .qrcode {width: 135px; margin: 0px;border: none}
.impowerBox .title {display: none;}
.impowerBox .info {display: none;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}
.impowerBox {right: 25%;}

本人经过多次尝试都无法直接通过