h5 微信分享朋友和朋友圈

最新推荐文章于 2024-08-21 17:22:33 发布
最新推荐文章于 2024-08-21 17:22:33 发布
阅读量975 收藏 3
点赞数 2
文章标签： php json 数据库
原文链接：http://www.cnblogs.com/liangzia/p/7569443.html
版权
  1. 生成JS-SDK权限验证签名
  2. 实现发送给朋友和分享到朋友圈时内容参数自定义

 

一、微信JS-SDK

1. 获得Access Token

access token的获得方法在前面有介绍，详情见 微信公众平台开发(26) ACCESS TOKEN

2. 获取jsapi_ticket

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

参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：
用第一步拿到的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权限验证的签名了。

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=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

完整代码如下

复制代码 
<?php
class JSSDK {
  private $appId;
  private $appSecret;

  public function __construct($appId, $appSecret) {
    $this->appId = $appId;
    $this->appSecret = $appSecret;
  }

  public function getSignPackage() {
    $jsapiTicket = $this->getJsApiTicket();

    // 注意 URL 一定要动态获取，不能 hardcode.
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
    $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

    $timestamp = time();
    $nonceStr = $this->createNonceStr();

    // 这里参数的顺序要按照 key 值 ASCII 码升序排序
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

    $signature = sha1($string);

    $signPackage = array(
      "appId"     => $this->appId,
      "nonceStr"  => $nonceStr,
      "timestamp" => $timestamp,
      "url"       => $url,
      "signature" => $signature,
      "rawString" => $string
    );
    return $signPackage; 
  }

  private function createNonceStr($length = 16) {
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) {
      $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
    }
    return $str;
  }

  private function getJsApiTicket() {
    // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例
    $data = json_decode(file_get_contents("jsapi_ticket.json"));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      // 如果是企业号用以下 URL 获取 ticket
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
      $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
      $res = json_decode($this->httpGet($url));
      $ticket = $res->ticket;
      if ($ticket) {
        $data->expire_time = time() + 7000;
        $data->jsapi_ticket = $ticket;
        $fp = fopen("jsapi_ticket.json", "w");
        fwrite($fp, json_encode($data));
        fclose($fp);
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }

    return $ticket;
  }

  private function getAccessToken() {
    // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
    $data = json_decode(file_get_contents("access_token.json"));
    if ($data->expire_time < time()) {
      // 如果是企业号用以下URL获取access_token
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
      $res = json_decode($this->httpGet($url));
      $access_token = $res->access_token;
      if ($access_token) {
        $data->expire_time = time() + 7000;
        $data->access_token = $access_token;
        $fp = fopen("access_token.json", "w");
        fwrite($fp, json_encode($data));
        fclose($fp);
      }
    } else {
      $access_token = $data->access_token;
    }
    return $access_token;
  }

  private function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_URL, $url);

    $res = curl_exec($curl);
    curl_close($curl);

    return $res;
  }
}
复制代码

 

二、发送给朋友和分享到朋友圈参数自定义

1. 绑定域名

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

2. 获取签名包

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();
?>

3. 引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：

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

4.通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。

复制代码 
<script>
    wx.config({
        debug: false,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'checkJsApi',
            'openLocation',
            'getLocation',
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
          ]
    });
</script>
复制代码

5. 通过ready接口处理成功验证

地理位置需要在页面加载时就调用，需要把相关接口放在ready函数中调用来确保正确执行

wx.ready(function () {
});

5.1 通过checkJsApi判断当前客户端版本是否支持分享参数自定义

复制代码 
        wx.checkJsApi({
            jsApiList: [
                'getLocation',
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
            ],
            success: function (res) {
                alert(JSON.stringify(res));
            }
        });
复制代码

5.2 使用数组定义分享内容参数

$news = array("Title" =>"微信公众平台开发实践", "Description"=>"本书共分10章，案例程序采用广泛流行的PHP、MySQL、XML、CSS、JavaScript、HTML5等程序语言及数据库实现。", "PicUrl" =>'https://images0.cnblogs.com/i/340216/201404/301756448922305.jpg', "Url" =>'http://www.cnblogs.com/txw1958/p/weixin-development-best-practice.html');

5.3. 实现JS分享功能

复制代码 
wx.onMenuShareAppMessage({
          title: '<?php echo $news['Title'];?>',
          desc: '<?php echo $news['Description'];?>',
          link: '<?php echo $news['Url'];?>',
          imgUrl: '<?php echo $news['PicUrl'];?>',
          trigger: function (res) {
            // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
            // alert('用户点击发送给朋友');
          },
          success: function (res) {
            // alert('已分享');
          },
          cancel: function (res) {
            // alert('已取消');
          },
          fail: function (res) {
            // alert(JSON.stringify(res));
          }
        });

        wx.onMenuShareTimeline({
          title: '<?php echo $news['Title'];?>',
          link: '<?php echo $news['Url'];?>',
          imgUrl: '<?php echo $news['PicUrl'];?>',
          trigger: function (res) {
            // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
            // alert('用户点击分享到朋友圈');
          },
          success: function (res) {
            // alert('已分享');
          },
          cancel: function (res) {
            // alert('已取消');
          },
          fail: function (res) {
            // alert(JSON.stringify(res));
          }
        });
复制代码

 

三、实现效果

弹出请求获取页面

分享时的插件显示方倍工作室的 微信公众平台开发最佳实践

   

转载于:https://www.cnblogs.com/liangzia/p/7569443.html

