vue 微信二維碼掃碼登錄,附加 自定義樣式


 

大概流程:
 
先安裝 微信 的登錄, 然后 局部引入,局部注冊,方法調用,存 token,跳轉路由

 

npm 安裝

npm install vue-wxlogin --save-dev  

微信安裝 微信登錄,后面需要用到

要掃碼登錄的頁面
import wxlogin from 'vue-wxlogin'; // 先引入,后注冊
 
components:{
    wxlogin
  },

template 部分

<wxlogin   appid=" 微信首頁內找 appid "   :scope="'snsapi_login'"   :theme="'black'"   :redirect_uri='encodeURIComponent( " 登錄后跳轉的地址,前端自己生成路由,用於跳轉 " )'  rel="external nofollow"> </wxlogin>
 
注意:   redirect_uri: 回調地址,必須使用encodeURLComponent()編碼
 
自定義樣式需要去轉碼:http://tool.chinaz.com/Tools/Base64.aspx ( 找到底層代碼,手寫樣式,選擇加密, )
 
appid: 應用唯一標識(前面認證網頁應用中獲得) scope: 應用授權作用域,擁有多個作用域用逗號(,)分隔,網頁應用目前僅填寫snsapi\_login即可 theme: 提供"black"、"white"可選,默認為黑色文字描述。 redirect_uri:回調地址 href: 自定義樣式鏈接,只能使用https鏈接或者base64編碼的地址
 

href必須使用 text/css模式,生成的base64添加到'data:text/css;base64, 后面這一節就是你加密的內容 '后面就可以了

例如: 
:href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ==' "
 
// 注釋: 地址是前端自己生成,需要加上域名,本地需要在 host 文件配置 域名. 例如: 127.0.0.1  接項目的域名
 
掃碼跳轉登錄之后,在 新的頁面 內 去獲取 路由地址
 
data:{
  
redirect: undefined //用來獲取地址,用於重新向跳轉
}
created(){
this.code = this.$route.query.code;
},
watch:{
$route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      }
    }
 
}
 
methods:{
 
 引入后端方法名字(){
 
  后端方法( 傳參 )。then(res=>{
 
  掃碼成功,存 token。根據項目決定 存 cookie 或者其他地方
  
this.$router.push({ path: this.redirect || "/" }); // 重定向跳轉路由
})  
 
  }
  
}
 
 
 
 
 
 
 
 
 



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM