vue项目中如何实现一个微信登录功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
1,下载组件wxlogin
npm安装vue-wxlogin——保存
2,引入组件,给组件传参
3,重定向的url应该是微信登录官网中的微信授权作用域
4,如果url里面有端口号,微信授权作用里面也要有
5,重定向的url:需要在http://tool.chinaz.com/tools/urlencode.aspx中转码
6,微信登录成功后,会自动重定向到新地址,此时的地址栏中就有代码参数
7,如果报错说不能从组件跳到页面,那就找到wxlogin组件里面的iframe标签,加上这个属性:沙箱=霸市斫疟綼llow-top-navigation allow-same-origin”
<强>报错内容:
qrconnect& # 63;范围=snsapi_login& redirect_uri 3=http % % 2 f % 2 f % 2的状态=,login_type=jssdk& self_redirect=false&风格=black& href=https://www.yisu.com/zixun/: 84不安全的JavaScript试图启动导航坐标系与起源的http://localhost: 9020坐标系与url的https://open.weixin.qq.com/connect/qrconnect& # 63; app&scope=snsapi_login&redirect_uri=http % 3 a % 2 f % 2 f&state=&login_type=jssdk&self_redirect=false&style=black&href='。框架试图针对其顶级导航窗口,但既不是同源的目标也没有收到用户的手势。见https://www.chromestatus.com/features/5851021045661696。”“
<强> vue移动端微信授权登录插件封装
1。新建wechatAuth.js文件
vue项目中如何实现一个微信登录功能
