Vue获取网页微信登录二维码

最新推荐文章于 2026-06-06 09:28:28 发布

原创

最新推荐文章于 2026-06-06 09:28:28 发布 · 1.8k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何在Vue项目中通过npm安装vue-wxlogin组件，实现获取网页微信登录二维码的功能。内容包括安装步骤和组件代码示例，特别提示了self_redirect参数的默认值和可配置性。

首先安装npm install vue-wxlogin --save-dev

<template>
  <div id="app">
    <div id="wxbox">
      <wxlogin :appid="appid" :scope="scope" :redirect_uri="redirect_uri"></wxlogin>
    </div>
    
  </div>
</template>

<script>
import wxlogin from 'vue-wxlogin'

export default {
  name: 'app',
  components: {
    wxlogin
  },
  data () {
      return {
          appid : 'wxe1f5def243e0390b',
          scope : 'snsapi_login',
          redirect_uri : 'https://abstest.tenpay.com/abs/author/callBack.do',
      }
  },
}
</script>

<style>
#wxbox{
  width: 400px;
  height: 400px;
}
</style>

vue-wxlogin组件代码，注意这里self_redirect是给的默认值，需要的话可以修改

<template>
  <div>
    <iframe scrolling="no" width="300" height="400" frameBorder="0" allowTransparency="true" :src="setSrc"></iframe>
  </div>
</template>

<script>
export default {
  data () {

标签

#vue