前端微信h5开发

先整理下需求：

1. 首先确定的是，这是一个H5页面，是在微信端展示的一个H5页面
2. 需要获取微信用户头像、性别、昵称需要获取微信用户头像、性别、昵称
3. 测试结果需要生成图片，用户可直接长按保存图片
4. 分享

具体流程：

• 申请公众号（需要公众平台的账号密码）
• 需要注册成为当前该公众号的开发者
• 需要后台进行服务器的配置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中完整的协议和主机地址部分,包括端口