整理一下通过h5做微信分享相关配置。
流程介绍
- 公众号配置（AppID、IP白名单、JS接口安全域名）
- 网页授权
- JSSDK配置使用
1. 公众号配置
登录微信公众号，获取AppID，配置白名单，然后配置JS接口安全域名。
1.1 获取AppID
登录公众号后，左侧菜单栏选择：开发 => 基本配置，直接复制开发者ID(AppID)即可：
1.2 配置白名单
注意使用公网IP
1.3 配置JS接口安全域名
左侧菜单栏选择：设置 => 公众号设置：
2. 网页授权
网页授权主要是获取微信openId使用，如果只是用分享操作，本步可以略过。
大致步骤是：
- 跳微信网页授权链接
- 获取code值
- 传给后端，后端操作，得到用户openId
2.1 网页授权链接
在配置完前面AppId、白名单及安全域名后，开始处理网页授权。
网页授权这一块儿内容主要是后端需要处理的内容较多，前端还是很简单的，仅需要跳入微信链接即可。为什么要走这一步呢因为有些操作，例如微信支付、播放微信录音、获取微信地址、微信卡券、商品、小店等等许多功能必须在微信浏览器汇总打开操作才可以，因此需要跳入微信浏览器及微信链接来处理后续操作。当配置后，链接便只有在微信浏览器中打开才会生效了，不然会提示：
链接如下：
https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appId}&redirect_uri=={$URL}&response_type=code&scope=snsapi_base#wechat_redirect
参数分解
| 参数 | 值 | 备注 |
|---|---|---|
| appid | appid值 | 公众号的唯一标识 |
| redirect_uri | urlEncode | 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理,要与1.3中配置的域名对应 |
| response_type | code | 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ） |
| scope | snsapi_base | 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节 |
| #wechat_redirect | 后缀 | 固定填写即可,无论直接打开还是做页面302重定向时候，必须带此参数 |
可见，上面需要填入的变量有二，一个是前面回去的AppId，另外一个则是url，需要写的是与配置域名所对应域名下的url，并且要进行urlEncode编码处理使用。
2.2 获取code值
在拿到上述完整链接后，通过window.location.href = ${url}进行网页授权即可。在授权成功后，页面会重定向到自己设置的url页面去，然后在该连接上会有code值，取出即可：
// 取出code值
function getCode() {
let obj = {};
let url = window.location.search; // 从问号 (?) 开始的 URL（查询部分
let str = url.substring(1,url.length); // 去掉问号
let arr = str.split('&'); // 以'&'分割为数组
// 将所有参数搞成键值对形式放入obj对象
for(let i = 0; i < arr.length; i ++){
obj[arr[i].split("=")[0]] = unescape(arr[i].split("=")[1]);
}
if(obj.code) {
return obj.code;
}
}
getCode();
2.3 换取openId
将拿到的code值传给后端即可，看具体需求决定是否前端使用openId，如果非必要则不在前端获取保存或者由后端加密后传给前端使用。
3. JSSDK配置使用
大致分为五个步骤：
- 绑定域名
- 引入JS文件
- 通过config接口注入权限验证配置
- 通过ready接口处理成功验证
- 通过error接口处理失败验证
3.1 绑定域名
在步骤 1.3 中已经配置。
3.2 引入JS文件
在需要调用JS接口的页面引入如下JS文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载
3.3 通过config接口注入权限验证配置
配置需要如下几个参数：
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: '', // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '', // 必填，签名
jsApiList: [], // 必填，需要使用的JS接口列表
});
那这些参数从哪儿来呢？依旧不用担心，依然是交给后端处理，后端返回时间戳、随机串及签名，其他的自己配置即可。
通过后端获取需要进行一个小交互，将此时的链接地址(window.location.href)传给后端即可。
于是就有了上述的除了最后一个以外的所有参数。最后一个jsApiList则是写分享接口，如我们想要分享到朋友圈、QQ、腾讯微博这3个，那就写：
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'xxx', // 必填，公众号的唯一标识
timestamp: 'xxx', // 必填，生成签名的时间戳
nonceStr: 'xxx', // 必填，生成签名的随机串
signature: 'xxx', // 必填，签名
jsApiList: ['checkJsApi,''updateTimelineShareData','updateAppMessageShareData','onMenuShareWeibo'], // 必填，需要使用的JS接口列表
});
可以发现，我们其实多配置了一个checkJsApi，这个是一个判断配置，可以判断当前客户端版本是否支持指定JS接口。
3.4 通过ready接口处理成功验证
接下来就可以写分享信息配置了。配置信息一般都是通过wx.ready处理的:
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
例如我们要分享到朋友圈，配置则如下：
// 需在用户可能点击分享按钮前就先调用，在不影响资源处理的情况下尽早配置即可
wx.ready(function () {
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 操作成功后要做的事儿
}
})
});
注意：不要出现诱导分享
3.5 通过error接口处理失败验证
同样，一般都是通过wx.error处理失败相关信息：
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
小结
其实微信分享（地理位置、扫一扫、卡券等微信各类接口）都是通过上述步骤配置的，可举一反三，在面对不同需求时通过微信开发文档来进行更为复杂的操作。
