先整理下需求:
- 首先确定的是,这是一个H5页面,是在微信端展示的一个H5页面
- 需要获取微信用户头像、性别、昵称需要获取微信用户头像、性别、昵称
- 测试结果需要生成图片,用户可直接长按保存图片
- 分享
具体流程:
- 申请公众号(需要公众平台的账号密码)
- 需要注册成为当前该公众号的开发者
- 需要后台进行服务器的配置http使用80端口,https使用443端口
- 需要知道appid(公众号的唯一授权)
- 需要知道redirect_uri(授权成功后的回调地址)
- 因为需求是要做一个在微信端的h5页面,还需要获取微信用户的信息,所以一定会进行微信网页授权。微信授权分为两种:
- snsapi_base:获取用户进入页面的openID,是静默授权(也就是用户不会有感觉)
- snsapi_userinfo:获取用户的基本信息,是非静默授权(需要用户手动进行授权)
需要在微信打开此地址(地址里的内容需要自行填写,图片是地址的参数)
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=scope&state=STATE#wechat_redirect
用户同意授权后,页面将跳转至 redirect_uri/?code=CODE&state=STATE
redirect_uri就是你填写的回调地址
- 需要获取code(直接可以从地址栏获取)通过code换取网页的access_token(与之前的access_token不同),如果scope的值是snsapi_base(静默授权)就会同时获取到
//取地址栏参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
};
//调用方法
GetQueryString("code");
-
请求方式get
-
通过拼地址的方式向后台发送code请求用户数据
-
我这里生成图片用的html2canvas,具体教程点击这里
-
html2canvas.js下载点击这里
-
微信分享
-
需要在调用接口的页面引入js点击这里
-
需要提高服务器稳定性时,可点击这里
-
需要后台生成签名,具体可看微信公众平台的附录1点击这里
-
获取签名,就是普通的post请求,这里需要给后台传一个url就是上面回调函数中的url,也可以通过
window.location.href.split('#')[0]
方式来获取,后台需要返回生成签名的时间戳(timestamp),随机串(nonceStr)和签名(signature) -
注入权限验证配置(所有需要使用JS-SDK的页面必须先注入配置信息)
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
- 分享接口
//分享给朋友,分享到QQ好友
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: location.origin , // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function() {
//成功后的回调函数
}
});
//分享到朋友圈,分享到QQ空间
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateTimelineShareData({
title: '', // 分享标题
link: location.origin, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
});
location.origin返回url中完整的协议和主机地址部分,包括端口