整理一下通过h5做微信分享相关配置。
登录微信公众号,获取AppID
,配置白名单
,然后配置JS接口安全域名
。
登录公众号后,左侧菜单栏选择:开发 => 基本配置,直接复制开发者ID(AppID)即可:
AppID
注意使用公网IP
配置白名单
左侧菜单栏选择:设置 => 公众号设置:
JS接口安全域名
网页授权主要是获取微信openId使用,如果只是用分享操作,本步可以略过。
网页授权介绍
大致步骤是:
在配置完前面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编码处理使用。
在拿到上述完整链接后,通过window.location.href = ${url}
进行网页授权即可。在授权成功后,页面会重定向到自己设置的url页面去,然后在该连接上会有code值,取出即可:
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();
将拿到的code值传给后端即可,看具体需求决定是否前端使用openId,如果非必要则不在前端获取保存或者由后端加密后传给前端使用。
大致分为五个步骤:
在步骤 1.3 中已经配置。
在需要调用JS接口的页面引入如下JS文件:https://res.wx.qq.com/open/js/jweixin-1.6.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
配置需要如下几个参数:
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接口。
签名算法所有JS接口列表
接下来就可以写分享信息配置了。配置信息一般都是通过wx.ready
处理的:
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
例如我们要分享到朋友圈,配置则如下:
// 需在用户可能点击分享按钮前就先调用,在不影响资源处理的情况下尽早配置即可
wx.ready(function () {
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 操作成功后要做的事儿
}
})
});
注意:不要出现诱导分享
同样,一般都是通过wx.error
处理失败相关信息:
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
其实微信分享(地理位置、扫一扫、卡券等微信各类接口)都是通过上述步骤配置的,可举一反三,在面对不同需求时通过微信开发文档来进行更为复杂的操作。