js处理微信分享配置

整理一下通过h5做微信分享相关配置。

流程介绍

  1. 公众号配置(AppID、IP白名单、JS接口安全域名)
  2. 网页授权
  3. JSSDK配置使用

1. 公众号配置

登录微信公众号,获取AppID配置白名单,然后配置JS接口安全域名

1.1 获取AppID

登录公众号后,左侧菜单栏选择:开发 => 基本配置,直接复制开发者ID(AppID)即可:

AppID

1.2 配置白名单

注意使用公网IP

配置白名单

1.3 配置JS接口安全域名

左侧菜单栏选择:设置 => 公众号设置:

JS接口安全域名

2. 网页授权

网页授权主要是获取微信openId使用,如果只是用分享操作,本步可以略过。

网页授权介绍

大致步骤是:

  1. 跳微信网页授权链接
  2. 获取code值
  3. 传给后端,后端操作,得到用户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值
// 取出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配置使用

大致分为五个步骤:

  1. 绑定域名
  2. 引入JS文件
  3. 通过config接口注入权限验证配置
  4. 通过ready接口处理成功验证
  5. 通过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接口。

签名算法
所有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可以在这里更新签名。
});

小结

其实微信分享(地理位置、扫一扫、卡券等微信各类接口)都是通过上述步骤配置的,可举一反三,在面对不同需求时通过微信开发文档来进行更为复杂的操作。

推荐阅读更多精彩内容