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

首先安装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" frame