文档章节

微信JS-SDK分享功能开发实例

PHP娃娃
 PHP娃娃
发布于 2015/03/10 13:16
字数 2246
阅读 1106
收藏 2

JSSDK使用步骤

 

步骤一:绑定域名

1、在此之前先确认一下你是否有已获得相应接口的权限,查看方法:登录微信公众平台,开发者中心-》接口权限表-》功能服务-》分享接口。查看自己是否已经获取分享自定义的接口权限。

如图:

2、然后进入“公众号设置”-》“功能设置”里填写“JS接口安全域名”。

如图:

 

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js

备注:支持使用 AMD/CMD 标准模块加载方法加载


步骤三:通过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: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

此处我为了方便测试,timestamp和nonceStr定为死的,实际应用中大家也可以写为动态的。

下面我重点说一下signature是怎么得到的。

 

JS-SDK使用权限签名算法

jsapi_ticket

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

  1. 参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token)。

  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权限验证的签名了。

签名算法

签名生成规则如下:参与签名的字段包括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=http://mp.weixin.qq.com?params=value


步骤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. 出于安全考虑,开发者必须在服务器端实现签名的逻辑

我的思路:

因为我的服务器没有装memcached,所以我用数据库来缓存access_token和jsapi_ticket,缓存大家可以依据自己的实际情况来定。缓存原理:在使用access_token和jsapi_ticket时,先判断数据库存的数据是否过期,如果过期就新生成新的数据并存入数据库,如果没有过期就从数据库取。

先建立两个表:

access_token缓存表:

 

jsapi_ticket缓存表:

代码如下:先建一个微信类Wechat,用来获取accessToken、getJSApi_ticket和signature

class Wechat
 {
  public $dsql;
      private function getAccessToken() //生成access_token,并存入数据库  
     {
          global $dsql;
          $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".AppId."&secret=".AppSecret;
          $data = getCurl($url);//通过自定义函数getCurl得到https的内容
          $resultArr = json_decode($data, true);//转为数组
          //access_token插入数据库做缓存
          $time=time();
          $sql="insert into wx_accesstoken(access_token,uptime) value('{$resultArr["access_token"]}',$time)";
          $dsql->ExecuteNoneQuery($sql);
          return $resultArr["access_token"];//获取access_token
      }
      private function getToken()//如果access_token有数据库缓存,就从数据库取,如果没有就重新取
      {
           global $dsql;
           $time=time()-7200;
           $sql="select * from wx_accesstoken where uptime>$time";
           $row=$dsql->GetOne($sql);
           if($row)
           {
            return $row['access_token'];//从数据库取
           }else{
            return $this->getAccessToken();//重新获取
           }
      }
      public function getJSApi_ticket(){//获取JSApi_ticket
           global $dsql;
           $time=time()-7200;
           $sql="select * from wx_jsApiTicket where uptime>$time";
           $row=$dsql->GetOne($sql);
           if($row)
           {
                return $row['access_token'];//从数据库取
           }else{
               //如果数据库没有保存有效的jsApiTicket,就重新生成并存入数据库
               $accessToken = $this->getToken();//获取access_token
               $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$accessToken."&type=jsapi";
               $data = getCurl($url);//通过自定义函数getCurl得到https的内容
               $resultArr = json_decode($data, true);//转为数组
               //插入数据库做缓存
               $nowtime=time();
               $sql="insert into wx_jsApiTicket(jsApiTicket,uptime) value('{$resultArr["ticket"]}',$nowtime)";
               $dsql->ExecuteNoneQuery($sql);
               return $resultArr['ticket'];//获取jsApi_ticket
           } 
      }
      public function getSignature(){
           $jsApi_ticket = $this->getJSApi_ticket();//获取access_token
           //file_put_contents("a.txt",$jsApi_ticket."\n",FILE_APPEND);此处是做断点测试用的
           //动态获取url
           if($_SERVER['QUERY_STRING']){
                $url= 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];
           }else{
                $url= 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];
           }
           
           //file_put_contents("a.txt",$url."\n",FILE_APPEND);
           $str = "jsapi_ticket=".$jsApi_ticket."&noncestr=2nDgiWM7gCxhL8v0&timestamp=1420774989&url=".$url;
           $signature = "";
           $signature=sha1($str);
          return $signature;
         }
  }
function getCurl($url){//get https的内容
     $ch = curl_init();
     curl_setopt($ch, CURLOPT_URL,$url);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);//不输出内容
     curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
     curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
     $result =  curl_exec($ch);
     curl_close ($ch);
     return $result;
 }
 
function dataPost($post_string, $url) {//POST方式提交数据
     $context = array ('http' => array ('method' => "POST", 'header' => "User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) \r\n Accept: */*", 'content' => $post_string ) );
     $stream_context = stream_context_create ( $context );
     $data = file_get_contents ( $url, FALSE, $stream_context );
     return $data;
 }

2.然后到需要调用JS接口的页面获得signature

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>微信JS-SDK Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <link rel="stylesheet" href="">
  <script src="js/jquery-1.7.2.js"></script>
