vue-wxlogin获取二维码结合微信小程序:嵌套在H5页面

最新推荐文章于 2024-06-22 07:55:53 发布
最新推荐文章于 2024-06-22 07:55:53 发布
阅读量1.4k 收藏
点赞数
分类专栏： 半缘修道
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48557454/article/details/114149519
版权
本文介绍了如何在H5页面中嵌入微信小程序的二维码登录流程，通过vue-wxlogin插件进行实现。主要包括四个步骤：引入插件、编码redirect_uri、设置href样式为base64以及子组件wxlogin的使用。在实施过程中，作者遇到困难但在后台开发的协助下顺利完成。
摘要由CSDN通过智能技术生成

step1:在这里插入图片描述
step2: npm i vue-wxlogin --dev 引入的页面: QRcodeLogin
在这里插入图片描述

在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210226194150819.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODU1NzQ1NA==,size_16,color_FFFFFF,t_70#pic_center
step3: redirect_ur编码
在这里插入图片描述

step4:href 样式base64
在这里插入图片描述
关于子组件:wxlogin
在这里插入图片描述
这个二维码,起初做时,很难,一步一步走来,也就走顺畅了.多亏后台小哥哥,一路的帮忙.

浅浅深深眸眸
关注
专栏目录
初识微信小程序
jiuchabi7492的博客
02-21 1340
文章目录2.初识微信小程序微信小程序：3.创建小程序 注册小程序账户 小程序工具功能介绍 以及小程序的目录结构分析4.小程序MINA框架介绍 wxml wxss pages逻辑层js 介绍 绑定数据、绑定属性、条件判断、循环渲染数据MINA框架介绍微信小程序与H5的不同之处：5.微信小程序事件、方法、事件对象、方法传值、获取data数据、修改data数据、冒泡非冒泡事件6.微信小程序app....
微信端H5微信登录前端代码wxlogin【修改loginwx.html下JS里的appid和secret即可】.zip
05-08
微信端H5微信登录前端代码wxlogin【修改loginwx.html下JS里的appid和secret及域名即可】，域名需在公众号配置。
vue-wxlogin vue扫码登录
明耀的博客
02-23 461
是样式base64位。
vue3实现微信扫码登入
最新发布
weixin_73251435的博客
06-22 577
wxlogin appid="微信id" :scope="'snsapi_login'" :theme="'black'"3.引入完成后通过app.config.globalProperties.wxlogin = wxlogin进行全局挂载。:redirect_uri="encodeURIComponent(`重定向接口获取token`)" href=''2.下载完成在main中引入import wxlogin from '或者yarn add。
vue 微信登录
weixin_41859887的博客
03-19 387
微信 【页面内登录】 npm i vue-wxlogin import wxlogin from "vue-wxlogin"; // 组件导入 <wxlogin :appid="WxLogInData.appid" :scope="WxLogInData.scope" style="width: 300px; margin: auto" :redirect_uri="WxLogInData.redirect_uri" :self_redirect="false" :href=
vue-wxlogin:vue微信登陆compoment，按照wxLogin.js写的简单components，参数与wx的一致
05-13
vue-wxlogin a Vue component about WeChat login；一个简单的微信登陆组件，方便组件化模块化工程化引入 no access to dom on the component, and no hook, so support srr; 组件中没有访问dom，并且没有使用hook，所以支持ssr 使用参数与微信官方文档一致 url： Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build Install npm install vue-wxlogin --save-dev import wxlogin
vue3使用wxlogin做登陆二维码
weixin_72271537的博客
04-12 2069
wxlogin，报错 openBlock‘ is not exported by node_modules/vue-wxlogin解决 ；登陆二维码样式修改
微信小程序学习指南
weixin_30446197的博客
12-13 3374
作者：初雪链接：https://www.zhihu.com/question/50907897/answer/128494332来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测， 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ... 前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S； 1：官方工具：http...
记录vue开发微信公众号的问题
weixin_47783830的博客
03-29 421
最近在开发公众号网页，用的vue开发。此篇就记录开发中遇到的问题 首先了解公众号开发的概念，其实就是h5的页面，只是需要管理人员配置给你。由于我只是单纯的开发，那些配置我也不是配置者，就不说了。应该跟小程序配置差不多，公司也不会要你去配置。 1。项目开发时，后台会给你定义一个网址，就是公众号网页的重定向地址：例如： http://xxx.com/?Api-Token=xxx&Mp-Appid=xxx#/user/console 这是我们的重定向地址页面,所以你在配置 路由的时候，一定记得将项目首页
小程序日记：基础篇
qq_44719515的博客
06-21 3601
文章目录一、全局配置配置项1、pages2、window3、tabBar3.1：list的属性二、页面配置 page.json配置项配置示例三、sitemap 配置配置项rules配置示例WXML语法四、数据绑定1、简单绑定1.1、内容1.2、组件属性(需要在双引号之内)1.3、控制属性(需要在双引号之内)1.4、关键字(需要在双引号之内)2、运算2.1、三元运算2.2、算数运算2.3、逻辑判断2.4、字符串运算2.5、数据路径运算3、组合3.1、数组3.2、对象五、列表渲染1、wx:for2、block
vue-wxlogin微信扫码登录插件【使用笔记】，一线互联网架构师设计思想解读开源框架
m0_60635609的博客
04-03 1192
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。
使用vue编写h5公众号跳转小程序
qq_38337245的博客
11-25 2302
前言：我使用vue编写的h5公众号，实现点击小程序入口，打开小程序，微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 要求：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。 跳转小程序主要的标签是 wx-open-launch-weapp 第一步在vue项目下public文件夹下的index.html页面，引入微信配
vue-wxlogin微信扫码登录插件【使用笔记】
estrusKing的博客
11-03 7899
文章目录1.安装2.直接界面引入3.使用4.使用例子 官方文档：https://www.npmjs.com/package/vue-wxlogin 一个简单的微信登陆组件，方便组件化模块化工程化引入 组件中没有访问dom，并且没有使用hook，所以支持ssr 使用参数与微信官方文档一致 url：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 1.安装 npm ins
用vue-wxlogin+林栖云微服务框架实现微信扫码登录
Lusoel的专栏
08-12 1048
1.前端处理: 1.1 安装vue-wxlogin npm install vue-wxlogin --save-dev 2.2 登录页代码段 import wxlogin from "vue-wxlogin"; components: { wxlogin } import wxlogin from "vue-wxlogin"; .... components: { wxlogin }, ....... <div v-show="showWechatLogin" id="logi
vue 实现H5跳转小程序
weixin_45689786的博客
12-28 3228
这里写自定义目录标题vue实现H5跳转小程序 vue实现H5跳转小程序 公司需求实现h5跳转小程序,看了很多文档发现对于小白不太容易理解,记录下,以备查阅。 适用环境 微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上 微信SDK 引入https://res.wx.qq.com/open/js/jweixin-1.6.0.js*（注意要用jweixin-1.6.0.js，低版本不支持，这里掉坑了）* 页面报错找不到模板wx-open-
使用vue-wxlogin组件做的微信登录，今天突然出现扫码后不跳转，控制台报错。
cyb_123的博客
04-26 1056
使用vue-wxlogin组件做的微信登录，昨天还好好地，今天早上发现，扫码后不跳转，控制台报错Uncaught DOMException: Failed to read the ‘cookie’ property from ‘Document’: The document is sandboxed and lacks the ‘allow-same-origin’ flag.
Vue 微信登录
Maggie柒哈哈的博客
07-22 1420
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
vue移动端项目H5+扫码功能组件封装，可直接用
qq_44712405的博客
09-30 1607
<template> <div class="scanQrcodeComponents"> <div id="bcid" v-show="show===0"></div> <div class="scanCode" @click="startRecognize"> <van-icon name="enlarge" class="scanImg"/> <div class="scanTe.
Vue与微信小程序：生命周期与数据绑定对比分析
"本文主要分析了Vue.js框架与微信小程序之间的异同，涵盖了它们的生命周期、数据绑定、列表渲染以及显示与隐藏元素的处理方法。" Vue.js与微信小程序都是前端开发的重要工具，它们在很多方面都有相似之处，但也存在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值