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 () {
          // 设置成功
        }
});

更多接口可以去文档里看

如果有其它的好的思路可以一起讨论 q:1092374246

猜你喜欢

转载自blog.csdn.net/qq_37942845/article/details/83824692