H5微信分享、自定义微信分享

在一个h5页面添加微信，分享给微信好友、朋友圈、腾讯微博

下面来实现 。

需要：

1、需要一个企业版的微信公众号（认证过的）

2、一台服务器

企业版的微信公众号原因：

在微信公众平台的接口权限内可以看到，个人版公众号是没有权限自定义微信分享的，所以需要企业版公众号并开通认证。

具体步骤：

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。（这一步骤应该没有什么问题）

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载（没问题，很简单，一个script就搞定了）

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

这一步就有很大的问题了，这么多的参数是从哪里来的！

——1.先不管其他的，我们现在所需要的：（appId是微信公众号的appId，可以写死或者服务器返回）

  timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名

这样看来，其实真正需要的是 signature 签名

——2.看下signature 的生成流程：

生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

1.参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html

2.用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

上面的是官方的文档，说要拿到并且缓存 access_token 接口调用凭据 和 jsapi_ticket 临时票据，拿着access_token 去获取jsapi_ticket ，获得jsapi_ticket之后，自己生成个随机字符串（不懂的，网上百度怎么搞）加上时间戳，加上url地址，自己拼接好，最后进行sha1处理，就得到signature， 很是扯皮！另外access_token 一天的次数2000次，jsapi_ticket 一天的次数是100万次，都缓存下来，也可以只缓存token；（我是只缓存了token）

——这里说一下 access_token 

access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access_token失效。

公众平台的API调用所需的access_token的使用及生成方式说明：

1、建议公众号开发者使用中控服务器统一获取和刷新Access_token，其他业务逻辑服务器所使用的access_token均来自于该中控服务器，不应该各自去刷新，否则容易造成冲突，导致access_token覆盖而影响业务；

2、目前Access_token的有效期通过返回的expire_in来传达，目前是7200秒之内的值。中控服务器需要根据这个有效时间提前去刷新新access_token。在刷新过程中，中控服务器可对外继续输出的老access_token，此时公众平台后台会保证在5分钟内，新老access_token都可用，这保证了第三方业务的平滑过渡；

3、Access_token的有效时间可能会在未来有调整，所以中控服务器不仅需要内部定时主动刷新，还需要提供被动刷新access_token的接口，这样便于业务服务器在API调用获知access_token已超时的情况下，可以触发access_token的刷新流程。

公众号和小程序均可以使用AppID和AppSecret调用本接口来获取access_token。AppID和AppSecret可在“微信公众平台-开发-基本配置”页中获得（需要已经成为开发者，且帐号没有异常状态）。调用接口时，请登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中，点击查看设置方法，否则将无法调用成功。小程序无需配置IP白名单。

简单来说就是调用微信的分享接口，需要用到一个凭证access_token，而这个凭证是有数量和有效时间限制的，所以需要用自己的服务器做缓存处理，当access_token过期后再去请求新的access_token，需要一台服务器和配置ip白名单。

PHP来做的话：

 a. 先定义个access_tokenjson文件，我选择用json文件存，没有用数据库存

{
    "access_token": "xxx",
    "expires": 12345
}

 b.jssdk.php文件: 文件夹目录要有修改权限 sudo chmod -R 777 your_dir 

思路：先取缓存的token的时间，与现在的时间对比，如果现在的时间大于缓存时间，则把现在时间+7200赋给缓存的时间，如果超时请求新的token，如果没超时用缓存的token，再生成jsapi_ticket，生成signature签名。

步骤四：通过ready接口处理成功验证 又回到前端页面上

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

配置好就可以用分享接口了

分享接口

自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

 

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    wx.updateAppMessageShareData({ 
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 设置成功
        }
});

更多接口可以去文档里看