js处理微信分享配置

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

流程介绍

公众号配置（AppID、IP白名单、JS接口安全域名）
网页授权
JSSDK配置使用

1. 公众号配置

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

1.1 获取AppID

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

AppID

1.2 配置白名单

注意使用公网IP

配置白名单

1.3 配置JS接口安全域名

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

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值

// 取出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接口。

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

小结

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