VUE项目获取微信二维码 (返回了的是一个html)

微信官网

微信开放平台

1.在 public/index.html 的head标签中引入：

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

2.把需要展示二维码图片的盒子上添加 id=“weixin” ：

<div id="weixin"  >二维码</div>

3.在点击切换到微信登录的函数中：

weixinClick(){// 点击切换微信扫码登录这一项，并向微信扫码登录this.isShowForm=false;// 申请微信登录二维码let _this = this;new WxLogin({id: "weixin",appid: "wx67cfaf9e3ad31a0d",  // 这个appid要填死scope: "snsapi_login",// 扫码成功后重定向的接口redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",// state填写编码后的urlstate: encodeURIComponent(window.btoa("http://127.0.0.1:8080" + _this.$route.path)),// 调用样式文件href: "",});},

4.修改固定样式达到想要的效果

4.1 新建wxLoginStyle文件夹装有data-url.js 和 wxlogin.css

****data-url.js****

var fs = require('fs');// function to encode file data to base64 encoded stringfunction base64_encode(file) {// read binary datavar bitmap = fs.readFileSync(file);// convert binary data to base64 encoded stringreturn 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');}console.log(base64_encode('./wxlogin.css'))

*****wxlogin.css 文件*****

.impowerBox .title, .impowerBox .info{display: none;}.impowerBox .qrcode{margin-top: 20px;}

VUE项目获取微信二维码 (返回了的是一个html)相关推荐

获取微信二维码返回乱码
获取微信二维码返回乱码,遇到的44002,41001,还有图片没法正常显示首先获取微信token然后再获取二维码这个没什么好说的直接上代码 public function getQRcode() ...
C# 获取微信二维码
微信的api开放的二维码是一个链接地址,可以通过HttpWebRequest获取到二维码图片显示在客户端: /// <summary>/// 获取图片路径/// </summary& ...
Java如何获取微信二维码内的信息
import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.i ...
vue项目条形码和二维码生成工具试用
项目开发需要,优惠券分不同类型,简单的使用id生成条形码供店铺使用,麻烦点的需要多个字段的就需要使用二维码来展示了,对应的效果如下条形码(一维码)使用工具code128 需引入code128.js ...
使用vue-qriously插件，在vue项目中生成二维码
之前使用qrcodejs2发现二维码内容的长度太长会出问题,所以改用vue-qriously 以下为转载内容代码案例安装 npm install vue-qriously --save-dev m ...
vscode中vue项目，QRCode二维码生成
昨天突然说让我写个简单的二维码生成页面 1.首先肯定要打开我们的项目,然后安装QRCode npm install qrcodejs2 2.然后新建一个文件(比如index.vue) 在文件最上面写上 ...
微信公众平台开发（三）——微信二维码生成扫码关注
微信二维码生成是指后端发送请求向微信服务器申请公众号的二维码,用户如果未关注,进行扫描改二维码后即跳转道公众号的关注页面:如果已经关注,扫描二维码后直接进入该微信公众号.当用户扫码时,微信服务器会向后 ...
PHP给微信二维码添加背景和昵称，微信带参数海报跨坑记录。
先获取微信二维码,这里我获取的是永久二维码: $wx= $this->getTicket($this->userid);//我带的参数是用户ID,可自由发挥.//下面是相关函数 funct ...
vue 根据链接生成二维码(功能实现)
今天同事问我一个问题,在vue项目中想要根据一个链接显示对应的二维码该怎么实现. 我前一段时间,有用apicloud项目生成二维码的功能,但是vue版本的没有处理过.百度后找到一个可行的方案: 大神实 ...

VUE项目获取微信二维码 (返回了的是一个html)

VUE项目获取微信二维码 (返回了的是一个html)相关推荐

最新文章

热门文章