【vue前端開發】微信掃碼登錄

先head引入

  <script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

html如下

<div id="login_container"></div>

js如下

  setWxerwma() {
    const obj = new WxLogin({
      self_redirect: true,
      id: 'login_container', // 需要顯示的容器id
      appid: 'wxef5765dd395d8504', // 公眾號appid wx*******
      scope: 'snsapi_login', // 網頁默認即可
      redirect_uri: encodeURIComponent('https://passport.zcool.com.cn/thirdlogin/wechat_callback.do?appId=1006'), // 授權成功后回調的
      state: Math.ceil(Math.random() * 1000), // 可設置為簡單的隨機數加session用來校驗
      style: 'black', // 提供"black"、"white"可選。二維碼的樣式
      href: 'https://static.zcool.cn/passport4.0/css/wxCode.css?v=0.1' // 外部css文件url，需要https
    })
  }
  mounted() {
    this.setWxerwma()
  }

若報錯Cannot find name 'WxLogin'.  則可設置eslint規則

在.eslintrc.js中設置如下

 

 最終效果（內嵌網頁中）