微信浏览器分享链接，自定义图片和文案

准备工作：
    1. 首先要有一个企业认证公众号；一定是认证号；非认证号是没有分享自定义的权限的

    2. 然后需要在 公众号设置--》功能设置   js接口安全域名 设置 域名；不带http(s):// 的哦

    3. 同时需要，登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中，点击查看设置方法，否则将无法调用成功。（顺便提一句：小程序无需配置IP白名单）

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

 

    在html引入微信js-sdk  <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

    如果在react项目中  可以npm install weixin-js-sdk  or    yarn add weixin-js-sdk --save-dev 方式引入

    import wx from 'weixin-js-sdk';
    如果在typescript中引入，报隐式any属性，那么 引入这个sdk文件的后缀可以改成js，同样可以使用的，绕过了ts而已

可以根据微信的jssdk文档进行设置；具体实现步骤如下：

    1. 后端根据自己公司公众号的 appId 和 Appsecret 获取access_token
可以到官方的调试页面获取access_token看看是否是正确，点击获取获取access_token
    2. 使用access_token 获取jsapi_ticket

    3. 获取signature签名；算法案例

http://demo.open.weixin.qq.com/jssdk/sample.zip

备注：链接中包含php、java、nodejs以及python的示例代码供第三方参考，第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。

    4. 调用服务端接口，获取appId、timestamp、nonceStr、signature等参数，前端传要分享的url给后端；需要带参数（ps:带参数的url需要用 encodeURIComponent，不然特殊字符如 &  就会把带参数的url拆开匹配了； url是全url但不包含#后  encodeURIComponent(location.href.split("#")[0])  ）；
    5.

wx.config({

    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

    appId: '', // 必填，公众号的唯一标识

    timestamp: res.timestamp, // 必填，生成签名的时间戳

    nonceStr: res.nonceStr, // 必填，生成签名的随机串

    signature: res.signature,// 必填，签名

    jsApiList: [

'checkJsApi',

'updateAppMessageShareData',

'updateTimelineShareData',

'onMenuShareTimeline',

'onMenuShareAppMessage'

] // 必填，需要使用的JS接口列表

});
 

先通过wx.config 注入权限验证配置

    6. 在wx.ready 接口里调用需要使用的API

wx.ready(function(){

// 在这里调用 API

    wx.updateAppMessageShareData({

        title: shareTitle, // 分享标题

        desc: descContent, // 分享描述

        link: location.href.split("#")[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

        imgUrl: imgUrl, // 分享图标

        success: function (res) {

        // 设置成功

    },

    cancel: function () {

        // 用户取消分享后执行的回调函数

    }

});

wx.updateTimelineShareData({

        title: shareTitle, // 分享标题

        link: lineLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

        imgUrl: imgUrl, // 分享图标

        success: function () {

            // 设置成功

        },

cancel: function () {

        // 用户取消分享后执行的回调函数

}

});

});

 

这里目前需要注意的是，一些安卓端微信、低版本微信还不支持新的API；需要同时调用 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口来兼容低版本

以上是自定义分享的步骤

 

以下会对遇到的问题做一些总结：
Q1: 微信分享链接出现config:invalid signature；
A1: 出现该错误，检查顺序

1. 确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2. 确认config中noncestr, timestamp与用以签名中的对应noncestr, timestamp一致。
3. 确认url是页面完整的url，包括GET参数部分。
4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。（直接由后端返回就不至于有这个问题）
5. 确保一定缓存access_token和jsapi_ticket，可以减少两次服务器请求加速体验外，还避免了触发频率限制，提高服务稳定性。

Q2: the permission value is offline verifying

A2: 出现该错误，检查顺序
     1.确认config正确通过。

     2.如果是在页面加载好时就调用了JSAPI，则必须写在wx.ready的回调中。

     3.确认config的jsApiList参数包含了这个JSAPI。

 

Q3: 微信二次分享自定义失败问题
A3:  主要是由于分享一次之后，微信会给url拼接类似 from=singlemessage、 isappinstalled=0 这样的参数；然后传url给服务器端，计算出的signature与微信计算的signature值不匹配；解决方式是，一旦检测到url中含有微信拼接的参数，则将url重置为最初的url
 

function resetUrl() {

    var from = getQueryString('from');

    var appinstall = getQueryString('appinstall');

    var sec = getQueryString('sec');

    var timekey = getQueryString('timekey');

    if(from || appinstall || sec || timekey){//假如拼接上了

        window.location.href = 原本的url

    }

}

 

function getQueryString(name) {//根据字段看网址是否拼接&字符串

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

    var r = window.location.search.substr(1).match(reg);

    if (r != null)

        return unescape(r[2]);

    return null;

   }

resetUrl();