微信内嵌H5页面授权和分享Long Long Ago 用到了微信授权获取用户信息和分享，掉坑无数次，遂作此篇。文章从微信

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

Long Long Ago 用到了微信授权获取用户信息和分享，掉坑无数次，遂作此篇。

文章从微信授权获得的信息到如何进行微信授权以及微信分享讲解，部分代码实践仅实现基本功能，如需要自定义开发请在此基础上进行二次开发。

更多文章在我的github及个人公众号【全栈道路】上，欢迎观赏【前端知识点】，如有受益，不要钱，小手点个Star

阅读本文您将收获

微信授权获取的信息
前端如何实现微信授权
前端如何实现微信分享

微信授权能获取到什么

微信授权获得的基本信息
- 基本信息中包含了用户的展示信息，包括但不限于昵称，性别，地址，头像等信息。

{
    "openid":"xxx-xxx",
    "unionid":"xxxx",
    "nickname":"nickName",
    "sex":1, //1: 男性 2: 女性
    "language":"zh_CN",
    "city":"济南",
    "province":"山东",
    "country":"中国",
    "headimgurl":"http:xxxxxxxx",
    "privilege":[]
}

openid和unionid的区别
- 在不同的公众账号下openid是不一样的，而他们的unionid却是一样的
- 公众号只有在被绑定到微信开放平台帐号下后，才会获取UnionID。只要是同一个微信开放平台帐号下的公众号，用户的UnionID是唯一的。换句话说，同一用户，对同一个微信开放平台帐号下的不同应用，UnionID是相同的

项目情况

技术选型

项目语言：HTML、CSS、JavaScript
项目框架：Vue.js
项目搭建脚手架：vue-cli
工程化工具：webpack、Npm
源码管理：gitlab
运行环境：WeChatBrowser
第三方服务：微信JS-SDK

项目需求

微信授权获取用户信息
微信分享统计
提交表单携带微信部分信息

以下技术实现方式和方案都是基于公众号已分配相关授权和权限的情况下，具体授权和权限申请请查看微信官方文档，此处不做赘述

微信授权(基于公众号的授权方案)

目前网上大多分为两种方式去获取微信授权，一种是前端主导的微信授权，一种是server端主导的微信授权，两种方式实现的结果是一样的，具体采用何种方式可以根据自己项目情况去选择

授权方法

客户端中转的授权方式(图片来自网络)

完全由服务端主导的授权方式
- 由服务端主导的授权方式前端所开发的工作量很小，基本的授权认证都是在服务端完成，这部分不在本篇文章中讲解。

授权流程

客户端中转的授权方式
- 微信用户进入页面(动态网址需要提前向服务器端获取授权地址)
- 客户端携带redirect_uri向微信服务器发起授权请求
- 微信服务器授权成功会携带一个code在url上返回
- 客户端随即携带code向服务端发送请求
- 服务端返回用户信息
完全由服务端主导的授权方式

客户端中转的授权方式技术实现

获取微信授权code
- 务必使用当前的url，否则会鉴权失败。

let redirectUri = encodeURI(window.location.href)
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`

携带code向服务器端获取用户授权
- 微信授权后会将授权 code 放在 url 的参数中，前端只需要在 url 中拿到授权的 code 就可以和服务端进行相关信息的验证及用户数据的获取。

// 从返回的url上获取code
let code = getQuery(window.location.href).code
// 把code返回给后端从而获取授权的信息
axios.get("/xxx/getWxInfo?code=" + code).then(res => {
	if (res && res.data && res.data.code == 10000) {
		this.userInfo = res.data.data
		//获取成功后将userInfo存储在cookie中方便其他页面使用
		//localstorge存储在微信端存在问题，建议使用cookie存储
		//后续会写篇文章专门讲解微信端cookie存储和localstorge存储
		setCookie('userInfo', this.userInfo);
	}else {
		alert('微信授权失败，请重新微信授权后打开文章', res.code)
	}
}).catch(error => {
	this.userInfo = ''
	alert('微信授权失败，请重新微信授权后打开', res.code)
	console.log('获取微信授权出错了', error)
})

授权成功，此时已经拿到用户的微信的授权信息和个人信息

微信分享

分享流程

获取微信分享授权
自定义分享标题，分享摘要，分享图片，并写入微信配置(wx.config)
调用分享接口(wx.ready)
分享成功

微信分享技术实现

微信分享是个频繁调用的方法，实现过程中可以抽象出来，封装一下

//调用服务器端接口验证授权信息
function $setShare(options) {
	axios.get('/xxx/getWxSignature?url=' + encodeURIComponent(location.href.split('#')[0])).then(function(resp) {
	    if (!resp || !resp.data || resp.data.code != 10000) { return }
	    wx.config({
	        appId: resp.data.data.appid,
	        timestamp: resp.data.data.timestamp,
	        nonceStr: resp.data.data.noncestr,
	        signature: resp.data.data.signature,
	        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]
	    })

	    var shareTimeLineData = options || {
	        title: '分享标题',
	        desc: '分享摘要',
	        link: '',
	        imgUrl:'',
	    }

	    var shareAppData = options || {
	        title: '分享标题',
	        desc: '分享摘要',
	        link: '',
	        imgUrl:'',
	    }
	    wx.ready(function() {
	        wx.onMenuShareAppMessage(shareAppData);
	        wx.onMenuShareTimeline(shareTimeLineData);
	    });
	    wx.error(function(res){
	        console.log('分享签证失败', res)
	    })
	},function(err){
	    if (err) {
	        alert(err);
	    }else{
	        alert('网络错误,请稍后重试!')
	    }
	});
}

调用分享代码实现
- 微信分享的回调并不是分享成功的回调，而是用户点击了分享的回调，微信现有版本不会告知开发者用户是否分享成功

let shareWxData = {
	 title: '测试微信分享标题',
    desc: '测试微信分享摘要',
    link: window.location.href,
    imgUrl: 'xxxxxxx',
    success: function(res) {}
}
$setWxShare(shareWxData)