如何在vue实现内嵌企业微信二维码

如何在vue实现内嵌企业微信二维码

1、在登陆页面写上二维码容器

2、在登陆页面写上二维码容器

        created () {
            this.getWeChat()
        },
        methods: {
            getWeChat () {
                // 动态引入企业微信js文件
                const s = document.createElement('script')
                s.type = 'text/javascript'
                s.src = 'http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js'
                const wxElement = document.body.appendChild(s)
                // 调用企业微信二维码方法
                wxElement.onload = function () {
                    window.WwLogin({
                        id: 'weChat', // 需要显示的容器id
                        appid: '****', // 公众号appid wx*******
                        agentid: '****', // 公众号agentid wx*******
                        scope: 'snsapi_login', // 网页默认即可
                        redirect_uri: encodeURIComponent('***'), // 授权成功后回调的url，需要在企业微信配置，我的方法是回调到自己的weChatBack页面
                        state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
                        style: 'black', // 提供"black"、"white"可选。二维码的样式
                        href: '' // 外部css文件url，需要https
                    })
                }
            }
        }

3、回调成功之后获取后端所需要的参数

    created () {
        this.toHome()
    },
    methods: {
        // 获取vuex里面的登陆接口
        ...mapActions(['Login']),
        toHome () {
            // 在回调url上面获取所需要的参数
            const params = {
                loginType: 'string',
                state: this.$route.query.state,
                code: this.$route.query.code
            }
            login(params).then(res => {
                // todo 缓存token信息
                Cookies.set(ACCESS_TOKEN, res.accessToken, { expires: 1 })
                this.$router.push({ path: '/home' })
            })
        }
    }

企业微信内嵌二维码这样就已经实现了，如果想修改二维码样式可以通过herf属性进行修改