林尧彬
关注
微信h5分享好友和朋友圈功能
qq_35946021的博客
06-06 8511
微信h5分享好友和朋友圈功能，微信H5卡片分享功能
H5网页实现微信分享，分享朋友圈功能（分享带图片，附源码）
热门推荐
一火的专栏
08-14 4万+
H5网页实现微信分享，分享朋友圈功能，网上的代码基本上都过期了，特基于最新的jweixin-1.6.0版本的微信分享实现，以作备忘。 1.微信分享文档及配置 1.1微信分享官网文档 地址https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3 需要注意一下，即将废弃接口，建议不要再调用了。 1.2 appid对应的公众号是否有分享接口权限 登录公众号后，接口状态为已获得，表示有权限。如下图 ..
H5页面在小程序内点击右上角分享给朋友或朋友圈，以及点击链接显示图片、标题等
最新发布
weixin_43907578的博客
08-21 574
做一个H5分享页面，可以有自定义的标题、图片在微信里面转发。
微信h5分享好友和朋友圈
Dove言和
06-20 1407
微信自定义分享好友或朋友圈，js代码记录...html页面记得引入三个文件
H5+微信朋友、朋友圈分享
weixin_30483013的博客
03-06 101
import {showToast} from './index'; //上面函数只是简单的封装了uni.showToast方法，只是显示toast作用而已，大家可删除。 /** * 微信朋友：new ComponentName("com.tencent.mm", "com.tencent.mm.ui.tools.ShareImgUI"); * 微信朋友圈：new Compon...
h5分享微信好友朋友圈
m0_46151944的博客
04-25 893
微信分享朋友分享朋友圈 1.准备工作 1.1.获取微信公众号的appid 和 密钥 1.2公众号设置中添加js安全域名，需要将文件放在默认的80端口下。可做映射，可更改tomcat配置 1.2.1端口映射 一 .添加映射将80端口映射到8080 iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080 二. 删除映射(不需要时删除) 查看映射编号 iptables -t nat -L -nv --line-num
H5页面 微信卡片分享 好友 朋友圈； 前后端代码
07-25
H5页面 微信卡片分享 好友 朋友圈； 前后端代码 H5页面 微信卡片分享 好友 朋友圈； 前后端代码 文档地址： https://blog.csdn.net/nicepainkiller/article/details/131918628 文档地址： ...
微信h5分享好友和朋友圈-内含html引入、wxshare.js、php服务端接口
06-20
微信h5分享好友和朋友圈-内含html引入、wxshare.js、php服务端接口
Javascript 实现微信分享（QQ、朋友圈、分享给朋友）
01-19
最近做微信开发，对微信公众号的开发，现在好的都是分享到朋友圈，QQ，分享给好友等分享功能，这里记录下，有需要的朋友也可以看下。 // 微信分享 var wx = require('wechat-sdk'); rewardsResultService....
微信JS接口使用
dianleijian2582的博客
08-30 306
注意添加到head标签内 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>// 先引入官方文件 <script> 　　wx.config({ 　　　　debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若...
微信H5页面分享给朋友或朋友圈解决方案
weixin_48263393的博客
06-04 5281
微信H5页面 分享朋友或朋友圈解决方案
H5微信分享朋友及朋友圈功能及遇到的坑
猪大肠的世界
01-16 3249
最近产品部出了一个需求，要做一个分享的功能、在客户端微信上面打开弹出一个h5的分享弹窗，点击可以分享到微信朋友及朋友圈分享出去一张图片，如下图： 当时就想到，一般不都是微信中右上角有个三个点，点击可以分享的嘛，干嘛要还做这个多此一举，于是跟产品部讨论一番，说需点击分享按钮分享出去一张图片，平时我们点击右上角都是分享当前页面的链接，满足不了，彻底被产品部的需求震惊了，当时就想反手一巴掌，接下来...
h5中分享到ＱＱ，微信好友，朋友圈
liucai1018的博客
08-13 2951
如何在h5中进行分享？ h5中写了工具WxShare，工具通过使用JSJDK实现分享功能，这里只需要使用就行 使用：由于微信没有开放直接调起发送给朋友或者朋友圈等权限，因此只能引导用户点击右上角...再手动分享，我们要做的就是 初始化分享出去的内容。 1 首先声明一个变量以供使用 2内容参数：一般设置如下几个 title:分享的标题 desc:分享...
H5网页实现微信分享，分享朋友圈功能（分享带图片，附源码
2301_79099287的博客
04-03 1197
备注：登录后可在“开发者中心”查看对应的接口权限。//注意这里参数名必须全部小写，且必须有序。controller实现。2.1后端Java代码。
uniapp微信公众号h5的分享好友和分享朋友圈
记录本人工作中遇到的问题、经验总结以及分享。
07-24 4502
【代码】uniapp微信公众号h5的分享好友和分享朋友圈。
H5页面微信分享到朋友圈和分享给朋友
gunicoin的博客
08-21 929
微信 官方文档-公众号 一：绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注：登录后可在“开发者中心”查看对应的接口权限。 前端相关: 步骤二：引入JS文件 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （
h5公众号分享朋友、朋友圈
zwy1231的博客
02-21 2709
前言 微信分享（使用微信JS-SDK）、微信JS-SDK是面向网页开发者提供的基于微信内的网页开发工具包。JSSDK使用官方文档（官方使用手册） 详解一下我的使用流程以及踩坑记录，我做的项目属于公众号h5项目，今天突然接到需求对主推的某两个页面自定义分享内容，之前做过微信小程序和支付小程序的分享，都是直接使用特定的API修改标题、描述、图片、链接，想着贼简单，预估工时共要了一天，一把辛酸泪~~ ...
uniapp h5微信公众号分享到朋友圈代码实现
05-27
在uniapp中，可以使用微信JS-SDK来实现H5微信公众号分享到朋友圈的功能。具体代码实现如下： 1.在页面中引入微信JS-SDK： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值