网站微信扫码登陆总结以及在小程序登陆两者关联和关系，vue以及uniapp

首先先说明一下微信小程序开发是在微信公众平台开发完成拥有自己的appid

而网站的开发扫码等操作是在微信开放平台操作完成也会有一个appid两者不相同

两者在登陆的时候获取的openid是不相同的，也就是说一个应用有单独属于本项目的openid属性。

解决办法就是unionid在同一个主体下的unionid是相同的。

怎么在同一个主题下呢？前面说了网站和小程序是在两个平台开发的。这就是绑定操作了。

我们可以子啊微信开放平台申请下和对应的小程序进行绑定操作。这样就把两者进行了关联。（公众号登陆授权也是同样的操纵）

好了，在理清之后就开始开发操作了。

网站上微信登陆提供了两种方法

1.新打开页面调转到微信的扫码登陆页面

gotoWeixin(){//跳转到微信登陆
　　　　let centerUrl= 'https://open.weixin.qq.com/connect/qrconnect?appid=appid&redirect_uri=重定向地址urlencode编码&response_type=code&scope=snsapi_login&state=网站自己携带的参数重定向后原样输出#wechat_redirect';

　　　 window.open(centerUrl, '_blank'); 
}

2.在自己网站内部显示微信扫码

在index.html引入      
<!-- <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> -->管网提供的文件地址


var obj = new WxLogin({
                      id:"weixin",    //div的id
                      appid: "appid",
                      scope: "snsapi_login",
                      redirect_uri: "http...",//urlencode编码
      });

这里两种方法登陆的前半部分。后半部分重定向的地址中获取code码然后调转，这里使用了路由拦截，这里说明一下重定向的地址域名一定得和开放平台申请的地址相同。所以在本地发开发测试有一定的难度。可以修改本地系统的host文件，具体方法请大家搜索查阅

// 路由发生变化修改页面title/meta
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面meta */
  console.log(to,'--------5645645767566867全局路由1111111111111111')
  if(to.path=='/jump'){
    //微信登陆跳转
    console.log(to.query,'--------微信登陆跳转')
    if(to.query.state=='zhuangtai'){
      url.qrcode({
        code:to.query.code
      }).then(res=>{
        if(res.data.code[0]=="200"){
          console.log(res,'---------------')
          let xx=res.data.data[0].fields
          xx.user_id=res.data.data[0].pk
          sessionStorage.setItem('weixinUser',JSON.stringify(xx));
          sessionStorage.setItem('weixinsetcompanyname',res.data.companyname);
            next('/index/MFprojectManagement')//去设备管理

        }else{
          // this.$message.error(res.data.message[0]);
          next('/login?tip=用户不存在，请使用密码登陆')//个人信息
        }
      })
    }else{
      url.qrcodev1({
        code:to.query.code,
        user_id:to.query.state
      }).then(res=>{
        if(res.data.code[0]=="200"){
          sessionStorage.setItem('weixinUser',JSON.stringify(xx));
          sessionStorage.setItem('weixinsetcompanyname',res.data.companyname);
          next('/UserInformation/UItwo')//个人信息
        }else{
          // this.$message.error(res.data.message[0]);
          next('/login?tip=发生错误请重新登陆')//个人信息
        }
      })
    }

    
  }else{
    if(to.meta.content){
      let head = document.getElementsByTagName('head');
      let meta = document.createElement('meta');
      meta.content = to.meta.content;
      head[0].appendChild(meta)
     }
     /* 路由发生变化修改页面title */
     if (to.meta.title) {
      document.title = to.meta.title;
     }
     next()
  }
});

小程序登陆直接用（还有别的方案，这里只说这一种）

            userLogin() {//获取用户openid
                let _this = this;
                uni.login({
                    success: res => {
                        let code = res.code;
                        console.log(res,'--------登陆韩慧参数')
                        if (code) {
                            url.wechatqrcode({//获取到code码后项后端传递，接下来
                                code:code
                            }).then(response=>{

                            })
                        }
                    }
                });

            }