微信JSSdk实现分享功能

时间  2019-11-11
标签 微信 jssdk 实现 分享 功能 繁體版
原文   原文链接

1. 概述

微信分享服务器的做用是为用户在微信浏览器端对来自网站以及客户端的页面进行二次分享连接时更友好的展现提供服务。为实现二次分享功能须要使用微信JS-SDK来开发.javascript

微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。微信JS-SDK功能不少。
经过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时能够直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。html

2. 流程图

3. 微信二次分享功能实现的具体步骤

步骤一：绑定域名(微信公众平台配置)

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

备注：登陆后可在“开发者中心”查看对应的接口权限。算法

须要配置白名单json

步骤二：引入JS文件（须要分享的页面）

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

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

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

步骤三：经过config接口注入权限验证配置(微信分享服务器主要提供下面参数生成)

全部须要使用JS-SDK的页面必须先注入配置信息，不然将没法调用缓存

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

签名算法见文末的附录1，全部JS接口列表见文末的附录2安全

步骤四：经过ready接口处理成功验证（待分享的页面配置二次分享的页面信息如标题，缩略图，描述等）

wx.ready(function(){
      // config信息验证后会执行ready方法，全部接口调用都必须在config接口得到结果以后，config是一个客户端的异步操做，因此若是须要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则能够直接调用，不须要放在ready函数中。
        # 分享到朋友圈按钮点击状态及自定义分享内容
        wx.onMenuShareTimeline({
          title: '', // 分享标题
          link: '', // 分享连接，该连接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: '', // 分享图标
          success: function () {
          // 用户点击了分享后执行的回调函数
            }
        });
    
        # 分享到QQ按钮点击状态及自定义分享内容
        wx.onMenuShareQQ({
          title: '', // 分享标题
          desc: '', // 分享描述
          link: '', // 分享连接
          imgUrl: '', // 分享图标
          success: function () {
          // 用户确认分享后执行的回调函数
          },
          cancel: function () {
          // 用户取消分享后执行的回调函数
          }
        });
    
        # 分享到腾讯微博按钮点击状态及自定义分享内容
        wx.onMenuShareWeibo({
          title: '', // 分享标题
          desc: '', // 分享描述
          link: '', // 分享连接
          imgUrl: '', // 分享图标
          success: function () {
          // 用户确认分享后执行的回调函数
          },
          cancel: function () {
          // 用户取消分享后执行的回调函数
          }
        });
    
        # 分享到QQ空间按钮点击状态及自定义分享内容
        wx.onMenuShareQZone({
          title: '', // 分享标题
          desc: '', // 分享描述
          link: '', // 分享连接
          imgUrl: '', // 分享图标
          success: function () {
          // 用户确认分享后执行的回调函数
          },
          cancel: function () {
          // 用户取消分享后执行的回调函数
          }
        });
    
    });

4. 如何提供权限验证配置（微信分享服务器的业务功能）

即以下参数服务器

wx.config({
      debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
      appId: '', // 必填，公众号的惟一标识
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
      jsApiList: [] // 必填，须要使用的JS接口列表这里咱们使用微信分享相关的js接口列表["checkJsApi","onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo"] 
    });

下面主要说明signature的生成流程

  1. 获取access_token

  2. 使用获取到的access_token获取jsapi_ticket

  3. 将排序后的参数URL键值对的格式（即key1=value1&key2=value）拼接成字符串,sha1签名，获得signature

4.1 获取access_token

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

接口调用请求说明

## https请求方式: GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

参数说明

参数 是否必须 说明
grant_type 是 获取access_token填写client_credential
appid 是 第三方用户惟一凭证
secret 是 第三方用户惟一凭证密钥，即appsecret

返回说明

正常状况下，微信会返回下述JSON数据包给公众号：

{
        "access_token":"ACCESS_TOKEN",
        "expires_in":7200
    }

参数说明

参数 说明
access_token 获取到的凭证
expires_in 凭证有效时间，单位：秒

4.2 获取jsapi_ticket

jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常状况下，jsapi_ticket的有效期为7200秒，经过access_token来获取。因为获取jsapi_ticket的api调用次数很是有限，频繁刷新jsapi_ticket会致使api调用受限，影响自身业务，开发者必须在本身的服务全局缓存jsapi_ticket 。

  1. 参考如下文档获取access_token（有效期7200秒，开发者必须在本身的服务全局缓存access_token）：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.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

成功返回以下JSON：

{
      "errcode":0,
      "errmsg":"ok",
      "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
      "expires_in":7200
    }

得到jsapi_ticket以后，就能够生成JS-SDK权限验证的签名了。

4.3 生成签名

签名生成规则以下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前待分享网页URL，不包含#及其后面部分） 。对全部待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里须要注意的是全部参数名均为小写字符。对string1做sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=当前待分享网页URL

步骤1. 对全部待签名参数按照字段名的ASCII码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名，获得signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事项

  1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
  2. 签名用的url必须是调用JS接口页面的完整URL。
  3. 出于安全考虑，开发者必须在服务器端实现签名的逻辑。

最终效果以下

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程