‘壹’ 网站应用接入微信登录
1.网站接入微信登录的好处
网站接入微信登录，微信登录使网站可以免除注册的流程，并充分利用庞大的微信用户群来实现快速传播；网站接入微信登录后，用户只需要使用手机扫码就可登录，简化用户注册流程，更有效率的提高转化用户流量。
2.站接入微信登录之前需要申请
接入微信登录前，网站需首先进行申请，获得对应的appid与appkey，以保证后续流程中可正确对网站与用户进行验证与授权；我们以瓴码官网http://www.zeropaas.com申请。
3.瓴码官网前端增加相关代码
let nowUrl = location.href;
let result = /code=(w*)&state=([0-9]*)/.exec(nowUrl);
if(result){
window.parent.postMessage(nowUrl,'*');
}
4.网站前端将微信登录二维码图标内嵌至一个p中，并显示该p
!function (a, b, c) {
function d(a) {
var c = "default";
a.self_redirect === !0 ? c = "true" : a.self_redirect === !1 && (c = "false");
var d = b.createElement("iframe"),
e = "https://open.weixin.qq.com/connect/qrconnect?appid=" + a.appid + "&scope=" + a.scope + "&redirect_uri=" + a.redirect_uri + "&state=" + a.state + "&login_type=jssdk&self_redirect=" + c + '&styletype=' + (a.styletype || '') + '&sizetype=' + (a.sizetype || '') + '&bgcolor=' + (a.bgcolor || '') + '&rst=' + (a.rst || '');
e += a.style ? "&style=" + a.style : "", e += a.href ? "&href=" + a.href : "", d.src = e, d.frameBorder = "0", d.allowTransparency = "true", d.scrolling = "no", d.width = "300px", d.height = "400px";
var f = b.querySelector('.weChatLogin_col_weChatBouncedDiv');//微信二维码内嵌p
f.innerHTML = "", f.appendChild(d)
}
a.WxLogin = d
}(window, document);
const state = Number(new Date()).toString();//获取状态值
window.sessionStorage.setItem('state', state )//暂存状态值
const obj = new WxLogin({//实例化一个二维码
self_redirect: true,
id: "weChatBouncedDiv",//微信二维码图标内嵌p的id
appid: "wxfb8bf3273365770a",//应用唯一标识
scope: "snsapi_login",
redirect_uri: "http%3a%2f%2fzeropaas.com",//回调地址
state: state ,//用于保持请求和回调的状态，授权请求后原样带回给第三方；该参数可应用于防止csrf攻击（跨站请求伪造攻击）
});
5.网站前端微信登录授权成功之后的处理
window.onmessage = function(e) {//微信登录授权成功后，官网触发该消息
let url = e.data;//e.data="http://www.zeropaas.com/?code=xxx&state=xxx"
if(url.indexOf('?') != -1){
url = url.substr(url.indexOf('?'))//url="?code=xxx&state=xxx"
let arr = url.substr(1).split('&');//arr=["code=xxx","state=xxx"]
arr = arr.map(item => {
item = item.split('=')
let map = new Map()
map.set(item[0],item[1])
item = Object.fromEntries(map)
return item
})//arr=[{code:"xxx"},{state:"xxx"}]
let oldState = window.sessionStorage.getItem('state');
let newState = arr[1].state;
//
// loadingDiv.style.display = 'flex'
// loadingDiv.innerHTML = '正在登录中...'
$this.showVessel('loadingDiv',true,()=>{//显示正在登录中
$this.sm['loading'].startMole(function () {
$this.showSubMole('loading', true, function () {
if(oldState === newState){
$this.ep.thirdLogin(0,arr[0].code,1,1,0,null,function (result) {//向云端发送第三登录事件,code是微信登录码
if (result === null) {
$this.$router.push('/')//微信登录成功，并且不要绑定手机号
} else {//微信登录成功，并且需要绑定手机号
$this.openID = result//微信用户ID
$this.showSubMole('loading', false, function () {}, function () {})
$this.showVessel('loadingDiv',false,()=>{},()=>{})//隐藏正在登录中
$this.showBindingPhone()//绑定手机号
}
},function (err) {
console.log(err)
})
}
}, function () {})
}, function () {})
},()=>{})
window.onmessage = null
}
},
6.网站云端获取微信openid和access_token
function getOpenid_WX(appid,appSecret,code,successCB, errorCB){//获取微信openid和token
const request = require(global.nodePath + "/node_moles/request");
let url1= 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appid + '&secret=' + appSecret + '&code=' + code + '&grant_type=authorization_code'
request.get(
{
url: url1,
method: "GET",
json: true,
headers: {
"Content-type": "application/json",
},
},function (error, response, body) {
if (response.statusCode == 200) {
let data = JSON.stringify(body, null, 4);//从一个对象解析出字符串，第三个参数是格式化缩进格式按照四个字符缩进
let data1 = (JSON.parse(data));
let access_token = data1.access_token;
let openid = data1.openid;
successCB(access_token,openid);
}else {
errorCB(['获取微信信息失败！状态码：'+ response.statusCode]);
}
}
);
}
7.微信登录和QQ登录的区别
微信登录可以内嵌网站登录页面，也可以打开微信登录授权页面，QQ登录不可以内嵌网站登录授权页面，必须打开QQ登录授权页面，如果是打开微信或QQ登录授权页面，则登录授权成功后必须关闭该页面。
微信登录回调地址可以指定一级根目录或二级子目录，比如 "http%3a%2f%2fzeropaas.com "或"http%3a%2f%2fzeropaas.com/qqLogin"， QQ登录回调地址必须指定二级子目录，比如 "http%3a%2f%2fzeropaas.com/qqLogin"
‘贰’ 微信进行网站登录，个人信息是否会泄露
如果是正规的网站，个人信息是不会泄露的。
以下是微信的相关介绍：
微信由深圳腾讯控股有限公司（Tencent Holdings Limited）于2010年10月筹划启动，由腾讯广州研发中心产品团队打造 。该团队经理张小龙所带领的团队曾成功开发过Foxmail、QQ邮箱等互联网项目。腾讯公司总裁马化腾在产品策划的邮件中确定了这款产品的名称叫做“微信”。
2011年1月21日，微信发布针对iPhone用户的1.0测试版。该版本支持通过QQ号来导入现有的联系人资料，但仅有即时通讯、分享照片和更换头像等简单功能。
在随后1.1、1.2和1.3三个测试版中，微信逐渐增加了对手机通讯录的读取、与腾讯微博私信的互通以及多人会话功能的支持，截至2011年4月底，腾讯微信获得了四五百万注册用户。
以上资料参考网络——微信
‘叁’ 微信网页版登陆是什么
微信网页版的地址是www.wx.qq.com，用微信扫描网页上的二维码即可登录。
‘肆’ 微信网站有什么优势
微信网站七项特点：
1.便捷性，2.隐私性，3.互动性，4.传播力，5.关注力，6.成交率，7.转化率；
微信网站六大优势：
1.微信网站不用注册域名更加方便、快捷
2.不用购买空间更节约，为企业降低成本
3.不用进行网站备案，节约大量时间
4.微信网站操作简单，一看就会操作，不需要专业技术人员自己就可以编辑网站，对网站进行调整
5.实现电脑、手机同步销售。网站在电脑端销售的同时，微网站同时可以在移动端进行销售，并且微网站可避免人不在电脑旁时造成销售滞后情况的出现，确保不造成流单
6.提供在线支付、购物、会员卡等多种功能，增强消费者的体验度，从而提高消费者认可度；
建设微信网站的五大原因：
1.微信用户已达6亿，并且在持续增长中；
2.可以实现一个更完善的互联网营销体系，PC网站，手机网站，微信网站应有尽有；
3.微信网站的拥有数量并不多，现在进入更容易；
4.微站建设的技术已经成熟
5.现在网站建设的成本更低廉
‘伍’ 微信网站都有哪些功能
微网站源于WebApp和网站的融合创新，兼容iOS、android、WP等各大操作系统，可以方便的与微信、微博等应用的链接，适应移动客户端浏览市场对浏览体验与交互性能要求的新一代网站，它是存在微信公众平台里的一个网站。
功能有很多，具体可以根据用户自己的需求来开发。下面介绍一些常见的功能：
自定义菜单
自定义回复
轮播背景图
会员中心（签单、积分等）
微活动
只要你能想到的，都可以在里面实现，和移动网站一样，只是打开的路径不一样。微网站有模版，也可以按照需求来开发，我们就是做这个的。
功能还行不，使用的话要进入官网（微信网页版），进入后需要扫描二维码，就可以进入了。现阶段应该是支持简单的聊天、截屏、文件图片传输功能，相对来说电脑版的支持的更多一些。QQ浏览器7.6版已经开始内测，这意味着微信电脑版很快将与广大用户面试了，比较来说，电脑版新增加了很多功能，比如看网页还能聊天等等！