</head>
<?php
define(AppId, "自己的AppId");//定义AppId,需要在微信公众平台申请自定义菜单后会得到
define(AppSecret, "自己的AppSecret");//定义AppSecret,需要在微信公众平台申请自定义菜单后会得到
include("wechat.class.php");//引入微信类
$signatureObj = new Wechat();//实例化微信类
$signature = $signatureObj->getSignature();
?>
<body ontouchstart="">
<div class="wxapi_container">
    <input type="hidden" name="signature" value="<?php echo $signature;?>" id="signature">
    <div class="lbox_close wxapi_form">
      <h3 id="menu-basic">基础接口</h3>
      <span class="desc">判断当前客户端是否支持指定JS接口</span>
      <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
      <h3 id="menu-share">分享接口</h3>
      <span class="desc">获取“分享到朋友圈”按钮点击状态及自定义分享内容接口</span>
      <button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
      <span class="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span>
      <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
      <span class="desc">获取“分享到QQ”按钮点击状态及自定义分享内容接口</span>
      <button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
      <span class="desc">获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口</span>
      <button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>
    </div>
  </div>
</body>
<script src=""> </script>
<script>
  var signature = $("#signature").val();
  var url = location.href.split('#')[0]; 
  wx.config({
      debug: true,
      appId: 'wx2fea4dec5cb77d24',
      timestamp: 1420774989,//此处同微信类里用来生成signature的timestamp要相同
      nonceStr: '2nDgiWM7gCxhL8v0',//此处同微信类里用来生成signature的nonceStr要相同
      signature: signature,
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo'
      ]
  });
wx.ready(function () {
    wx.onMenuShareAppMessage({
        title: '我的分享测试', // 分享标题
        desc: '我的分享测试demo', // 分享描述
        link: url, // 分享链接
        imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg', // 分享图标
        type: '', // 分享类型,music、video或link,不填默认为link
        dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
        success: function () { 
            // 用户确认分享后执行的回调函数
            alert("分享成功!");
        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
            alert("取消分享!");
        }
    });
})
</script>
</html>


如出现invalid signature 等错误详见微信附录5常见错误及解决办法。

 

好了,大家试试吧。。。

 

© 著作权归作者所有

共有 人打赏支持
PHP娃娃
粉丝 2
博文 11
码字总数 11448
作品 0
通州
程序员
微信开放JS-SDK,助力网页开发[转自微信官方]

微信公众平台今日面向开发者开放微信内网页开发工具包(微信JS-SDK)。 通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直...

明非_
2014/07/26
0
14
如何正确的在项目中接入微信JS-SDK

微信JS-SDK的功能 如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了。微信的官方文档描述如下。 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。...

detectiveHLH
08/04
0
0
微信中页面二次分享小图标丢失问题

每天踩点坑,每天成长一点点,这样工作才会变得有趣。微信JSSDK踩坑记录。 在我们有房APP1.1的版本中增加了房产资讯的功能,昨天晚上有同事在群里反馈从APP中分享的资讯到微信中,然后再次分...

尹吉欢
05/08
0
0
关于微信js分享接口的一些使用心得

虽然微信官方开放了js-sdk,但是在某些老版本的微信上存在兼容性问题,比如在安卓微信6.0.1版本上分享接口就无法使用,官方给出的解决方案就是升级微信。这不坑爹呢!我又不能强制我的用户去...

吾爱
2015/01/21
0
6
微信公众号开发纪要(4)-调用微信扫一扫功能

在微信公众号页面中调用微信扫一扫功能,就是调用微信JS-SDK。让JS-SDK完成调用摄像头扫描,然后我们将扫描结果进行业务操作。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页...

pdzhsy
07/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

springmvc入门之映射处理器(一)

1.简析映射处理器 在spring mvc中,使用映射处理器可以把web请求映射到正确的处理器上,spring内置了很多映射处理器,而且我们也可以自定义映射处理器。下面的实例展示spring中最常用的两个映...

明理萝
8分钟前
1
1
一个破碎的人,窃机浪漫飞行后自由坠毁

简评:A sick man who needs treatment 29 岁的 Richard Russell 是西雅图机场地勤人员,上周五,在刚进入秋天的日子,他偷了一架未载客的飞机,在空中飞行独自超过一小时,甚至驾机在空中翻...

极光推送
10分钟前
0
0
linux一次性解压多个.gz或者.tar.gz文件

解压多个压缩包 对于解压多个.gz文件的,用此命令: for gz in *.gz; do gunzip $gz; done 对于解压多个.tar.gz文件的,用下面命令: for tar in *.tar.gz; do tar xvf $tar; done...

小兔纸乖乖
21分钟前
0
0
bower 安装包的使用

一,bower是什么? bower是一种包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。 它依赖于node.js和npm,如果要使用它需要先安装node.js和npm,因为node.js包含n...

nsns
24分钟前
0
0
EXCEL简易的进度条

在进度栏非常简单的进度控制,以下知道程序是否已完成。 Option Explicit Sub StatusBar() Dim x As Integer Dim MyTimer As Double ...

tedzheng
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部