微信：网站应用第三方微信扫码登录实现

最新推荐文章于 2022-05-03 13:43:46 发布

苦呀君

最新推荐文章于 2022-05-03 13:43:46 发布

阅读量2.3k

点赞数 3

分类专栏： web前端 # vue # 微信文章标签： vue vue.js web app

本文链接：https://blog.csdn.net/weixin_43856797/article/details/108164284

版权

官方文档：微信开放平台网站应用文档
项目框架：VUE

1. 流程

大体流程如下：
在这里插入图片描述

2. 平台申请

首先要在官方微信开放平台申请创建网站应用：微信开放平台-网站应用开发
审核通过后，就可以在：管理中心-网站应用下查看创建的网站应用
在这里插入图片描述

其中需要的用到的参数如下所示：AppID、AppSecret、授权回调域：

在这里插入图片描述

3. 前端代码实现（VUE为例）

首先要引入 wxLogin 的js文件，在 /public/index.html 中，添加引入：

<body>
  <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
  <div id="app"></div>
  </div>
  <!-- built files will be auto injected -->
  <script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</body>

所采用的是页面内嵌式的微信登录二维码，微信接口通过H5的 <iframe> 标签实现内嵌二维码，具体代码如下：

<template>
  <div class="app-container">
    <div id="qrcode"></div>
  </div>
</template>

<script>
export default {
    
  mounted() {
     // 注意调用方法生命周期不能为created，否则不会加载出来
    // console.log(encodeURIComponent(`http://${window.location.host}/wxlogin`));
    this.wxlogin();
  },
  methods: {
    
    wxlogin() {
    
      var obj = new WxLo

最低0.47元/天解锁文章

苦呀君

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
微信：网站应用第三方微信扫码登录实现

官方文档：微信开放平台网站应用文档项目框架：VUE1. 流程大体流程如下：2. 平台申请首先要在官方微信开放平台申请创建网站应用：微信开放平台-网站应用开发审核通过后，就可以在：管理中心-网站应用下查看创建的网站应用其中需要的用到的参数如下所示：AppID、AppSecret、授权回调域：3. 前端代码实现（VUE为例）首先要引入 wxLogin 的js文件，在 /public/index.html 中，添加引入：<body> <noscript>.
复制链接

扫一扫